/* RESET */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #053943; --secondary-color: #FFD9E4; --white-color: #ffffff; --red-color: #880840; --light-red-color: #AC1798; --light-pink-color: #F89FB8; --dark-green-color: #031B1F; --extra-light-pink-color: #FFF3F7; --light-sky-color: #F0FDFF; --grey-color: #656F70; --extra-light-gray-color: #F3F3F4; } /* BODY */ html { scroll-behavior: smooth; } body { font-family: "Host Grotesk", sans-serif; color: var(--dark-green-color); } body,ul,li,button { font-family: "Host Grotesk", sans-serif; } /* TYPOGRAPHY */ h1 { font-size: 64px; font-weight: 500; } h2 { font-size: 36px; line-height: 48px; font-weight: 500; color: var(--dark-green-color); } h3 { font-size: 40px; font-weight: 600; line-height: 18px; } h4 { font-size: 24px; font-weight: 500; } h6 { font-size: 14px; line-height: 18px; font-weight: 700; text-transform: uppercase; color: var(--red-color); letter-spacing: 8%; } p { font-size: 16px; line-height: 24px; } img { vertical-align: middle; } /* CONTAINER */ .container { width: 100%; max-width: 1000px; margin: 0 auto; } .align-center { align-items: center; } .text-center { text-align: center; } .text-right { text-align: right; } .justify-content-between { justify-content: space-between; } section { padding-left: 20px; padding-right: 20px; position: relative; z-index: 0; } @media (max-width: 1200px) { .container { max-width: 1140px;} } @media (max-width: 1024px) { .container { max-width: 960px;} } @media (max-width: 767px) { .container { max-width: 720px;} } @media (max-width: 576px) { .container { max-width: 100%; } } .custom-row { display: flex; flex-wrap: wrap;} /* GRID SYSTEM (12 COL) */ .custom-col-1 { width: 8.33%; } .custom-col-2 { width: 16.66%; } .custom-col-3 { width: 25%; } .custom-col-4 { width: 33.33%; } .custom-col-5 { width: 41.66%; } .custom-col-6 { width: 50%; } .custom-col-7 { width: 58.33%; } .custom-col-8 { width: 66.66%; } .custom-col-9 { width: 75%; } .custom-col-10 { width: 83.33%; } .custom-col-11 { width: 91.66%; } .custom-col-12 { width: 100%; } /* BUTTON BASE */ .btn, .contact_button>a { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 30px; text-decoration: none; font-size: 16px; line-height: 20px; font-weight: 500; transition: all 0.3s ease; } .btn i { margin-left: 5px; font-size: 12px; } /* PRIMARY BUTTON */ .btn-primary { background: transparent; color: var(--dark-green-color); border: 1px solid #b3bbbd; } .btn-primary:hover { background: var(--primary-color); color: var(--white-color); } /* SECONDARY BUTTON */ .btn-secondary { background: transparent; color: var(--dark-green-color); border: 1px solid rgba(3, 27, 31, 0.3); } .btn-secondary:hover, .btn-secondary:focus { background: var(--primary-color); color: var(--white-color); border-color: var(--primary-color); } /* DEFAULT HEADER */ .header { padding: 20px 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; transition: all 0.3s ease; } .header-wrap { display: flex; justify-content: space-between; align-items: center; } .menu-toggle { display: none; font-size: 28px; cursor: pointer; } .navigation ul { display: flex; align-items: center; gap: 20px; list-style: none; } .navigation li a { margin-left: 17px; text-decoration: none; color: var(--dark-green-color); font-size: 16px; line-height: 20px; } .navigation li a:hover, .navigation li a:focus { color: var(--red-color); } .navigation li.current-menu-item a { text-decoration: underline; text-underline-offset: 4px; } .navigation .contact_button>a { border: 1px solid var(--primary-color); background: var(--primary-color); color: var(--white-color); } .navigation .contact_button>a:hover, .navigation .contact_button>a:focus { background: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); } body.menu-open,body.modal-open, html.modal-open { overflow: hidden !important; } body.home header { background: #FFF3F7; } body header.scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); background: var(--white-color); } body.work header.scrolled { box-shadow: 0 4px 20px rgba(5, 57, 67, 0.3); background: var(--white-color); } body.about header.scrolled { box-shadow: 0 4px 20px rgba(5, 57, 67, 0.3); background: var(--white-color); } .menu-open .menu-toggle::before { content: ""; position: absolute; color: var(--dark-green-color); background: #FFF3F7; width: 26px; height: 26px; right: 20px; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' width='64px' height='64px'%3E%3Cpath d='M 19 15 C 17.977 15 16.951875 15.390875 16.171875 16.171875 C 14.609875 17.733875 14.609875 20.266125 16.171875 21.828125 L 30.34375 36 L 16.171875 50.171875 C 14.609875 51.733875 14.609875 54.266125 16.171875 55.828125 C 16.951875 56.608125 17.977 57 19 57 C 20.023 57 21.048125 56.609125 21.828125 55.828125 L 36 41.65625 L 50.171875 55.828125 C 51.731875 57.390125 54.267125 57.390125 55.828125 55.828125 C 57.391125 54.265125 57.391125 51.734875 55.828125 50.171875 L 41.65625 36 L 55.828125 21.828125 C 57.390125 20.266125 57.390125 17.733875 55.828125 16.171875 C 54.268125 14.610875 51.731875 14.609875 50.171875 16.171875 L 36 30.34375 L 21.828125 16.171875 C 21.048125 15.391875 20.023 15 19 15 z'/%3E%3C/svg%3E"); } @media (max-width: 767px) { .navigation { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: #FFF3F7; display: flex; justify-content: center; align-items: center; transition: 0.4s ease; z-index: 1000; } .navigation ul { flex-direction: column; gap: 30px; text-align: center; } .navigation li a { margin-left: 0; font-size: 20px;} .navigation.active { right: 0; } .menu-toggle { display: block; z-index: 1001; } header .logo img { width: 166px; } } /* HEADER END */ /* BANNER style start */ .banner__section { margin-top:88px; background: #FFF3F7; overflow: hidden; } img.banner-pattern_ryt { margin: 0px; position: absolute; height: auto; width: 80%; right: -23%; top: 0px; } .banner_content { display: flex; align-items: center; gap: 40px; } .banner__wrap { padding: 120px 0px 120px; align-items: center; position: relative; min-height: 616px; } .banner_right img { width: 100%; height: auto; } .banner_left { max-width: 400px; } .banner__pattern { margin-bottom: 20px; } h1.banner__title { margin-bottom: 32px; line-height: 86px;} .banner__title strong { font-weight: 800; } .banner_content p { max-width: 360px; } .mobile_display { display: none !important; } @media screen and (max-width:1200px) { img.banner-pattern_ryt { width: 800px; right: -12%; } } @media screen and (max-width:1024px) { img.banner-pattern_ryt { width: 750px; right: -15%; } .banner__wrap { padding: 133px 0px 100px; align-items: center; position: relative; min-height: 580px; } .banner__wrap { min-height: unset; padding: 115px 0px 115px; } } @media screen and (max-width:991px) { .banner__wrap { padding: 40px 0px 0px; } .banner__section { overflow: hidden;} .banner_left { max-width: 100%; width: 100%; } .banner_content { flex-direction: column; align-items: self-end;} img.banner-pattern_ryt { margin-top:40px; margin-left:auto; position: relative; width: 390px; right: -20px; } } @media screen and (max-width:767px) { h1.banner__title { margin-bottom: 21px; font-size: 48px; line-height: 64px; } .banner__section { margin-top: 72px;} .banner__wrap { padding: 20px 0px 0px; } } @media screen and (max-width:460px) { img.banner-pattern_ryt { width: 100%; } } /* BANNER style END */ /* FOOTER style start */ footer { background: var(--primary-color) url(../images/footer-bg-img.webp) bottom center no-repeat; color: var(--white-color); padding: 120px 20px 119px; position: relative; } .footer-logo a { display: inline-flex } footer .cta-title { margin-bottom: 35px; font-size: 64px; line-height: 1.3; color: var(--white-color); } .cta-title em { font-style: italic; font-weight: 800; } .cta-desc { color: #cfd8d8; font-size: 16px; } .cta-right { text-align: right; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.2); margin-top: 97px; padding-top: 25px; align-items: center; } .cta-contact a.btn.btn-secondary { margin-bottom: 16px; color: var(--white-color); border: 1px solid rgba(255, 255, 255, 0.3); } .cta-contact a.btn.btn-secondary svg path { stroke: var(--white-color); } .cta-contact a.btn.btn-secondary:hover { background: var(--white-color); color: var(--primary-color); } .cta-contact a.btn.btn-secondary:hover svg path { stroke: var(--primary-color); } footer a.btn.btn-primary { background: var(--white-color); color: var(--dark-green-color); margin-top: 47px; margin-right: 42px; } footer a.btn.btn-primary:hover { color: var(--white-color); border-color: rgba(255, 255, 255, 0.3); background: transparent; } .cta-contact a.btn.btn-secondary:first-child { margin-right: 6px; } /* SCROLL TOP */ .scroll-top { width: 42px; height: 42px; background: var(--white-color); color: var(--dark-green-color); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .scroll-top:hover { color: var(--white-color);background: var(--red-color);} @media (max-width: 767px) { footer { padding: 64px 20px 64px; background: var(--primary-color) ; background-image: none; } footer .cta-title { margin-bottom: 32px; font-size: 48px; font-weight: 500; } .footer-logo img { width: 166px; } .foot-text p { font-size: 14px; } .cta-right { text-align: left; } .cta-contact { align-items: flex-start; } .footer-bottom { margin-top: 64px; text-align: center; gap: 10px; flex-wrap: nowrap; } footer .cta-desc { margin-bottom: 64px; } footer a.btn.btn-primary { margin-top: 24px; margin-right: auto; } } @media (max-width: 350px) { footer .text-right { text-align: center; } .footer-bottom { flex-direction: column; gap: 10px; } footer .cta-title { font-size: 44px; } .scroll-top { margin-top: 20px; } } /* FOOTER style END */ .featured-projects { padding: 80px 20px 123px; } .section-title { margin-top: 32px; margin-bottom: 62px; } .project-row { gap: 66px 32px; } .project-row .custom-col-6 { width: calc(50% - 16px); } .project-img { border-radius: 20px; overflow: hidden; margin-bottom: 25px; } .project-img img { width: 100%; height: 100%; object-fit: cover; display: block;aspect-ratio: 1/1; } .project-img a { display: flex; } .project-card h4 { margin-bottom: 8px; } .project-card h4>a { text-decoration: none; color: var(--dark-green-color); display: flex; line-height: 34px; } .project-card p, .project_year, .project_category li { color: var(--grey-color); } .project-card:hover img { transform: scale(1.05); transition: 0.4s ease; } .project-card img { transition: transform 0.4s ease; } .featured-projects a.btn { margin-top: 65px; } .project-card:hover h4>a { color: var(--red-color); transition: 0.4s ease; } .project_year::before { content: "•"; padding-right: 8px; color: #C0C6CD; } .project_category { list-style: none; display: inline-flex; gap: 5px; padding-right: 4px; } .project_category li::after { content: ","; } .project_category li:last-child:after { content: ""; } @media (max-width: 767px) { .featured-projects { padding-top: 64px; padding-bottom: 64px; } .section-title { margin-bottom: 30px; } .project-img { border-radius: 16px; } .project-row { gap: 40px 32px; } .project-row .custom-col-6 { width: 100%; } .featured-projects a.btn { margin-top: 40px; } } /* what we do section style start */ .what-we-do { padding-top: 116px; padding-bottom: 45px; } .what-title { max-width: 600px; margin: 32px auto 65px; } .what-row { row-gap: 70px; } .what-card h4 { margin-top: 30px; margin-bottom: 13px; } .what-card p { color: var(--grey-color); } .blob-wrapper { position: relative; display: flex; justify-content: center; align-items: center; } .blob-pattern { height: 232px; width: 232px; margin: 0 auto; } .blob-wrapper > img { position: absolute; } .blob-wrapper .blob-pattern svg, .blob-wrapper .blob-pattern svg path { fill: #FFF3F7; } .what-card:hover .blob-pattern svg, .what-card:hover .blob-pattern svg path { fill: var(--primary-color); transition: fill 0.3s ease; } @media (max-width: 991px) { .what-row { gap: 40px 20px; } .what-row .custom-col-4 { width: calc(50% - 10px); } } @media (max-width: 767px) { .what-we-do { padding-top: 64px; padding-bottom: 64px; } .what-title { margin: 0px auto 65px; } .what-title br { display: none; } .blob-wrapper .blob-pattern svg { width: 140px; height: 140px; } .blob-pattern { height: 140px; width: 140px; margin: 0 auto; } .blob-wrapper > img { position: absolute; width: 100px; } } /* Popup style start */ .popup__wrapper h2 { margin-bottom: 2px; font-size: 28px; } .popup__wrapper p.subtitle { margin-bottom: 8px; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; align-items: flex-start; justify-content: center; z-index: 9999; max-height: 100vh; overflow-y: auto; padding-top: 33px; padding-bottom: 33px; } .modal { background: var(--white-color); width: 809px; max-width: 90%; padding: 48px 64px; border-radius: 20px; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.15); } .close-btn { position: absolute; top: 15px; right: 20px; font-size: 22px; border: none; background: #eee; border-radius: 50%; width: 48px; height: 48px; cursor: pointer; } .close-btn svg path { stroke: var(--dark-green-color); } .close-btn:hover { background: var(--primary-color); color: var(--white-color); } .close-btn:hover svg path { stroke: var(--white-color); } .subtitle { color: var(--grey-color); margin-bottom: 32px; } .popup__wrapper form ::placeholder { color: #B3BBBC; } form label { display: block; margin: 24px 0 5px; font-size: 16px; font-weight: 500; color: #212121; } form select { color: #B3BBBC; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: #fff; cursor: pointer; } form select option { color: var(--grey-color); } form input, form select, form textarea { width: 100%; padding: 12px; border: 1px solid #B3BBBC; border-radius: 8px; font-size: 16px; } .popup-form textarea { height: 104px !important; resize: none !important; } form input[type="text"] { padding: 15px 15px; } .submit-btn { margin-top: 20px; background: var(--primary-color); color: var(--white-color); border: none; padding: 16px 20px; border-radius: 25px; cursor: pointer; display: flex; gap: 10px; justify-content: center; border: 1px solid var(--primary-color); } .submit-btn:hover, .submit-btn:focus { background: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); } .submit-btn:hover svg path, .submit-btn:focus svg path { stroke: var(--primary-color); } /* Forminator form style */ .popup-form input, .popup-form select, .popup-form textarea { width: 100% !important; padding: 12px !important; border: 1px solid #ddd !important; border-radius: 8px !important; font-size: 16px !important; } .popup-form .forminator-button-submit { margin-top: 32px !important; background: var(--primary-color) !important; color: var(--white-color) !important; border: none !important; padding: 11.5px 23px !important; border-radius: 35px !important; cursor: pointer !important; display: flex !important; gap: 10px !important; justify-content: center !important; border: 1px solid var(--primary-color) !important; font-size: 16px !important; background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.69225 8.14182C6.56484 8.01464 6.413 7.91458 6.24587 7.84767L0.959203 5.72767C0.896081 5.70234 0.842218 5.65831 0.804842 5.60148C0.767467 5.54466 0.748368 5.47776 0.750109 5.40977C0.751851 5.34178 0.774349 5.27595 0.814585 5.22111C0.854821 5.16628 0.910868 5.12506 0.975204 5.103L13.6419 0.769665C13.7009 0.748329 13.7649 0.744257 13.8262 0.757926C13.8875 0.771595 13.9436 0.802439 13.988 0.84685C14.0324 0.891261 14.0633 0.947401 14.0769 1.0087C14.0906 1.07 14.0865 1.13393 14.0652 1.193L9.73187 13.8597C9.70981 13.924 9.66859 13.98 9.61376 14.0203C9.55892 14.0605 9.49309 14.083 9.4251 14.0848C9.35711 14.0865 9.29021 14.0674 9.23339 14.03C9.17656 13.9927 9.13253 13.9388 9.1072 13.8757L6.9872 8.58767C6.91999 8.42066 6.81966 8.269 6.69225 8.14182ZM6.69225 8.14182L8.51565 6.31878' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: 16px 16px !important; padding-right: 48px !important; background-position: calc(100% - 20px) !important; outline: none !important; box-shadow: none !important; } .popup-form .forminator-button-submit:hover, .popup-form .forminator-button-submit:focus { background: transparent !important; color: var(--primary-color) !important; border: 1px solid var(--primary-color) !important; background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.69225 8.14182C6.56484 8.01464 6.413 7.91458 6.24587 7.84767L0.959203 5.72767C0.896081 5.70234 0.842218 5.65831 0.804842 5.60148C0.767467 5.54466 0.748368 5.47776 0.750109 5.40977C0.751851 5.34178 0.774349 5.27595 0.814585 5.22111C0.854821 5.16628 0.910868 5.12506 0.975204 5.103L13.6419 0.769665C13.7009 0.748329 13.7649 0.744257 13.8262 0.757926C13.8875 0.771595 13.9436 0.802439 13.988 0.84685C14.0324 0.891261 14.0633 0.947401 14.0769 1.0087C14.0906 1.07 14.0865 1.13393 14.0652 1.193L9.73187 13.8597C9.70981 13.924 9.66859 13.98 9.61376 14.0203C9.55892 14.0605 9.49309 14.083 9.4251 14.0848C9.35711 14.0865 9.29021 14.0674 9.23339 14.03C9.17656 13.9927 9.13253 13.9388 9.1072 13.8757L6.9872 8.58767C6.91999 8.42066 6.81966 8.269 6.69225 8.14182ZM6.69225 8.14182L8.51565 6.31878' stroke='%23053943' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: 16px 16px !important; padding-right: 48px !important; background-position: calc(100% - 20px) !important; outline: none !important; box-shadow: none !important; } .popup-form .select2-results .select2-results__options .select2-results__option.select2-results__option--selected, .popup-form .select2-results .select2-results__options .select2-results__option.select2-results__option--selected span:not(.forminator-checkbox-box) { background-color: var(--primary-color) !important; color: var(--white-color) !important; } .popup-form .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"] { border: 1px solid #ddd !important; } .popup-form .forminator-ui.forminator-custom-form[data-grid="open"] .forminator-row, .popup-form .forminator-ui.forminator-custom-form[data-grid="open"] .forminator-row-inside { margin-bottom: 0 !important; } .popup-form .forminator-label { display: block !important; margin: 24px 0 5px !important; font-size: 16px !important; font-weight: 500 !important; color: #212121 !important; } .popup-form input, .popup-form textarea { width: 100% !important; height: 48px !important; padding: 12px !important; border: 1px solid #B3BBBC !important; border-radius: 8px !important; font-size: 16px !important; } .popup-form textarea { height: 104px !important; resize: none !important; } .popup-form .select2-container--default .select2-selection--single { height: 48px !important; border-radius: 8px !important; border: 1px solid #B3BBBC !important; display: flex !important; align-items: center !important; padding: 0 15px !important; background: #fff !important; } .popup-form .select2-selection__rendered { color: #B3BBBC !important; font-size: 16px !important; padding-left: 0 !important; } .popup-form .select2-dropdown { border: 1px solid #B3BBBC !important; border-radius: 8px !important; overflow: hidden; } .popup-form .select2-results__option { padding: 10px 15px !important; font-size: 14px !important; color: var(--grey-color) !important; } .popup-form .select2-results__option--highlighted, .popup-form .select2-results__option--selected { background: var(--primary-color) !important; color: var(--white-color) !important; } .popup-form textarea { min-height: 104px !important; resize: none !important; } .popup-form .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"] { border-color: #b3bbbc !important; background-color: #ffffff !important; border-radius: 8px !important; height: 48px !important; padding: 12px 0px 12px 12px !important; } .forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--default{ padding: 0 !important; border: 1px solid #B3BBBC !important; border-radius: 8px !important; } .forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options{ border: none !important; border-radius: 8px !important; } .popup-form .forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options{ border-radius: 8px !important; } .popup-form .forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options>li:first-child{ border-radius: 8px 8px 0px 0px !important; } .popup-form .forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options>li:last-child{ border-radius: 0px 0px 8px 8px !important; } .forminator-ui#forminator-module-142.forminator-design--default .forminator-textarea:focus, .forminator-ui#forminator-module-142.forminator-design--default .forminator-input:focus, .forminator-ui#forminator-module-142.forminator-design--default .forminator-select:focus { outline: none !important; box-shadow: none !important; } .forminator-select .select2-selection__placeholder { color: #B3BBBC !important; } .forminator-select .select2-selection__rendered { color: #000 !important; } .forminator-response-message { margin-top: 20px !important; margin-bottom: 0px !important; } @media screen and (max-width:782px) { .popup-form .forminator-button-submit { width: max-content !important; } } @media screen and (max-width:767px) { .modal { padding: 40px 32px; } .popup__wrapper h2{margin-bottom: 4px; padding-right: 40px; line-height: 38px;} .popup__wrapper p.subtitle { margin-bottom: 35px; } .forminator-response-message { margin-top: -15px !important;} } /* Popup style end */ /* select work page style start */ .featured-projects.select__work { padding: 185px 20px 100px; } .featured-projects.select__work h1 { margin-bottom: 24px; font-size: 36px; line-height: 48px; font-weight: 600; color: var(--dark-green-color);} .featured-projects.select__work .proj-desc { color: rgba(3, 27, 31, 0.8); margin-bottom: 64px; } .filter-tabs { display: flex; gap: 10px 5px; list-style: none; padding: 0; margin: 0 0 100px; overflow-x: auto;} .filter-tabs li button { padding: 10px 18px; border-radius: 25px; border: none; background: #F3F3F4; color: var(--dark-green-color); font-size: 16px; line-height: 1.2; cursor: pointer; transition: all 0.3s ease; width: max-content; outline: none; } .filter-tabs li.active button { background: var(--primary-color); color: var(--white-color); } .filter-tabs li button:hover, .filter-tabs li button:focus { background: var(--primary-color); color: var(--white-color); } .featured-projects.select__work .project-row { gap: 48px 32px; } @media screen and (max-width:767px) { .featured-projects.select__work { padding: 105px 20px 40px; } .featured-projects.select__work .proj-desc { margin-bottom: 80px; } .filter-tabs { margin: 0 0 30px; padding-bottom: 10px;} } .work-section { margin-bottom: 70px; padding-top: 150px; background: #F3F3F4; overflow: hidden; } .work-header { margin-bottom: 74px; display: flex; justify-content: space-between; gap: 40px; max-width: 967px; } .work-left ul.breadcrumb { margin-bottom: 32px; display: flex; gap: 10px; } ul.breadcrumb li, ul.breadcrumb li>a { margin: 0px; font-size: 16px; line-height: 24px; color: var(--grey-color); display: flex; gap: 10px; list-style-type: none; text-decoration: none; } ul.breadcrumb li::after { content: "•"; color:#C0C6CD;} ul.breadcrumb li:last-child::after { content: ""; } ul.breadcrumb li>a { color: var(--primary-color); } ul.breadcrumb li>a:hover { color:var(--grey-color); } .work-left .title { font-size: 40px; line-height: 1.3; font-weight: 600; color: var(--dark-green-color); max-width: 500px; } .work-right { max-width: 275px; padding-top: 54px; width: 100%; } .meta { display: flex; gap: 66px; } .meta-item h4 { margin-bottom: 16px; font-size: 18px; color: var(--dark-green-color); } .meta-item p { margin: 0 0 12px; font-size: 18px; color: var(--grey-color); } .meta-item p:last-child { margin-bottom: 0; } .work-image { min-width: 100vw; padding-left: calc((100vw - 1000px) / 2); position: relative; left: 50%; transform: translateX(-50%); } .work-image img { width: 100%; border-top-left-radius: 64px; display: block; object-fit: cover; object-position: top; } @media (max-width: 1200px) { .work-image { min-width: calc(100vw - 20px); padding-left: 10px; } } @media (max-width: 767px) { .work-section { margin-bottom: 0px; padding-top: 117px; } .work-header { margin-bottom: 40px; flex-direction: column;} .work-right { padding-top: 0px;} .meta { gap: 62px; } .work-image { padding-left: 0px; width:100%; left: unset; transform: none; } .work-image img { height: 320px; } } /* Work details page style start */ .work_details { padding: 70px 20px; } .work_details .custom-row { gap: 40px; } .work_details .custom-col-6 { width: calc(50% - 20px); } .work_details p { font-size: 20px; line-height: 32px; color: var(--dark-green-color);} .work_details_boxes { padding: 70px 20px; } .work_details_boxes .custom-row { gap: 40px; } .work_details_boxes .custom-col-6 { width: calc(50% - 20px); } .work_details_boxes h2 { margin-bottom: 40px; font-weight: 600; } .work_details_boxes .box_details p { margin-bottom: 40px; font-size: 20px; line-height: 32px; color: var(--dark-green-color); font-weight:500; } .work_details_boxes .box_details p:last-child { margin-bottom: 0; } .box_details { background: #F3F3F4; padding: 40px; border-radius: 24px; min-height: 304px; } .box_details.highlight_box { background: var(--primary-color); } .box_details.highlight_box p { color: var(--white-color); } .full_width_video_section { padding: 70px 20px; } .full_width_video_section .container { max-width: 1312px;} .full_width_video_section .video_wrapper { border-radius: 24px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.15); } .video_wrapper>a { display: flex;} .video_wrapper img { width: 100%; height: auto; display: block; object-fit: cover; } .process_detais { padding: 70px 20px; } @media screen and (max-width:767px) { .work_details { padding-top: 64px; padding-bottom: 64px;} .work_details_boxes, .full_width_video_section { padding-top: 40px; padding-bottom: 40px;} .work_details .custom-row, .work_details_boxes .custom-row { flex-direction: column; } .work_details .custom-col-6, .work_details_boxes .custom-col-6 { width: 100%; gap: 0px; } .work_details_boxes h2 { margin-bottom: 24px; } .box_details { min-height: auto; } } /* Fancy box style */ .f-panzoom__viewport>.f-panzoom__content, video.f-html5video, .has-html5video .f-html, .has-youtube .f-html, .has-vimeo .f-html,.f-html { border-radius: 24px; } .has-html5video .f-html, .f-html5video { height: auto;} .fancybox__slide .f-caption { display: none; } .f-html5video { object-fit: cover; } .fancybox__container { --fancybox-backdrop-bg: rgba(1, 16, 19, 0.8); } .f-button { background: #000000; height: 48px; width: 48px; border-radius: 50%; overflow: hidden !important; } .f-button:hover, .f-button:focus { background: #053943 !important; } .is-horizontal .f-button.is-arrow.is-prev, .is-horizontal .f-button.is-arrow.is-next { background: rgba(255, 255, 255, 0.16); height: 32px; width: 32px; } .is-horizontal .f-button.is-arrow.is-prev svg, .is-horizontal .f-button.is-arrow.is-next svg { height: 15px; } .f-counter { display: none; } .f-carousel__toolbar.is-absolute { display: flex; } .f-carousel__toolbar__column.is-left, .f-carousel__toolbar__column.is-middle { display: none; } .f-carousel__toolbar__column.is-right { width: 100%; } .f-carousel__toolbar__column.is-right button.f-button { margin-right: 12px; } .f-carousel__toolbar__column.is-right button.f-button[title="Close"] { margin-left: auto; margin-right: 0px; } .fancybox__slide.is-selected { padding: 0px 15px; } button.f-button.is-close-button { top: -60px; } .f-progressbar { border-radius: 50% !important; overflow: hidden !important;} /* Work details page style END */ .process-section { padding-top: 70px; padding-bottom: 70px; } .process-left h2 { margin-bottom: 40px; font-weight: 600; } .process-left p { max-width: 360px; font-size: 18px; line-height: 32px; color: var(--dark-green-color); } .process-right { display: flex; flex-direction: column; gap: 46px; padding-left: 80px; } .process-item h4 { font-size: 20px; font-weight: 500; margin-bottom: 10px; color: var(--dark-green-color); } .process-item p { font-size: 18px; line-height: 32px; color: #656869; max-width: 480px; } /* RESPONSIVE */ @media (max-width: 767px) { .custom-col-5, .custom-col-7 { width: 100%; } .process-right { padding-left: 0; gap: 40px; } .process-left { margin-bottom: 64px; } .process-left p, .process-item p { max-width: 100%; } .process-section { padding-top: 40px; padding-bottom: 40px;} .process-left h2{margin-bottom: 24px;} } @media (max-width:550px){ .is-horizontal .f-button.is-arrow.is-prev, .is-horizontal .f-button.is-arrow.is-next{ background:rgb(0 0 0 / 30%); } } /**********************/ /* style 1 code added About Page style */ /**********************/ .about-hero_block { background: var(--light-sky-color); padding-top: 204px; padding-bottom: 135px; } .about-hero_block .custom-row { align-items: center; } .about-hero_block .text-part { padding-right: 85px; } .about-hero_block h6 { margin-bottom: 40px; } .about-hero_block h1 { font-size: 40px; line-height: 1.3; font-weight: 600; } .about-hero_block .about-img { max-width: 100%; width: 100%; } .section-padding { padding: 120px 20px; } .text_block .custom-col-6:first-child { padding-right: 83px; } .text_block .custom-col-6:last-child { padding-left: 24px; } .text_block .custom-col-6 p { font-size: 20px; line-height: 32px; } blockquote { font-size: 36px; line-height: 48px; color: var(--primary-color); font-style: italic; padding-left: 24px; position: relative; font-weight: 500; margin-top: 100px; } blockquote:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; height: 100%; width: 4px; background: var(--red-color); } .text_block .center-block { max-width: 828px; margin: 0 auto; } .list_block .list { display: flex; gap: 64px; flex-direction: column; list-style: none; } .list_block .list .two_part { display: flex; gap: 32px; } .list_block .list .two_part h4 { margin-bottom: 10px; } .list_block .list .two_part .left_part { width: 321px; } .list_block .list .two_part .right_part { width: calc(100% - (32px / 2) - 321px); } .list_block .list .two_part .right_part .btn{ margin-top: 12px; } .list_block .list .designation-and-year { display: flex; flex-direction: row; list-style: none; } .list_block .list .designation-and-year li { line-height: 24px; color: var(--grey-color); position: relative; } .list_block .list .designation-and-year li:not(:first-child) { margin-left: 8px; padding-left: 11px; } .list_block .list .designation-and-year li:not(:first-child):before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 3px; height: 3px; border-radius: 3px; background: #C0C6CD; } .list_block .list .designation-and-year li a { text-decoration: none; color: var(--red-color); font-size: 16px; line-height: 24px; font-weight: 400; pointer-events: none;} .list_block .list .designation-and-year li a:hover { color: var(--dark-green-color); } hr { margin-top: 111px; margin-bottom: 120px; background-color: rgba(3, 27, 31, 0.3); border: none; height: 1px; } .education-block { background: var(--extra-light-gray-color); } .education-block hr { display: none;} .testimonial-block, .with-light-bg { background: var(--extra-light-pink-color); } .testimonial-block h2 { margin-bottom: 0; font-weight: 600; } .with-light-bg .what-card .blob-pattern svg, .with-light-bg .what-card .blob-pattern svg path { fill: #fff; transition: fill 0.3s ease; } .with-light-bg .what-card:hover .blob-pattern svg, .with-light-bg .what-card:hover .blob-pattern svg path { fill: var(--primary-color); transition: fill 0.3s ease; } .what-we-do.with-light-bg { padding-top: 90px; padding-bottom: 120px;} .block-testi__slider-main { overflow: hidden; margin-top: 65px; } .block-testi__slider .block-testi__card { background: #fff; border-radius: 20px; padding: 40px; display: flex; gap: 32px; flex-direction: column; margin: 0 16px; } .block-testi__slider .slick-list { overflow: visible; } .block-testi__slider .block-testi__text { color: var(--primary-color); font-size: 24px; font-weight: 500; line-height: 40px; font-style: italic; } .block-testi__slider .testi-user { color: var(--dark-green-color); font-size: 18px; font-weight: 600; line-height: 24px; } .block-testi__slider .testi-user .testi-user-degi { margin-top:4px; color: var(--grey-color); font-size: 14px; font-weight: 400; line-height: 20px; display: block; } .custom-slider-button { display: flex; gap: 16px; justify-content: end; align-items: flex-end; } .custom-slider-button .slick-arrow { border: none; background: #fff; margin: 0; height: 42px; width: 42px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: .35s all ease-in-out; } .custom-slider-button .slick-arrow:hover, .custom-slider-button .slick-arrow:focus { background: var(--primary-color); outline: none; border: 0px; } .custom-slider-button .slick-arrow:hover img, .custom-slider-button .slick-arrow:focus img { filter: brightness(0) invert(1);} .list_block .section-title { margin-bottom: 70px; } .testimonial-block { padding-left: 0; padding-right: 0; } @media (max-width: 1200px) { .block-testi__slider-main { padding-left: 85px !important; padding-right: 85px !important; } .testimonial-block .custom-row { padding-left: 20px; padding-right: 20px; } } @media (max-width: 991px) { .about-hero_block .custom-row { gap: 50px; } .about-hero_block { padding-top: 112.19px; padding-bottom: 85px; } .about-hero_block .custom-col-6 { width: 100%; } .about-hero_block .about-img { width: auto; margin: 0 auto; display: block; } .section-padding { padding-top: 85px; padding-bottom: 85px; } blockquote { margin-top: 50px; } hr { margin-top: 85px; margin-bottom: 85px; } .list_block .list { gap: 46px; } .list_block .title-part { padding-bottom: 40px; } .text_block .custom-col-6:first-child { padding-right: 25px; } .testimonial-block .custom-col-5 { width: 220px; } .testimonial-block .custom-col-7 { width: calc(100% - 220px); } } @media (max-width: 767px) { .list_block .list .two_part .left_part { width: 260px; } .list_block .list .two_part .right_part { width: calc(100% - (16px/2) - 260px); } .text_block .custom-col-6:first-child { padding-right: 0; } .text_block .custom-col-6:last-child { padding-left: 0; padding-top: 40px; } blockquote { font-size: 34px; } .testimonial-block .custom-col-5 { width: 100%; margin-top: 40px; justify-content: flex-start; } .testimonial-block .custom-col-7 { width: 100%; } .block-testi__slider-main { margin-top: 40px; } .what-we-do.with-light-bg { padding-top: 64px; padding-bottom: 64px; } .what-we-do h6 { margin-bottom: 24px; } .list_block .section-title { margin: 24px 0px 0px; } } @media (max-width: 575px) { .list_block .list .two_part { flex-wrap: wrap;} .list_block .list .two_part .left_part { width: 100%;} .list_block .list .two_part .right_part {width: 100%;} .list_block .list .two_part { gap: 16px; } hr { margin-top: 64px; margin-bottom: 64px;} .list_block .list { gap: 40px; } .section-padding { padding-top: 64px; padding-bottom: 64px; } .about-hero_block { padding-bottom: 40px; } .about-hero_block .custom-row { gap: 40px; } .about-hero_block .text-part { padding-right: 0; } blockquote { font-size: 32px; } .block-testi__slider .block-testi__card { margin: 0 8px; } .block-testi__slider-main { padding-left: 45px !important; padding-right: 45px !important; } .block-testi__slider .block-testi__text { font-size: 20px; line-height: 32px; } .block-testi__slider .block-testi__card {padding: 32px; } } /* 404 PAGE */ .error404 .custom-404 { padding: 150px 20px 100px; text-align: center; min-height: calc(100vh - 634px);} .error404 .error-wrapper { max-width: 700px; margin: 0 auto; } .error404 .error-code { font-size: 140px; font-weight: 600; line-height: 1; color: var(--primary-color); } .error404 .error-title { margin-top: 20px; font-size: 36px; } .error404 .error-desc { margin-top: 15px; font-size: 16px; color: var(--primary-color); opacity: 0.7; } .error404 .error-actions { margin-top: 30px; display: flex; justify-content: center; gap: 15px; } @media (max-width:768px) { .error404 .error-code { font-size: 90px; } .error404 .error-actions { flex-direction: column; } .error-actions .btn-secondary { align-items: center; justify-content: center; width: max-content; margin: 0 auto; } } .process_video { padding-top: 70px; padding-bottom: 70px; } .video_wrapper.pattern_video { padding: 63px 78px; background: #AC1798; border-radius: 24px; } .video_wrapper.pattern_video img { border-radius: 12px; width: 100%; height: auto; display: block; } @media (max-width: 767px) { .process_video { padding-top: 40px; padding-bottom: 40px; } .video_wrapper.pattern_video { padding: 22px 27px; } } .outcome_section { padding-top: 70px; padding-bottom: 70px; } .outcome_section .outcome_details { max-width: 656px; margin: 0 auto; } .outcome_details h2 { margin-bottom: 36px; font-weight:600; } .outcome_details p { margin-bottom: 27px; font-size: 18px; line-height: 32px; color: var(--dark-green-color); } .outcome_details p:last-child { margin-bottom: 0px; } @media (max-width: 767px) { .outcome_section { padding-top: 40px; padding-bottom: 40px; } .outcome_details h2 { margin-bottom: 40px; } } /* Work details */ .gallery-block { padding-left: 0; padding-right: 0; padding-top: 70px; padding-bottom: 70px; } .gallery-block-inner { overflow: hidden; width: 100%; } .gallery-slider { overflow: hidden; } .gallery-slider .slick-list { overflow: visible; } .gallery-slider .gallery-slider-item { margin: 0 32px 0 0; } .gallery-slider .imgage-box { border-radius: 24px; overflow: hidden; } .gallery-slider .imgage-box .gallery-img { aspect-ratio: 2 / 1.56; object-fit: cover; object-position: center; width: 100%; height: auto !important; } .gallery-slider .imgage-box a[data-fancybox="gallery"] { position: relative; display:flex; } .gallery-slider .imgage-box .video-icon { position: absolute; z-index: 9; top: 50%; left: 50%; transform:translate(-50%, -50%); } .gallery-slider-button { display: flex;justify-content: center; margin: 40px auto 0; align-items: center; width: 144px; background: var(--primary-color); border-radius: 88px; overflow: hidden; } .gallery-slider-button button { border: none; background: transparent; width: 50%; height: 52px; cursor: pointer; position: relative; transition: 0.35s all ease-in-out; } .gallery-slider-button button img { width: 24px; filter: brightness(0) saturate(100%) invert(100%) sepia(3%) saturate(0%) hue-rotate(154deg) brightness(102%) contrast(105%); } .gallery-slider-button button:hover { background: rgba(255, 255, 255, 0.18); } .gallery-slider-button button.prev:before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; height: 12px; background: rgba(255, 255, 255, 0.18); margin: auto; } @media (max-width: 767px) { .gallery-slider .gallery-slider-item { margin: 0 16px 0 0; } .gallery-block { padding-top: 40px; padding-bottom: 40px; } .gallery-slider .imgage-box .video-icon { width:60px;} } /* .social_media_sec style start */ .social_media_sec { padding-top: 70px; padding-bottom: 140px; } .social_media_links { display: flex; justify-content: center; align-items: center; gap: 12px; } .social_media_links>a { display: flex; justify-content: center; align-items: center; background: #F5F5F5; border-radius: 50%; height: 48px; width: 48px; position: relative; } a.native-share { background-image: url("data:image/svg+xml,%3Csvg width='16' height='19' viewBox='0 0 16 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.66667 1V11.8333M7.66667 1L11 4.33333M7.66667 1L4.33333 4.33333M1 9.33333V16C1 16.442 1.17559 16.8659 1.48816 17.1785C1.80072 17.4911 2.22464 17.6667 2.66667 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V9.33333' stroke='%23424242' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat !important; background-size: 18px 20px !important; background-position: center !important; } .social_media_links>a.native-share:hover, .social_media_links>a.native-share:focus { background-image: url("data:image/svg+xml,%3Csvg width='16' height='19' viewBox='0 0 16 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.66667 1V11.8333M7.66667 1L11 4.33333M7.66667 1L4.33333 4.33333M1 9.33333V16C1 16.442 1.17559 16.8659 1.48816 17.1785C1.80072 17.4911 2.22464 17.6667 2.66667 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V9.33333' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat !important; background-size: 18px 20px !important; background-position: center !important; } .social_media_links>a>img { width: 24px; height: 24px; } .social_media_links a:hover, .social_media_links a:focus { background: var(--primary-color); } .social_media_links a:hover img, .social_media_links a:focus img { filter: brightness(0) invert(1); } .copy-toast { position: absolute; inset: auto auto -28px -2px; font-size: 10px; padding: 3px 8px; background-color: var(--primary-color); color: var(--white-color); font-weight: bold; border-radius: 50px; opacity: 0; visibility: hidden; cursor: none; transition: all 0.3s; display: none; } .copy-toast::before { content: ""; position: absolute; inset: -3px 0 auto 0; width: 6px; height: 6px; background-color: var(--primary-color); margin: 0 auto; transform: rotate(45deg); } .copy-link.show .copy-toast { opacity: 1; visibility: visible; display: block; } .social_media_links a.show { background: var(--primary-color); } .social_media_links a.show img { filter: brightness(0) invert(1); } @media (min-width: 768px){ .social_media_links>a.native-share { display: none !important; } } @media (max-width: 767px) { .social_media_sec { padding-top: 24px; padding-bottom: 64px; } .social-icon-desktop { display: none !important; } } /* .social_media_sec style End */ /* RESPONSIVE */ /* Tablet */ @media (max-width: 767px) { .desktop_display { display: none !important; } .mobile_display { display: flex !important; } } @media (max-width: 767px) { .custom-col-md-12 { width: 100%; } .custom-col-md-6 { width: 50%; } } /* Mobile */ @media (max-width: 767px) { [class*="custom-col-"] { width: 100%; } }