.top-header { padding: 8px 38px 8px 10px; border-bottom: 1px solid #e5e5e5; } .top-header-infor ul li { display: inline-block; font-size: 16px; margin-right: 20px; color: #222222; font-weight: 500; } .top-header-infor ul li i { display: inline-block; font-size: 16px; margin-right: 10px; color: var(--first-color); } .top-header-infor ul li a { display: inline-block; font-size: 16px; color: #222222; text-transform: lowercase; font-weight: 500; } .header-area { padding: 0 15px 0; } .header-menu { text-align: center; } .header-menu>ul>li { display: inline-block; margin-right: 20px; } .header-menu a { display: inline-block; color: #040334; padding: 37px 0; transition: 0.5s; font-size: 18px; font-weight: 600; } .header-menu a:hover { color: var(--first-color); } .header-menu ul li i { display: inline-block; color: #555555; font-size: 16px; margin-left: 6px; position: relative; top: 1px; transition: 0.5s; } .header-menu a:hover i { transform: rotate(-180deg); color: var(--first-color); } .col-lg-3.text-right { text-align: right; } .sticky { left: 0; margin: auto; position: fixed !important; top: 0; width: 100%; -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1); background: #fff !important; transition: 0.5s !important; z-index: 922; -webkit-animation: 300ms running fadeInDown; animation: 500ms running fadeInUp; animation-name: slideInDown; } .header-menu ul li.menu-item-has-children { position: relative; } .header-menu ul li .sub-menu { position: absolute; width: fit-content; min-width: 200px; display: block; text-align: left; background: #fff; opacity: 0; visibility: hidden; transition: 0.5s; top: 150%; z-index: 2; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); border-top: 4px solid var(--first-color); border-radius: 5px 5px 0 0; } .header-menu ul li:hover .sub-menu { opacity: 1; top: 100%; visibility: visible; } .header-menu ul li .sub-menu li { display: block; } .header-menu ul li .sub-menu li a { display: block; padding: 6px 19px; color: #232323; width: 100%; white-space: nowrap; } .header-menu ul li .sub-menu li a:hover { background: var(--first-color); color: #fff; } .hero-section { background: url("../images/index-top-slide1.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; height: 80vh; position: relative; } .hero-content { animation: 3.1s running fadeInUp; } .hero-content h4 { font-size: 18px; font-weight: 700; margin-bottom: -7px; color: var(--first-color); position: relative; } .hero-content h4:before { position: absolute; content: ""; width: 60px; height: 3px; left: 38%; top: 32px; background: #fff; display: inline-block; } .hero-content h4:after { position: absolute; content: ""; width: 60px; height: 3px; right: 38%; top: 32px; background: #fff; display: inline-block; } .hero-content h1 { font-size: 80px; line-height: 60px; color: #fff; font-weight: 700; } p.hero-desc { color: #fff; width: 50%; padding: 29px 0 0px; margin: auto; color: #fff; font-size: 24px; } .solar-button { margin-top: 38px; position: relative; display: inline-block; } .solar-button a { background: var(--first-color); color: #fff; padding: 11px 25px; display: inline-block; border-radius: 5px; font-size: 18px; position: relative; z-index: 1; border: 2px solid var(--first-color); font-weight: 600; } .solar-button a:hover { color: var(--first-color); } .solar-button a:before { position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; background: #fff; transform: scale(0); z-index: -1; transition: 0.5s; border-radius: 5px; } .solar-button a:hover:before { transform: scale(1); } .solar-button i { font-size: 15px; display: inline-block; margin-left: 15px; background: #fff; color: var(--first-color); width: 25px; height: 25px; line-height: 25px; border-radius: 50px; text-align: center; transition: 0.5s; } .solar-button a:hover i { color: #fff; background: var(--first-color); } .single-feature-box-custom{ flex-direction: column; height: 100%; } .single-feature-box,.single-feature-box-custom{ border-radius: 8px; background-color: #ffffff; padding: 30px; position: relative; z-index: 1; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); display: flex; align-items: flex-start; margin-bottom: 30px; transition: all 0.3s ease; } .single-feature-box:hover,.single-feature-box-custom:hover{ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); transform: translateY(-5px); } .single-feature-box:before,.single-feature-box-custom:before{ position: absolute; content: ""; width: 0; height: 4%; bottom: 0px; left: 0; background: var(--first-color); z-index: -1; transition: 0.5s; border-radius: 0 0 6px 6px; } .single-feature-box:hover:before,.single-feature-box-custom:hover:before{ width: 100%; } .feature-icon,.feature-icon-custom{ margin-right: 20px; } .feature-content h4 ,.feature-content-custom h4{ font-size: 20px; line-height: 1.5; color: #222222; font-weight: 600; font-family: "Poppins"; } .feature-content p,.feature-content-custom p{ font-size: 16px; color: #222222; font-weight: 400; font-family: "Poppins"; } .section-title.tow { padding: 0 0 60px; } .row.feature { margin-top: -115px; position: relative; } .section-title h4 { font-size: 18px; font-weight: 600; color: var(--first-color); margin: 0; position: relative; } .section-title h4:before { position: absolute; content: ""; width: 30px; height: 2px; background: var(--first-color); left: -39px; bottom: 0; display: inline-block; } .section-title.tow h4:before { left: -141px; right: 0; margin: auto; } .section-title.tow h4:after { position: absolute; content: ""; width: 30px; height: 2px; background: var(--first-color); right: -142px; bottom: 0; display: inline-block; margin: auto; left: 0; } .section-title h1 { margin: 20px 0; font-size: 46px; font-weight: 600; line-height: 1.8; } p.desc-one { width: 69%; padding: 20px 0 0; } p.desc-tow { width: 54%; margin: auto; padding: 16px 0 0; } .index-about{ position: relative; background: url(../images/index-about-bg.png) no-repeat left -82px top 40px/524px; padding: 150px 0 335px; overflow: hidden; } .about-section { position: relative; background: #f8f9fa; padding: 150px 0; } .skill-section { padding: 80px 0; background: #f0f4f8; } .skill-section .section-title { margin-bottom: 30px; } .skill-section .section-title h4 { color: var(--first-color); font-size: 18px; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 2px; } .skill-section .section-title h1 { font-size: 36px; font-weight: 700; color: #333; margin-bottom: 20px; } .skill-section .desc-one { font-size: 16px; color: #555; margin-bottom: 30px; } .skill-section .sustainability-features { margin-top: 30px; } .skill-section .sustainability-item { margin-bottom: 25px; padding: 20px; background: rgba(255, 255, 255, 0.8); border-radius: 8px; transition: all 0.3s ease; } .skill-section .sustainability-item:hover { background: #ffffff; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .skill-section .sustainability-item-top { display: flex; align-items: center; margin-bottom: 12px; } .skill-section .sustainability-item h4 { font-size: 20px; font-weight: 600; color: #333333; margin: 0; } .skill-section .sustainability-features { margin-bottom: 30px; } .skill-section .sustainability-item { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px; padding: 15px; background: rgba(114, 175, 48, 0.05); border-radius: 8px; transition: all 0.3s ease; } .skill-section .sustainability-item:hover { background: rgba(114, 175, 48, 0.1); } .skill-section .sustainability-item i { font-size: 24px; color: var(--first-color); margin-right: 15px; margin-top: 5px; flex-shrink: 0; } .skill-section .sustainability-item h4 { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 5px; } .skill-section .sustainability-item p { font-size: 14px; color: #666; margin: 0; line-height: 1.6; } @media (max-width: 991px) { .skill-section { padding: 60px 0; } .skill-section .section-title h2 { font-size: 28px; } } .about-thumb { position: relative; margin-bottom: 30px; } .index-about-thumb img, .about-thumb img { position: relative; z-index: 2; width: 70%; height: auto; border-radius: 8px; } .about-thumb img { width: 100%; } .index-about-thumb{ position: relative; } .index-about-thumb img { width: 70%; } .pc_view { width: 100%; } .about-shape { position: absolute; top: 200px; right: -80px; z-index: 2; } .about-shape img { width: 70%; height: auto; } .top_about_wave { position: absolute; bottom: 70px; right: -1vw; width: 102vw; z-index: -1; } .top_about_wave img{ width: 100%; } .about-box-item { display: flex; align-items: center; margin-bottom: 4px; } .about-box-icon { margin-right: 20px; margin-top: 26px; border: 1px solid var(--second-color); width: 80px; height: 75px; text-align: center; line-height: 69px; border-radius: 5px; } .about-content h4 { font-size: 24px; color: #222222; font-weight: 600; font-family: "Barlow"; } .about-content p { font-size: var(--font-size); color: #616161; line-height: var(--line-height); } .service-section { background-color: #edfff5; padding: 98px 0 123px; } .service-section.upper { padding: 125px 0 105px; } .single-service-box { border-radius: 10px; filter: drop-shadow(0 0 125px rgba(0, 0, 0, 0.15)); background-color: #ffffff; text-align: center; padding: 40px 32px 38px; position: relative; z-index: 1; } .single-service-box.upper { margin-bottom: 20px; } .single-service-box:before { position: absolute; content: ""; width: 100%; height: 6px; background: var(--first-color); left: 0; bottom: -1px; z-index: -1; border-radius: 0 0 10px 10px; transform: scale(0); transition: 0.5s; } .single-service-box:hover:before { transform: scale(1); } .service-box-icon { background: var(--first-color); width: 70px; height: 70px; line-height: 70px; text-align: center; border-radius: 50px; margin: auto; } .service-content h4 { font-size: 20px; color: #222222; font-weight: 600; font-family: "Barlow"; margin-top: 16px; } .service-content p { margin: -3px 0 24px; } a.box-button { font-size: 16px; font-weight: 600; color: #222222; border-bottom: 1px solid #23232329; display: inline-block; } .single-service-box:hover a.box-button { border-bottom: 2px solid var(--first-color); color: var(--first-color); } .skill-section { background: url("../images/index-sustainability.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 90px 0; } .skill-section .section-title h4 { padding-left: 40px; } .skill-section .section-title h4:before { left: 3px; } .col-lg-6.add-padding { padding-left: 40px; } .skill { margin-bottom: 14px; position: relative; overflow-x: hidden; } .skill > p { font-size: 20px; font-weight: 600; color: #fff; margin: 0; margin-bottom: 13px; } .skill:before { width: 90%; height: 6px; content: ""; display: block; position: absolute; background: #fff; bottom: 20px; border-radius: 10px; } .skill-bar { width: 75%; height: 6px; background: var(--first-color); display: block; position: relative; border-radius: 8px; } .skill-bar span { font-size: 20px; font-weight: 600; float: right; top: -34px; position: relative; color: #fff; } .skill-bar { position: relative; } .working-process-box { text-align: left; padding: 0 56px 0; } .working-process-number-dark h1{ color: var(--first-color); font-size: 75px; font-weight: 700; position: relative; transition: 0.5s; } .working-process-number h1 { -webkit-text-stroke-width: 1px; color: transparent; -webkit-text-stroke-color: #dfdfdf; font-size: 150px; font-weight: 700; position: relative; transition: 0.5s; } .working-process-box:hover .working-process-number h1 { color: var(--first-color); -webkit-text-stroke-color: var(--first-color); } .working-process-number h1:before { position: absolute; content: ""; width: 14px; height: 13px; right: 0px; bottom: 40px; background: var(--first-color); display: inline-block; } .working-process-number.tow h1:before { right: 48px; } .working-process-content h4 { font-size: 24px; font-weight: 700; } .project-section { background: #edfff5; padding: 99px 0 101px; } .project-section.inner { padding: 122px 0 105px; } .single-project-box { margin-bottom: 20px; } .project-thumb { position: relative; overflow: hidden; } .project-thumb img { width: 100%; transition: 0.5s; } .single-project-box:hover .project-thumb img { transform: scale(1.1); } .call-do-action-section { padding: 100px 0 124px; background: linear-gradient(135deg, var(--first-color) 0%, var(--second-color) 100%); } .call-do-action-section .section-title.tow { padding: 0 0 35px; } .call-do-action-section .section-title.tow h4 { color: rgba(255, 255, 255, 0.9); } .call-do-action-section .section-title.tow h1 { color: #ffffff; } .call-do-action-section .section-title.tow .desc-tow { color: rgba(255, 255, 255, 0.85); } .call-do-action-section .section-title.tow h4:before { left: -215px; bottom: 0; background: #ffffff; } .call-do-action-section .section-title.tow h4:after { right: -214px; bottom: 0; background: #ffffff; } .quick-contact span { display: inline-block; font-size: 24px; font-weight: 700; color: #ffffff; } .call-do-action-section .solar-button { margin-top: 42px; } .col-lg-6.col-md-12.upper { padding-left: 30px; } .team-section { padding: 95px 0 103px; background: linear-gradient(to bottom, #edfff5, #fff); } .team-section.upper { padding: 130px 0 106px; } .team-section .section-title { padding: 0 0 61px; } .blog-section { background: #fdfdfd; padding: 100px 0 121px; } .blog-section.blog-list { padding: 122px 0 124px; } .blog-section .section-title { padding: 0 0 60px; } .single-blog-box { border-radius: 10px; position: relative; filter: drop-shadow(0 0 125px rgba(0, 0, 0, 0.15)); } .blog-thumb { overflow: hidden; } .blog-thumb img { width: 100%; transition: 0.5s; } .single-blog-box:hover .blog-thumb img { transform: scale(1.1); } .meta-blog p { color: var(--first-color); font-size: 16px; } .blog-content { padding: 31px 42px 19px; background: #fff; } .blog-content h4 a { font-size: 20px; color: #232323; font-weight: 600; line-height: 30px; transition: 0.5s; margin: 10px 0 24px; } .single-blog-box:hover .blog-content h4 a { color: var(--first-color); } a.blog-button { font-size: 18px; font-weight: 600; color: #222222; border-bottom: 2px solid #222222; display: inline-block; } .single-blog-box:hover a.blog-button { color: var(--first-color); border-bottom: 2px solid var(--first-color); } .footer-section { background: #222222; padding: 128px 0 18px; } .footer-widget-content { margin-top: -22px; } .footer-widget-title { margin-bottom: 35px; } .footer-widget-title h4 { font-size: 22px; color: #fff; font-weight: 600; } .footer-widget-menu ul li a { opacity: 0.8; font-size: 16px; line-height: 41px; color: #ffffff; font-weight: 400; transition: 0.5s; } .footer-widget-menu ul li a:hover { color: var(--first-color); } .footer-contact { display: flex; align-items: center; margin-bottom: 14px; } .footer-contact-icon i { color: #fff; margin-right: 13px; background: #1f2f27; display: inline-block; width: 45px; height: 45px; text-align: center; line-height: 45px; border-radius: 50px; margin-top: 9px; } .footer-contact-content h4 { color: #fff; font-size: 18px; line-height: 28px; opacity: 0.8; } .footer-contact-content p { color: #fff; font-size: 16px; opacity: 0.8; } .copyright-area { border-top: 1px solid #393f3382; margin-top: 99px; } .copyright-area p { opacity: 0.8; font-size: 16px; line-height: 40px; color: #ffffff; margin-top: 25px; } .copyright-area a { display: inline-block; color: var(--first-color); } .breadcumb-section { background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 150px 0; } .breadcumb-title h1 { font-size: 46px; color: white; margin-bottom: 8px; } .breadcumb-content{ background: rgba(0,0,0,0.4); padding: 10px 30px; width: fit-content; } .breadcumb-content ul li { display: inline-block; color: white; font-family: "Poppins"; margin-right: 3px; } .breadcumb-content ul li:not(:last-child):after{ content: "\f105"; font-family: "Font Awesome 5 Free"; color: white; font-weight: 600; font-size: 14px; margin: 10px 0; } .breadcumb-content ul li a { display: inline-block; color: white; font-size: 20px; font-weight: 600; margin-top: 15px; font-family: "Arial"; } .breadcumb-content ul li i { display: inline-block; font-size: 15px; } .counter-section { background: linear-gradient(135deg, var(--first-color) 0%, var(--second-color) 100%); padding: 105px 0 125px; } .counter-section .section-title.tow { padding: 0 0 35px; } .counter-section .section-title h4 { color: #fff; } .counter-section .section-title.tow h4:before { left: -180px; background: #fff; } .counter-section .section-title.tow h4:after { background: #fff; right: -180px; } .counter-section .section-title h1 { color: #fff; } .counter-box { text-align: center; } .counter-content h1 { font-size: 50px; color: #fff; display: inline-block; } .counter-content span { font-size: 50px; color: #fff; font-weight: 500; } .counter-content p { color: #fff; margin-top: 5px; } .history-section { background: #f7f7f7; padding: 106px 0 59px; } .history-section .section-title { padding: 0 0 67px; } .history-box { margin-bottom: 69px; } .history-box.upper { margin-top: -178px; padding: 0 45px 0; } .history-box.upper .history-content { width: 93%; } .history-thumb img { width: 100%; } .history-content { border-radius: 5px; background-color: #ffffff; width: 82%; margin: auto; padding: 32px 33px 33px; margin-top: -50px; z-index: 1; position: relative; } .history-content span { font-size: 18px; color: var(--first-color); font-family: "Rubik"; display: inline-block; } .history-content h4 { font-size: 22px; color: #232323; font-weight: 600; font-family: "Rubik"; margin-bottom: 9px; } p.center { width: 65%; margin: auto; padding: 26px 0 0; } .accordion li { list-style: none; padding: 2px 0px 15px; position: relative; z-index: 1; } .accordion li:before { position: absolute; content: ""; z-index: -1; right: 20px; top: 16px; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; background-color: var(--first-color); } .accordion li a { position: relative; width: 100%; display: block; cursor: pointer; font-weight: 500; font-size: 17px; color: #232323 !important; background-color: transparent; border: 1px solid #f1f1f1; padding: 14px 20px 14px 30px; border-radius: 5px; z-index: 1; font-family: "Rubik"; } .accordion li p { display: none; font-size: 16px; padding: 25px 20px 25px 30px; margin: 0; background: rgba(30, 71, 153, 0.1); backdrop-filter: blur(1.9px); overflow: hidden; border-radius: 0 0 5px 5px; } .accordion a:before { width: 2px; height: 10px; background: #fff; position: absolute; right: 32px; content: " "; top: 22px; transform: rotate(0deg); transition: all 0.2s ease-in-out; } .accordion a:after { width: 10px; height: 2px; background: #fff; position: absolute; right: 28px; content: " "; top: 26px; transition: all 0.2s ease-in-out; } .accordion a.active:after { transform: rotate(0deg); -webkit-transition: all 0.2s ease-in-out; background: #fff; } .accordion a.active:before { display: none; } .accordion a.active { color: #fff !important; border: 1px solid #00d664 !important; background: #00d664 !important; border-radius: 5px 5px 0 0; } .service-dtls-items ul li { display: block; list-style: none; padding: 12px 0 0; color: #062461; font-weight: 400; } .service-dtls-items ul li i { background: #e5e8ef; border-radius: 20px; color: #062461; font-size: 15px; padding: 5px 7px; line-height: 20px; margin-right: 5px; transition: 0.5s; display: inline-block; } .service-dtls-items ul li:hover i { background: var(--first-color); color: #fff; } .form-box input { width: 90%; background: #edfff5; border: transparent; margin-bottom: 20px; height: 50px; padding: 0 16px; border-radius: 5px; outline: 0; } .form-box textarea { width: 95%; height: 130px; padding: 11px 22px; background: #edfff5; border: transparent; border-radius: 5px; outline: 0; margin-bottom: 35px; } p.form-text { display: inline-block; font-size: 16px; font-weight: 300; padding-right: 12px; } .row.products { padding-left: 80px; } .pagination-menu { padding-top: 30px; } .pagination-menu ul { display: inline-block; } .pagination-menu ul li { display: inline-block; list-style: none; margin-right: 8px; } .pagination-menu ul li a { width: 46px; height: 46px; line-height: 46px; text-align: center; border-radius: 50%; background: #f5f5f5; display: inline-block; color: #062462; font-size: 20px; position: relative; z-index: 1; transition: 0.5s; } .pagination-menu ul li a:before { position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; background: var(--first-color); border-radius: 50%; transform: scale(0); transition: 0.5s; z-index: -1; } .pagination-menu ul li a:hover:before { transform: scale(1); } .pagination-menu ul li a:hover { color: #fff; } .title h5 { font-size: 22px; margin-right: 22px; margin-top: -4px; } .point span { display: inline-block; cursor: pointer; margin: 0 -3px; } .nav-tabs { border: 1px solid #dee2e6; } .tooltip-inner { padding: 1.3em; } .project-list-iteam { margin-top: 30px; } .project-list-iteam ul li i { display: inline-block; color: var(--first-color); margin-right: 10px; font-size: 18px; } .project-list-iteam ul li { margin-bottom: 10px; } .single-blog-box-3 { background: #fff; padding: 35px; border-radius: 5px; margin-bottom: 29px; filter: drop-shadow(0px 4px 3px rgba(0, 0, 0, 0.1)); } .blog-content-3 { padding: 28px 0 0; } .meta-blog-3 span { font-size: 14px; margin-right: 10px; display: inline-block; } .meta-blog-3 span i { color: var(--first-color); font-size: 13px; display: inline-block; margin-right: 9px; } a.blog-title-3 { font-size: 30px; display: inline-block; color: #232323; font-weight: 600; font-family: "Rubik"; line-height: 45px; text-transform: unset; padding: 14px 0 11px; transition: 0.5s; } .single-blog-box-3:hover a.blog-title-3 { color: var(--first-color); } p.blog-desc-3 { width: 92%; margin-bottom: 22px; } .blog-pages-intention { margin-top: 20px; } .blog-pages-intention ul li { display: inline-block; margin-right: 14px; } .blog-pages-intention ul li i { display: inline-block; background: var(--first-color); width: 40px; height: 40px; text-align: center; line-height: 40px; color: #fff; border-radius: 3px; } .blog-pages-intention ul li a { display: inline-block; font-size: 20px; border: 1px solid var(--first-color); width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 3px; position: relative; z-index: 1; } .blog-pages-intention ul li a:hover, .blog-pages-intention ul li.active a{ color: #fff; } .blog-pages-intention ul li.active{ background: var(--first-color); } .blog-pages-intention ul li a:before { position: absolute; content: ""; left: 0; top: 0; right: 0; bottom: 0; transform: scale(0); background: var(--first-color); border-radius: 3px; z-index: -1; transition: 0.5s; } .blog-pages-intention ul li a:hover:before { transform: scale(1.1); } .prgoress_indicator { position: fixed; right: 50px; bottom: 75px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(22, 93, 245, 0.2); z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(15px); transform: translateY(15px) !important; transition: all 200ms linear !important; } .prgoress_indicator.active-progress { opacity: 1; visibility: visible; transform: translateY(0) !important; } .prgoress_indicator::after { position: absolute; content: "\f106"; font-family: "Font Awesome 5 Free"; text-align: center; line-height: 46px; font-size: 18px; color: var(--first-color); left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; font-weight: 900; z-index: 1; transition: all 200ms linear !important; } .prgoress_indicator::before { position: absolute; content: "\f106"; font-family: "Font Awesome 5 Free"; text-align: center; line-height: 46px; font-size: 18px; font-weight: 900; opacity: 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 2; transition: all 200ms linear !important; } .prgoress_indicator:hover ::after { color: var(--first-color); } .prgoress_indicator:hover ::before { opacity: 1; } .prgoress_indicator svg path { fill: none; } .prgoress_indicator svg.progress-circle path { stroke: var(--first-color); stroke-width: 4; box-sizing: border-box; transition: all 200ms linear !important; } .feature-icon i,.feature-icon-custom i{ font-size: 35px; color: var(--first-color); } .hero-section::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C300,120 800,120 1200,0 L1200,120 L0,120 Z' fill='%23ffffff' /%3E%3C/svg%3E"); background-size: cover; background-repeat: no-repeat; pointer-events: none; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; overflow-wrap: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; } .footer-logo img{ width: 90%; } .single-project-box{ height: 400px; overflow: hidden; } .sustainability-item-desc { font-size: 14px; color: #666; margin: 0; line-height: 1.6; } .section-md { padding: 60px 0; } .bg-gray-3 { background-color: #f8f9fa; } .shell-wide { max-width: 1200px; margin: 0 auto; padding: 0 15px; } .range { display: flex; flex-wrap: wrap; margin: 0 -15px; } .range-30 { margin: 0 -15px; } .range-50 { margin: 0 -25px; } .range-center { justify-content: center; text-align: center; } .flex-row-reverse { flex-direction: row-reverse; } .cell-md-3 { flex: 0 0 25%; max-width: 25%; padding: 0 15px; } .cell-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; padding: 0 15px; } .cell-md-6 { flex: 0 0 50%; max-width: 50%; padding: 0 15px; } .cell-sm-6 { flex: 0 0 50%; max-width: 50%; padding: 0 15px; } .offset-top-28 { margin-top: 28px; } .offset-top-30 { margin-top: 30px; } .icon-primary { color: var(--first-color); } .icon-sm { font-size: 18px; } .unit { display: flex; } .unit-spacing-icon { align-items: flex-start; } .unit-sm-horizontal { flex-direction: row; } .unit__left { flex-shrink: 0; } .unit__body { flex: 1; } .box-icon-content { padding-left: 15px; } .heading-5 { font-size: 18px; font-weight: 600; color: #333; } .heading-6 { font-size: 16px; font-weight: 600; color: #333; } .text-primary { color: var(--first-color); } .text-center { text-align: center; } .big { font-size: 18px; line-height: 1.8; color: #555; } .list { list-style: none; padding: 0; } .list-marked { padding-left: 20px; } .list-bold { font-weight: 500; } .list-marked li { position: relative; padding-left: 20px; margin-bottom: 10px; } .list-marked li:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; position: absolute; left: 0; color: var(--first-color); font-weight: 600; } .theme-text { color: var(--second-color); } .button { display: inline-block; padding: 12px 30px; font-weight: 600; text-decoration: none; border-radius: 5px; transition: all 0.3s ease; } .button-primary { background: var(--first-color); color: #fff; border: 2px solid var(--first-color); } .button-primary:hover { background: transparent; color: var(--first-color); } .mb-2 { margin-bottom: 0.5rem; } .row-gap-30{ row-gap: 30px; } @media (max-width: 767px) { .cell-md-3, .cell-md-4, .cell-md-6 { flex: 0 0 100%; max-width: 100%; } .cell-sm-6 { flex: 0 0 100%; max-width: 100%; } .flex-row-reverse { flex-direction: column; } .range-50 { margin: 0 -15px; } .about-shape { display: none; } .top_about_wave{ bottom: -50px; } } .timeline-section { padding: 60px 0; } .timeline { position: relative; max-width: 1400px; margin: 0 auto; } .timeline-item { position: relative; display: flex; margin-bottom: 40px; } .timeline-item:last-child { margin-bottom: 0; } .timeline-marker { position: relative; width: 60px; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .timeline-dot { width: 20px; height: 20px; background: var(--first-color); border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--first-color); z-index: 2; } .timeline-line { width: 3px; flex: 1; min-height: 60px; background: linear-gradient(to bottom, var(--first-color), rgba(26, 54, 93, 0.2)); margin-top: 10px; } .timeline-content { flex: 1; padding: 20px 24px; background: #fff; border-radius: 8px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); margin-left: 20px; transition: all 0.3s ease; } .timeline-content:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); } .timeline-year { display: inline-block; font-size: 14px; font-weight: 700; color: var(--first-color); margin-bottom: 8px; } .timeline-content h4 { margin: 0 0 10px 0; font-size: 18px; color: #1a1a1a; font-weight: 600; } .timeline-content p { margin: 0; color: #666; line-height: 1.6; } @media (max-width: 991px) { .timeline { max-width: 100%; padding: 0 15px; } } @media (max-width: 767px) { .timeline-item { flex-direction: column; margin-bottom: 30px; } .timeline-marker { width: 100%; flex-direction: row; align-items: center; margin-bottom: 15px; } .timeline-dot { order: 2; } .timeline-line { order: 3; flex: 1; min-height: 40px; width: 3px; margin-top: 0; margin-left: 8px; } .timeline-content { margin-left: 0; padding: 16px; } .timeline-content h4 { font-size: 16px; } }