:root { scroll-behavior: inherit; --urbanist: "Urbanist", sans-serif; --inter: "Inter", sans-serif; --egx-pr-1: rgb(124, 187, 59); --egx-pr-2: #b9d32a; --egx-gd-1: -webkit-linear-gradient( -180deg, rgb(214, 223, 34) 0%, rgb(124, 187, 59) 30%, rgb(33, 151, 83) 100% ); --egx-gd-2: -webkit-linear-gradient(0deg, #209753 0%, #b9d32a 100%); --egx-heading-1: rgb(29, 30, 30); --egx-para-1: #4f4e4e; --cube-1: cubic-bezier(0.25, 0.46, 0.45, 0.5); --cube-2: cubic-bezier(0.31, -0.105, 0.43, 1.4); } body { font-family: var(--urbanist); font-size: 18px; font-weight: 400; line-height: 30px; color: var(--egx-para-1); overflow-x: hidden; } .img, img { max-width: 100%; } a:focus, .button:focus { text-decoration: none; outline: none; } a, span { color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit; text-transform: inherit; text-decoration: none; transition: inherit; } button { border: none; outline: none; } a:focus, a:hover { color: inherit; text-decoration: none; } h1 { font-size: 55px; } h2 { font-size: 55px; } h3 { font-size: 42px; } h4 { font-size: 27px; } h5 { font-size: 20px; } h6 { font-size: 16px; } ul { margin: 0; padding: 0; list-style: none; } ::-moz-selection { background-color: #3065d0; color: #fff; text-shadow: none; } ::-moz-selection { background-color: #3065d0; color: #fff; text-shadow: none; } ::selection { background-color: #3065d0; color: #fff; text-shadow: none; } input::placeholder, textarea::placeholder { font-size: inherit; font-weight: inherit; color: inherit; font-family: inherit; } input:focus::placeholder, textarea:focus::placeholder { opacity: 0; } ::-webkit-scrollbar { width: 10px; background-color: transparent; box-shadow: none; border: none; } ::-webkit-scrollbar-track { background: #ececec; box-shadow: none; border: none; } ::-webkit-scrollbar-thumb { background: var(--egx-gd-1); border-radius: 30px; } .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-85 { margin-top: 85px; } .mt-90 { margin-top: 90px; } .mt-95 { margin-top: 95px; } .mt-100 { margin-top: 100px; } .mt-105 { margin-top: 105px; } .mt-110 { margin-top: 110px; } .mt-115 { margin-top: 115px; } .mt-120 { margin-top: 120px; } .mt-125 { margin-top: 125px; } .mt-130 { margin-top: 130px; } .mt-135 { margin-top: 135px; } .mt-140 { margin-top: 140px; } .mt-145 { margin-top: 145px; } .mt-150 { margin-top: 150px; } .mt-155 { margin-top: 155px; } .mt-160 { margin-top: 160px; } .mt-165 { margin-top: 165px; } .mt-170 { margin-top: 170px; } .mt-175 { margin-top: 175px; } .mt-180 { margin-top: 180px; } .mt-185 { margin-top: 185px; } .mt-190 { margin-top: 190px; } .mt-195 { margin-top: 195px; } .mt-200 { margin-top: 200px; } .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-85 { margin-bottom: 85px; } .mb-90 { margin-bottom: 90px; } .mb-95 { margin-bottom: 95px; } .mb-100 { margin-bottom: 100px; } .mb-105 { margin-bottom: 105px; } .mb-110 { margin-bottom: 110px; } .mb-115 { margin-bottom: 115px; } .mb-120 { margin-bottom: 120px; } .mb-125 { margin-bottom: 125px; } .mb-130 { margin-bottom: 130px; } .mb-135 { margin-bottom: 135px; } .mb-140 { margin-bottom: 140px; } .mb-145 { margin-bottom: 145px; } .mb-150 { margin-bottom: 150px; } .mb-155 { margin-bottom: 155px; } .mb-160 { margin-bottom: 160px; } .mb-165 { margin-bottom: 165px; } .mb-170 { margin-bottom: 170px; } .mb-175 { margin-bottom: 175px; } .mb-180 { margin-bottom: 180px; } .mb-185 { margin-bottom: 185px; } .mb-190 { margin-bottom: 190px; } .mb-195 { margin-bottom: 195px; } .mb-200 { margin-bottom: 200px; } .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; } .ml-35 { margin-left: 35px; } .ml-40 { margin-left: 40px; } .ml-45 { margin-left: 45px; } .ml-50 { margin-left: 50px; } .ml-55 { margin-left: 55px; } .ml-60 { margin-left: 60px; } .ml-65 { margin-left: 65px; } .ml-70 { margin-left: 70px; } .ml-75 { margin-left: 75px; } .ml-80 { margin-left: 80px; } .ml-85 { margin-left: 85px; } .ml-90 { margin-left: 90px; } .ml-95 { margin-left: 95px; } .ml-100 { margin-left: 100px; } .ml-105 { margin-left: 105px; } .ml-110 { margin-left: 110px; } .ml-115 { margin-left: 115px; } .ml-120 { margin-left: 120px; } .ml-125 { margin-left: 125px; } .ml-130 { margin-left: 130px; } .ml-135 { margin-left: 135px; } .ml-140 { margin-left: 140px; } .ml-145 { margin-left: 145px; } .ml-150 { margin-left: 150px; } .ml-155 { margin-left: 155px; } .ml-160 { margin-left: 160px; } .ml-165 { margin-left: 165px; } .ml-170 { margin-left: 170px; } .ml-175 { margin-left: 175px; } .ml-180 { margin-left: 180px; } .ml-185 { margin-left: 185px; } .ml-190 { margin-left: 190px; } .ml-195 { margin-left: 195px; } .ml-200 { margin-left: 200px; } .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; } .mr-30 { margin-right: 30px; } .mr-35 { margin-right: 35px; } .mr-40 { margin-right: 40px; } .mr-45 { margin-right: 45px; } .mr-50 { margin-right: 50px; } .mr-55 { margin-right: 55px; } .mr-60 { margin-right: 60px; } .mr-65 { margin-right: 65px; } .mr-70 { margin-right: 70px; } .mr-75 { margin-right: 75px; } .mr-80 { margin-right: 80px; } .mr-85 { margin-right: 85px; } .mr-90 { margin-right: 90px; } .mr-95 { margin-right: 95px; } .mr-100 { margin-right: 100px; } .mr-105 { margin-right: 105px; } .mr-110 { margin-right: 110px; } .mr-115 { margin-right: 115px; } .mr-120 { margin-right: 120px; } .mr-125 { margin-right: 125px; } .mr-130 { margin-right: 130px; } .mr-135 { margin-right: 135px; } .mr-140 { margin-right: 140px; } .mr-145 { margin-right: 145px; } .mr-150 { margin-right: 150px; } .mr-155 { margin-right: 155px; } .mr-160 { margin-right: 160px; } .mr-165 { margin-right: 165px; } .mr-170 { margin-right: 170px; } .mr-175 { margin-right: 175px; } .mr-180 { margin-right: 180px; } .mr-185 { margin-right: 185px; } .mr-190 { margin-right: 190px; } .mr-195 { margin-right: 195px; } .mr-200 { margin-right: 200px; } .pt-5 { padding-top: 5px; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pt-25 { padding-top: 25px; } .pt-30 { padding-top: 30px; } .pt-35 { padding-top: 35px; } .pt-40 { padding-top: 40px; } .pt-45 { padding-top: 45px; } .pt-50 { padding-top: 50px; } .pt-55 { padding-top: 55px; } .pt-60 { padding-top: 60px; } .pt-65 { padding-top: 65px; } .pt-70 { padding-top: 70px; } .pt-75 { padding-top: 75px; } .pt-80 { padding-top: 80px; } .pt-85 { padding-top: 85px; } .pt-90 { padding-top: 90px; } .pt-95 { padding-top: 95px; } .pt-100 { padding-top: 100px; } .pt-105 { padding-top: 105px; } .pt-110 { padding-top: 110px; } .pt-115 { padding-top: 115px; } .pt-120 { padding-top: 120px; } .pt-125 { padding-top: 125px; } .pt-130 { padding-top: 130px; } .pt-135 { padding-top: 135px; } .pt-140 { padding-top: 140px; } .pt-145 { padding-top: 145px; } .pt-150 { padding-top: 150px; } .pt-155 { padding-top: 155px; } .pt-160 { padding-top: 160px; } .pt-165 { padding-top: 165px; } .pt-170 { padding-top: 170px; } .pt-175 { padding-top: 175px; } .pt-180 { padding-top: 180px; } .pt-185 { padding-top: 185px; } .pt-190 { padding-top: 190px; } .pt-195 { padding-top: 195px; } .pt-200 { padding-top: 200px; } .pb-5 { padding-bottom: 5px; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pb-25 { padding-bottom: 25px; } .pb-30 { padding-bottom: 30px; } .pb-35 { padding-bottom: 35px; } .pb-40 { padding-bottom: 40px; } .pb-45 { padding-bottom: 45px; } .pb-50 { padding-bottom: 50px; } .pb-55 { padding-bottom: 55px; } .pb-60 { padding-bottom: 60px; } .pb-65 { padding-bottom: 65px; } .pb-70 { padding-bottom: 70px; } .pb-75 { padding-bottom: 75px; } .pb-80 { padding-bottom: 80px; } .pb-85 { padding-bottom: 85px; } .pb-90 { padding-bottom: 90px; } .pb-95 { padding-bottom: 95px; } .pb-100 { padding-bottom: 100px; } .pb-105 { padding-bottom: 105px; } .pb-110 { padding-bottom: 110px; } .pb-115 { padding-bottom: 115px; } .pb-120 { padding-bottom: 120px; } .pb-125 { padding-bottom: 125px; } .pb-130 { padding-bottom: 130px; } .pb-135 { padding-bottom: 135px; } .pb-140 { padding-bottom: 140px; } .pb-145 { padding-bottom: 145px; } .pb-150 { padding-bottom: 150px; } .pb-155 { padding-bottom: 155px; } .pb-160 { padding-bottom: 160px; } .pb-165 { padding-bottom: 165px; } .pb-170 { padding-bottom: 170px; } .pb-175 { padding-bottom: 175px; } .pb-180 { padding-bottom: 180px; } .pb-185 { padding-bottom: 185px; } .pb-190 { padding-bottom: 190px; } .pb-195 { padding-bottom: 195px; } .pb-200 { padding-bottom: 200px; } .pb-205 { padding-bottom: 205px; } .pb-210 { padding-bottom: 210px; } .pb-215 { padding-bottom: 215px; } .pb-220 { padding-bottom: 220px; } .pb-225 { padding-bottom: 225px; } .pb-230 { padding-bottom: 230px; } .pb-235 { padding-bottom: 235px; } .pb-240 { padding-bottom: 240px; } .pb-245 { padding-bottom: 245px; } .pb-250 { padding-bottom: 250px; } .pb-255 { padding-bottom: 255px; } .pb-260 { padding-bottom: 260px; } .pb-265 { padding-bottom: 265px; } .pb-270 { padding-bottom: 270px; } .pb-275 { padding-bottom: 275px; } .pb-280 { padding-bottom: 280px; } .pb-285 { padding-bottom: 285px; } .pb-290 { padding-bottom: 290px; } .pb-295 { padding-bottom: 295px; } .pb-300 { padding-bottom: 300px; } .pl-5 { padding-left: 5px; } .pl-10 { padding-left: 10px; } .pl-15 { padding-left: 15px; } .pl-20 { padding-left: 20px; } .pl-25 { padding-left: 25px; } .pl-30 { padding-left: 30px; } .pl-35 { padding-left: 35px; } .pl-40 { padding-left: 40px; } .pl-45 { padding-left: 45px; } .pl-50 { padding-left: 50px; } .pl-55 { padding-left: 55px; } .pl-60 { padding-left: 60px; } .pl-65 { padding-left: 65px; } .pl-70 { padding-left: 70px; } .pl-75 { padding-left: 75px; } .pl-80 { padding-left: 80px; } .pl-85 { padding-left: 85px; } .pl-90 { padding-left: 90px; } .pl-95 { padding-left: 95px; } .pl-100 { padding-left: 100px; } .pl-105 { padding-left: 105px; } .pl-110 { padding-left: 110px; } .pl-115 { padding-left: 115px; } .pl-120 { padding-left: 120px; } .pl-125 { padding-left: 125px; } .pl-130 { padding-left: 130px; } .pl-135 { padding-left: 135px; } .pl-140 { padding-left: 140px; } .pl-145 { padding-left: 145px; } .pl-150 { padding-left: 150px; } .pl-155 { padding-left: 155px; } .pl-160 { padding-left: 160px; } .pl-165 { padding-left: 165px; } .pl-170 { padding-left: 170px; } .pl-175 { padding-left: 175px; } .pl-180 { padding-left: 180px; } .pl-185 { padding-left: 185px; } .pl-190 { padding-left: 190px; } .pl-195 { padding-left: 195px; } .pl-200 { padding-left: 200px; } .pr-5 { padding-right: 5px; } .pr-10 { padding-right: 10px; } .pr-15 { padding-right: 15px; } .pr-20 { padding-right: 20px; } .pr-25 { padding-right: 25px; } .pr-30 { padding-right: 30px; } .pr-35 { padding-right: 35px; } .pr-40 { padding-right: 40px; } .pr-45 { padding-right: 45px; } .pr-50 { padding-right: 50px; } .pr-55 { padding-right: 55px; } .pr-60 { padding-right: 60px; } .pr-65 { padding-right: 65px; } .pr-70 { padding-right: 70px; } .pr-75 { padding-right: 75px; } .pr-80 { padding-right: 80px; } .pr-85 { padding-right: 85px; } .pr-90 { padding-right: 90px; } .pr-95 { padding-right: 95px; } .pr-100 { padding-right: 100px; } .pr-105 { padding-right: 105px; } .pr-110 { padding-right: 110px; } .pr-115 { padding-right: 115px; } .pr-120 { padding-right: 120px; } .pr-125 { padding-right: 125px; } .pr-130 { padding-right: 130px; } .pr-135 { padding-right: 135px; } .pr-140 { padding-right: 140px; } .pr-145 { padding-right: 145px; } .pr-150 { padding-right: 150px; } .pr-155 { padding-right: 155px; } .pr-160 { padding-right: 160px; } .pr-165 { padding-right: 165px; } .pr-170 { padding-right: 170px; } .pr-175 { padding-right: 175px; } .pr-180 { padding-right: 180px; } .pr-185 { padding-right: 185px; } .pr-190 { padding-right: 190px; } .pr-195 { padding-right: 195px; } .pr-200 { padding-right: 200px; } @media (min-width: 1300px) { .container.egx-container-1 { max-width: 1304px; } .container.egx-header-1-container { max-width: 1540px; } .container.egx-header-2-container { max-width: 1624px; } .container.egx-header-3-container { max-width: 1790px; } .container.egx-container-2 { max-width: 1300px; } .container.egx-container-3 { max-width: 1494px; } .container.egx-header-4-container { max-width: 1900px; } .container.egx-container-5 { max-width: 1394px; } .container.egx-container-6 { max-width: 1688px; } } .fix, .eergx-ovh .body-bg-1 { overflow: hidden; } .img-cover img { width: 100%; height: 100% !important; object-fit: cover; } .bg-default { background-size: cover; background-position: center center; background-repeat: no-repeat; } .egx-split-text { text-transform: unset !important; letter-spacing: -1.2px; perspective: 2000px; transform-style: preserve-3d; } .egx-split-text .split-line div div:nth-child(1) { text-transform: capitalize; } .egx-split-text-2 { text-transform: unset !important; letter-spacing: -1.2px; perspective: 2000px; transform-style: preserve-3d; } .egx-split-text-2 .split-line div div:nth-child(1) { text-transform: capitalize; } .egx-split-text-large { letter-spacing: -1.2px; perspective: 2000px; transform-style: preserve-3d; } .egx-split-text-large .split-line div div:nth-child(1) { text-transform: capitalize; } .egx-heading-1 { font-family: var(--urbanist); line-height: 1.2; font-weight: 700; color: var(--egx-heading-1); text-transform: capitalize; margin-bottom: 0; } .egx-heading-1:is(.has-color-white) { color: #fff; } .egx-subtitle-1 { display: inline-flex; align-items: baseline; font-size: 16px; font-family: var(--urbanist); font-weight: 700; text-transform: uppercase; line-height: 1.875; gap: 8px; margin-bottom: 10px; } .egx-subtitle-1 img { transform: translateY(6px); } .egx-subtitle-1 .gradient { background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .egx-subtitle-1 .white-color { color: #fff; } .egx-subtitle-2 { font-family: var(--urbanist); font-weight: 700; font-size: 16px; line-height: 30px; text-transform: uppercase; background: var(--egx-gd-2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .egx-subtitle-2 .bubble-left, .egx-subtitle-2 .bubble-right { display: flex; align-items: center; gap: 4px; } .egx-subtitle-2 .bubble-left .bubble-1, .egx-subtitle-2 .bubble-right .bubble-1 { display: inline-flex; width: 8px; height: 8px; border-radius: 50%; background: var(--egx-gd-2); } .egx-subtitle-2 .bubble-left .bubble-2, .egx-subtitle-2 .bubble-right .bubble-2 { display: inline-flex; width: 6px; height: 6px; border-radius: 50%; background: var(--egx-gd-2); } .egx-subtitle-2 .bubble-left .bubble-3, .egx-subtitle-2 .bubble-right .bubble-3 { display: inline-flex; width: 4px; height: 4px; border-radius: 50%; background: var(--egx-gd-2); } .egx-subtitle-2 .bubble-left .bubble-4, .egx-subtitle-2 .bubble-right .bubble-4 { display: inline-flex; width: 2px; height: 2px; border-radius: 50%; background: var(--egx-gd-2); } .egx-subtitle-2 .bubble-right { flex-direction: row-reverse; } .egx-subtitle-2 .bubble-left .bubble-1, .egx-subtitle-2 .bubble-left .bubble-2, .egx-subtitle-2 .bubble-left .bubble-3, .egx-subtitle-2 .bubble-left .bubble-4 { transform: translateX(10px) scale(0); transition: all 0.8s ease; } .egx-subtitle-2 .bubble-right .bubble-1, .egx-subtitle-2 .bubble-right .bubble-2, .egx-subtitle-2 .bubble-right .bubble-3, .egx-subtitle-2 .bubble-right .bubble-4 { transform: translateX(-10px) scale(0); transition: all 0.8s ease; } .egx-subtitle-2:is(.active) .bubble-left .bubble-1, .egx-subtitle-2:is(.active) .bubble-left .bubble-2, .egx-subtitle-2:is(.active) .bubble-left .bubble-3, .egx-subtitle-2:is(.active) .bubble-left .bubble-4 { transform: translateX(0) scale(1); } .egx-subtitle-2:is(.active) .bubble-right .bubble-1, .egx-subtitle-2:is(.active) .bubble-right .bubble-2, .egx-subtitle-2:is(.active) .bubble-right .bubble-3, .egx-subtitle-2:is(.active) .bubble-right .bubble-4 { transform: translateX(0) scale(1); } .egx-para-1 { font-size: 18px; font-family: "Urbanist"; font-weight: 500; color: var(--egx-heading-1); line-height: 30px; margin-bottom: 0; } .egx-section-title-1 { font-family: var(--urbanist); font-size: 60px; font-weight: 900; line-height: 65px; color: rgb(0, 0, 0); text-transform: capitalize; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-section-title-1 { font-size: 50px; line-height: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-section-title-1 { font-size: 45px; line-height: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-section-title-1 { font-size: 40px; line-height: 50px; } } @media (max-width: 575px) { .egx-section-title-1 { font-size: 30px; line-height: 38px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-section-title-1 { font-size: 35px; line-height: 42px; } } .egx-section-title-1:is(.has-color-white) { color: #fff; } .egx-section-title-2 { font-family: var(--urbanist); font-size: 56px; font-weight: 800; line-height: 60px; color: #0d0d0d; text-transform: capitalize; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-section-title-2 { font-size: 50px; line-height: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-section-title-2 { font-size: 45px; line-height: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-section-title-2 { font-size: 40px; line-height: 50px; } } @media (max-width: 575px) { .egx-section-title-2 { font-size: 30px; line-height: 38px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-section-title-2 { font-size: 35px; line-height: 42px; } } .egx-section-title-2:is(.has-color-white) { color: #fff; } .egx-section-title-2 .full-stop { color: var(--egx-pr-2); } .egx-section-title-3 { font-family: var(--urbanist); font-size: 60px; font-weight: 800; line-height: 68px; color: #0d0d0d; text-transform: capitalize; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-section-title-3 { font-size: 50px; line-height: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-section-title-3 { font-size: 45px; line-height: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-section-title-3 { font-size: 40px; line-height: 50px; } } @media (max-width: 575px) { .egx-section-title-3 { font-size: 30px; line-height: 38px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-section-title-3 { font-size: 35px; line-height: 42px; } } .egx-section-title-3:is(.has-color-white) { color: #fff; } .egx-section-title-3 .full-stop { color: var(--egx-pr-2); } .egx-btn-1 { display: inline-block; font-size: 16px; font-family: var(--urbanist); color: #fff; font-weight: 700; line-height: 1; text-transform: capitalize; background: var(--egx-gd-1); border-radius: 50px; padding: 20.5px 30px; position: relative; z-index: 1; transition: 0.3s var(--cube-1); overflow: hidden; transition-delay: 0s; } .egx-btn-1 .btn-text { display: inline-block; position: relative; z-index: 1; margin-bottom: -3px; text-align: center; } .egx-btn-1 .btn-text::after { top: 0; left: 0; opacity: 0; width: 100%; display: block; transition: 0.5s; position: absolute; background: transparent; color: #fff; content: attr(data-back); transform: translateY(240%); } .egx-btn-1 .btn-text::before { top: 0; left: 0; opacity: 1; display: block; transition: 0.5s; position: relative; background: var(--blta-pr-1); color: #fff; content: attr(data-front); transform: translateY(0); } .egx-btn-1::after { content: ""; width: 100%; height: 100%; background: #000; position: absolute; top: 100%; left: 0; border-radius: 100%; z-index: -1; transition: 0.5s ease-in-out; } .egx-btn-1:is(.blog-btn) { display: flex; justify-content: space-between; padding: 17px 30px; font-size: 15px; text-transform: uppercase; } .egx-btn-1:is(.blog-btn) .btn-text { margin-bottom: 0; transform: translateY(1px); } .egx-btn-1:is(.footer-submit-btn) { display: flex; justify-content: center; gap: 10px; padding: 16.5px 20px; } .egx-btn-1:is(.footer-submit-btn) .btn-text { font-size: 17px; font-weight: 900; } .egx-btn-1:is(.footer-submit-btn) .btn-icon { font-size: 17px; } .egx-btn-1:hover { transition-delay: 0.3s; } .egx-btn-1:hover::after { top: 0%; border-radius: 0%; } .egx-btn-1:hover .btn-text::after { opacity: 1; transform: translateY(0%); } .egx-btn-1:hover .btn-text::before { opacity: 0; transform: translateY(-240%); } .egx-btn-2 { position: relative; border-radius: 100px; padding: 17px 35px; display: inline-flex; gap: 21px; align-items: center; overflow: hidden; background: var(--egx-gd-1); } .egx-btn-2::after { content: ""; position: absolute; background: #fff; left: 0; top: 0; width: 0%; height: 100%; border-radius: 100px; transition: all 0.4s ease; } .egx-btn-2 .btn-text { font-size: 16px; font-family: var(--urbanist); color: #fff; font-weight: 700; line-height: 1; text-align: center; text-transform: capitalize; position: relative; z-index: 2; transition: all 0.4s ease; } .egx-btn-2 .btn-icon { color: #fff; font-size: 17px; position: relative; z-index: 2; transition: all 0.4s ease; transform: rotate(-45deg); } .egx-btn-2:is(.btn-black) { background: #040404; } .egx-btn-2:is(.without-icon) { padding: 24px 35px; } .egx-btn-2:is(.power-btn) { padding: 20px 35px; } .egx-btn-2:is(.hover-black-btn)::after { background: #040404; } .egx-btn-2:is(.hover-black-btn):hover .btn-text { color: #fff; } .egx-btn-2:is(.hover-black-btn):hover .btn-icon { color: #fff; } .egx-btn-2:hover .btn-text { color: rgb(34, 34, 34); } .egx-btn-2:hover .btn-icon { color: rgb(34, 34, 34); transform: rotate(0deg); } .egx-btn-2:hover::after { width: 100%; } .egx-btn-2-white { position: relative; border-radius: 100px; padding: 24px 35px; display: inline-flex; gap: 21px; align-items: center; overflow: hidden; background: #fff; } .egx-btn-2-white::after { content: ""; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: var(--egx-gd-1); border-radius: 100px; transition: all 0.4s ease; } .egx-btn-2-white .btn-text { font-size: 16px; font-family: var(--urbanist); color: rgb(34, 34, 34); font-weight: 700; line-height: 1; text-transform: capitalize; position: relative; z-index: 2; transition: all 0.4s ease; } .egx-btn-2-white:hover .btn-text { color: #fff; } .egx-btn-2-white:hover::after { width: 100%; } .egx-btn-3 { display: inline-flex; align-items: center; gap: 12px; padding: 11.75px 28px; background: -webkit-linear-gradient(130deg, #209753 0%, #b9d32a 100%); box-shadow: 0 4px 0 rgba(13, 13, 13, 0.08); border-radius: 100px; position: relative; transition: all 0.4s ease; } .egx-btn-3::after { position: absolute; content: ""; width: 100%; height: 100%; border-radius: 100px; left: 0; top: 0; background: var(--egx-gd-2); transition: all 0.4s ease; } .egx-btn-3 .btn-text { font-family: var(--urbanist); font-weight: 700; font-size: 16px; line-height: 30px; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; position: relative; z-index: 2; transform: translateX(20px); transition: all 0.4s ease; } .egx-btn-3 .btn-icon .icon { fill: none; stroke: #fff; stroke-dasharray: 95; stroke-dashoffset: 95; transition: all 0.6s cubic-bezier(0.345, 0, 0, 1); } .egx-btn-3 .btn-icon .icon path { fill: #fff; stroke-dasharray: 95; stroke-dashoffset: 95; transition: all 0.6s cubic-bezier(0.345, 0, 0, 1); } .egx-btn-3:is(.btn-outline) { border: 2px solid transparent; background-image: linear-gradient(#013330, #013330), linear-gradient(to right, #209753, #b9d32a); background-origin: border-box; background-clip: padding-box, border-box; padding: 9.75px 28px; } .egx-btn-3:is(.btn-outline)::after { display: none; } .egx-btn-3:is(.btn-outline) .btn-text { background: var(--egx-gd-2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .egx-btn-3:is(.btn-outline) .btn-icon .icon { fill: none; stroke: #b9d32a; stroke-dasharray: 95; stroke-dashoffset: 95; transition: all 0.6s cubic-bezier(0.345, 0, 0, 1); } .egx-btn-3:is(.btn-outline) .btn-icon .icon path { fill: #b9d32a; stroke-dasharray: 95; stroke-dashoffset: 95; opacity: 0; transition: all 0.6s cubic-bezier(0.345, 0, 0, 1); } .egx-btn-3:is(.btn-outline):hover::after { opacity: 0; } .egx-btn-3:is(.btn-outline):hover .btn-icon .icon path { opacity: 1; } .egx-btn-3:is(.work-btn) { background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(to right, #209753, #b9d32a); box-shadow: none; } .egx-btn-3:hover::after { opacity: 0; } .egx-btn-3:hover .btn-text { transform: translateX(0); } .egx-btn-3:hover .btn-icon .icon { stroke-dashoffset: 0; } .egx-btn-3:hover .btn-icon .icon path { stroke-dashoffset: 0; } .outline-gd-btn-1 { border: 2px solid transparent; background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(to right, #209753, #b9d32a); background-origin: border-box; background-clip: padding-box, border-box; padding: 10.5px 28px; border-radius: 100px; display: inline-flex; } .outline-gd-btn-1 .btn-text { font-family: var(--urbanist); font-weight: 700; font-size: 16px; line-height: 30px; letter-spacing: -0.01em; text-transform: uppercase; background: linear-gradient(90deg, #209753 0%, #b9d32a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .splitting.animated .char { -webkit-animation: fadeInUp 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; animation: fadeInUp 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; -webkit-animation-delay: calc(30ms * var(--char-index)); animation-delay: calc(30ms * var(--char-index)); } .splitting .whitespace { width: 10px; } .fti-threed-box { perspective: 2000px; transform-style: preserve-3d; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .parallax-img { background-position-y: unset !important; } } @keyframes egx_zigzag { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } 60% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } } @keyframes wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fti-up-down-keyfrem { 0% { transform: translateY(0); } 25% { transform: translateY(-50px); } 50% { transform: translateY(0); } 75% { transform: translateY(50px); } 100% { transform: translateY(0); } } @keyframes fti-roated-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fti-roated-reverse-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } #preloader { position: fixed; left: 0; top: 0; height: 100vh; width: 100%; z-index: 99999999; overflow: hidden; align-items: center; justify-content: center; background-color: #000; transition: 800ms var(--cube-1); } #preloader .preloader-wrap { display: flex; justify-content: center; align-items: center; height: 100%; } #preloader .preloader-wrap .loading { max-width: 100px; } @media (max-width: 575px) { #preloader .preloader-wrap .loading { max-width: 80px; } } #preloader:is(.preloaded) { transform: translateY(-100%); } .egx-header-1-area { position: absolute; top: 0; z-index: 9; width: 100%; background-color: #fff; } .egx-header-1-area:is(.has-shadow) { filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.08)); } .egx-header-1-area .egx-menu-btn-1 { background-color: transparent; width: 40px; } .egx-header-1-area .egx-menu-btn-1 .svg-path { fill: none; stroke: var(--egx-pr-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .egx-header-1-topbar { background-color: rgb(29, 30, 30); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-1-topbar { display: none; } } .egx-header-1-topbar .topbar-wrap { max-width: 1920px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding-left: 92px; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-header-1-topbar .topbar-wrap { padding-left: 30px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-1-topbar .topbar-wrap { padding-left: 12px; } } .egx-header-1-topbar .topbar-wrap .action { display: flex; gap: 27px; align-items: center; } .egx-header-1-topbar .topbar-wrap .action a { display: inline-flex; align-items: center; gap: 11px; transition: all 0.3s ease; color: #fff; } .egx-header-1-topbar .topbar-wrap .action a .icon { font-size: 19px; } .egx-header-1-topbar .topbar-wrap .action a .link-text { font-size: 15px; font-family: var(--urbanist); font-weight: 600; line-height: 1; } .egx-header-1-topbar .topbar-wrap .action a:hover { color: var(--egx-pr-1); transform: translateX(3px); } .egx-header-1-topbar .topbar-wrap .social-media { background: var(--egx-gd-1); width: 272px; height: 52px; display: flex; align-items: center; justify-content: center; gap: 38px; } .egx-header-1-topbar .topbar-wrap .social-media .social-link { font-size: 16px; color: #fff; transition: all 0.3s ease; } .egx-header-1-topbar .topbar-wrap .social-media .social-link:hover { color: #000; transform: scale(1.2); } .egx-header-1-wrap { transform: translateX(-96px); display: flex; align-items: center; justify-content: space-between; gap: 80px; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-1-wrap { transform: translateX(0); } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-1-wrap { gap: 40px; } } .egx-header-1-row { position: relative; display: flex; align-items: center; gap: 250px; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-header-1-row { gap: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-1-row { gap: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-1-row { padding: 15px 0; } } .egx-header-1-row::after { content: ""; background: var(--egx-gd-1); position: absolute; left: -106px; top: 0; width: 417px; height: 100%; z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-header-1-row::after { width: 250px; left: -12px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-header-1-row::after { width: 200px; left: -12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-header-1-row::after { width: 170px; left: -12px; } } @media (max-width: 575px) { .egx-header-1-row::after { width: 150px; left: -12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-header-1-logo { max-width: 140px; } } @media (max-width: 575px) { .egx-header-1-logo { max-width: 120px; } } .egx-header-1-navigation-bar { align-items: center; gap: 30px; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-header-1-navigation-bar { padding-left: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-header-1-navigation-bar { gap: 0; } } .egx-header-1-navigation-bar .btn-wrap { transform: translateX(93px); } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .egx-header-1-navigation-bar .btn-wrap { display: none; } } .egx-header-1-action { display: flex; align-items: center; gap: 30px; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-header-1-action { gap: 14px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-header-1-action { gap: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-1-action { display: none; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-header-1-action .egx-btn-1 { display: none; } } .egx-header-1-search-btn { border: none; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 100%; outline: none; background-color: rgb(234, 234, 234); position: relative; } .egx-header-1-search-btn::after { content: ""; position: absolute; width: 100%; height: 100%; background: var(--egx-gd-1); border-radius: 100%; transform: scale(0); transition: all 0.4s ease; } .egx-header-1-search-btn i { color: var(--egx-heading-1); font-size: 20px; display: flex; align-items: center; justify-content: center; transition: all 0.4s ease; position: relative; z-index: 1; } .egx-header-1-search-btn:hover i { color: #fff; } .egx-header-1-search-btn:hover::after { transform: scale(1); } .main-navigation .navbar-nav { display: inherit; } .main-navigation .navbar-nav li { display: inline-block; position: relative; } .main-navigation .navbar-nav li:not(:last-child) { margin-right: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .main-navigation .navbar-nav li:not(:last-child) { margin-right: 20px; } } .main-navigation .navbar-nav li:is(.dropdown) > a { padding-right: 15px; } .main-navigation .navbar-nav li:is(.dropdown) > a::before { content: "\f107"; font-family: "Font Awesome 6 Free"; font-weight: 700; position: absolute; font-size: 15px; right: 0; top: 50%; transform: translateY(-50%); transition: 400ms var(--cube-2); } .main-navigation .navbar-nav li a { position: relative; z-index: 1; font-family: var(--urbanist); font-size: 18px; font-weight: 600; text-decoration: none; color: rgb(2, 22, 9); padding: 35px 12px; display: inline-block; text-transform: capitalize; line-height: 1; transition: 400ms var(--cube-1); } .main-navigation .navbar-nav li a::after { content: ""; width: 0%; height: 1px; background-color: var(--egx-pr-1); position: absolute; left: 0; bottom: 0; transition: 400ms var(--cube-1); opacity: 0; } .main-navigation .navbar-nav li .dropdown-menu { left: 0; top: 100%; z-index: 100; margin: 0; padding: 20px 20px; height: auto; min-width: 250px; display: block; border: none; border-top: 2px solid var(--egx-pr-1); box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.05); border-radius: 0; position: absolute; background: #fff; border-radius: 2px; text-align: left; opacity: 0; visibility: hidden; transform: translateY(15px) translateZ(0); transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .main-navigation .navbar-nav li .dropdown-menu { min-width: 200px; } } .main-navigation .navbar-nav li .dropdown-menu li { display: block; margin: 0; position: relative; } .main-navigation .navbar-nav li .dropdown-menu li a { color: rgb(2, 22, 9); width: 100%; font-weight: 600; display: block; padding: 10px 0; font-size: 17px; position: relative; } .main-navigation .navbar-nav li .dropdown-menu li a::after { content: ""; position: absolute; width: 0; height: 2px; background-color: var(--egx-pr-2); left: 0; top: 18px; } .main-navigation .navbar-nav li .dropdown-menu li .dropdown-menu { top: 0; left: calc(100% + 20px); min-width: 250px; opacity: 0; visibility: hidden; transform: translateY(15px) translateZ(0); transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .main-navigation .navbar-nav li .dropdown-menu li .dropdown-menu { min-width: 200px; } } .main-navigation .navbar-nav li .dropdown-menu li:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) translateZ(0); } .main-navigation .navbar-nav li .dropdown-menu li:hover > a { color: var(--egx-pr-1); padding-left: 12px; } .main-navigation .navbar-nav li .dropdown-menu li:hover > a::after { opacity: 1; width: 10px; } .main-navigation .navbar-nav li:hover > a { color: var(--egx-pr-1); } .main-navigation .navbar-nav li:hover > a::before { transform: translateY(-50%) rotate(360deg); } .main-navigation .navbar-nav li:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) translateZ(0); } .egx-header-2-area { position: absolute; top: 0; z-index: 9; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.161); } .egx-header-2-area .egx-menu-btn-1 { background-color: transparent; width: 40px; } .egx-header-2-area .egx-menu-btn-1 .svg-path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .egx-header-2-wrap { display: flex; align-items: center; justify-content: space-between; gap: 80px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-header-2-wrap { gap: 50px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-2-wrap { gap: 40px; } } .egx-header-2-row { display: flex; align-items: center; gap: 170px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-header-2-row { gap: 65px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-2-row { gap: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-2-row { padding: 15px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-header-2-logo { max-width: 140px; } } @media (max-width: 575px) { .egx-header-2-logo { max-width: 120px; } } .egx-header-2-navigation-bar { align-items: center; gap: 30px; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-header-2-navigation-bar { padding-left: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-header-2-navigation-bar { gap: 0; } } .egx-header-2-action { display: flex; align-items: center; gap: 30px; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-header-2-action { gap: 14px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-header-2-action { gap: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-2-action { display: none; } } .egx-header-2-action .header-btn { padding: 20.5px 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-2-action .header-btn { display: none; } } .egx-header-2-action .cart-btn { position: relative; display: flex; align-items: center; margin-right: 6px; } .egx-header-2-action .cart-btn .icon { font-size: 18px; color: #fff; } .egx-header-2-action .cart-btn .number { position: absolute; top: -8px; right: -14px; height: 20px; width: 20px; border-radius: 50%; background: var(--egx-gd-1); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-family: var(--urbanist); font-weight: 700; } .egx-header-2-search-btn { border: none; display: flex; align-items: center; justify-content: center; outline: none; background-color: transparent; } .egx-header-2-search-btn i { color: #fff; font-size: 26px; transition: all 0.4s ease; } .egx-header-2-search-btn:hover i { color: var(--egx-pr-1); } .main-navigation:is(.has-menu-2) .navbar-nav > li:not(:last-child) { margin-right: 45px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .main-navigation:is(.has-menu-2) .navbar-nav > li:not(:last-child) { margin-right: 20px; } } .main-navigation:is(.has-menu-2) .navbar-nav li a { font-weight: 600; color: #fff; padding: 54px 12px; } .main-navigation:is(.has-menu-2) .navbar-nav li .dropdown-menu { border-color: var(--egx-pr-1); } .main-navigation:is(.has-menu-2) .navbar-nav li .dropdown-menu li a::after { content: ""; position: absolute; width: 0; height: 2px; background-color: var(--egx-pr-1); left: 0; top: 18px; border-bottom: 1.5px solid var(--egx-pr-1); } .main-navigation:is(.has-menu-2) .navbar-nav li .dropdown-menu li:hover > a { color: var(--egx-pr-1); padding-left: 12px; } .main-navigation:is(.has-menu-2) .navbar-nav li .dropdown-menu li:hover > a::after { opacity: 1; width: 10px; } .main-navigation:is(.has-menu-2) .navbar-nav li:is(.dropdown) > a::before { right: -5px; } .main-navigation:is(.has-menu-2) .navbar-nav li:hover > a { color: var(--egx-pr-1); } .main-navigation:is(.has-menu-2) .navbar-nav li:hover::after { transform: scale(1); } .main-navigation:is(.has-menu-2) .navbar-nav li:hover::before { transform: scale(1); } .egx-header-3-area { position: absolute; top: 0; z-index: 9; width: 100%; } .egx-header-3-area::after { content: ""; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background: var(--egx-gd-1); } .egx-header-3-area .egx-menu-btn-1 { background-color: transparent; width: 40px; } .egx-header-3-area .egx-menu-btn-1 .svg-path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .egx-header-3-wrap { display: flex; align-items: center; justify-content: space-between; gap: 80px; } @media screen and (min-width: 1920px) { .egx-header-3-wrap { transform: translateX(72px); } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-header-3-wrap { gap: 50px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-3-wrap { gap: 40px; } } .egx-header-3-row { display: flex; align-items: center; gap: 170px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-header-3-row { gap: 65px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-3-row { gap: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-3-row { padding: 15px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-header-3-logo { max-width: 140px; } } @media (max-width: 575px) { .egx-header-3-logo { max-width: 120px; } } .egx-header-3-navigation-bar { align-items: center; gap: 30px; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-header-3-navigation-bar { padding-left: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-header-3-navigation-bar { gap: 0; } } .egx-header-3-action { display: flex; align-items: center; gap: 30px; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-header-3-action { gap: 14px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-header-3-action { gap: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-3-action { display: none; } } .egx-header-3-action .header-btn { padding: 20.5px 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-3-action .header-btn { display: none; } } .egx-header-3-action .call { text-align: end; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-3-action .call { display: none; } } .egx-header-3-action .call .call-text { font-size: 16px; font-family: var(--urbanist); font-weight: 700; line-height: 1.3; display: block; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .egx-header-3-action .call .call-link { font-size: 20px; font-family: var(--urbanist); color: rgb(255, 255, 255); font-weight: 600; line-height: 1.3; transition: all 0.3s ease; } .egx-header-3-action .call .call-link:hover { color: var(--egx-pr-1); } .egx-header-3-action .call-btn { height: 100%; padding: 35.5px 35px; background: var(--egx-gd-1); font-size: 35px; color: #fff; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-3-action .call-btn { display: none; } } .egx-header-3-action .call-btn:hover i { animation: egx_zigzag 0.5s ease; } .egx-header-3-search-btn { border: none; display: flex; align-items: center; justify-content: center; outline: none; background-color: transparent; } .egx-header-3-search-btn i { color: #fff; font-size: 34px; transition: all 0.4s ease; } .egx-header-3-search-btn:hover i { color: var(--egx-pr-1); } .main-navigation:is(.has-menu-3) .navbar-nav > li:not(:last-child) { margin-right: 45px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .main-navigation:is(.has-menu-3) .navbar-nav > li:not(:last-child) { margin-right: 20px; } } .main-navigation:is(.has-menu-3) .navbar-nav li a { font-weight: 600; color: #fff; padding: 44px 12px; } .main-navigation:is(.has-menu-3) .navbar-nav li .dropdown-menu { border-color: var(--egx-pr-1); } .main-navigation:is(.has-menu-3) .navbar-nav li .dropdown-menu li a::after { content: ""; position: absolute; width: 0; height: 2px; background-color: var(--egx-pr-1); left: 0; top: 18px; border-bottom: 1.5px solid var(--egx-pr-1); } .main-navigation:is(.has-menu-3) .navbar-nav li .dropdown-menu li:hover > a { color: var(--egx-pr-1); padding-left: 12px; } .main-navigation:is(.has-menu-3) .navbar-nav li .dropdown-menu li:hover > a::after { opacity: 1; width: 10px; } .main-navigation:is(.has-menu-3) .navbar-nav li:is(.dropdown) > a::before { right: -5px; } .main-navigation:is(.has-menu-3) .navbar-nav li:hover > a { color: var(--egx-pr-1); } .main-navigation:is(.has-menu-3) .navbar-nav li:hover::after { transform: scale(1); } .main-navigation:is(.has-menu-3) .navbar-nav li:hover::before { transform: scale(1); } .egx-header-4-area { position: absolute; top: 0; z-index: 9; width: 100%; } .egx-header-4-area::after { content: ""; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background: #fff; } .egx-header-4-area::before { content: ""; position: absolute; left: 0; right: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); } .egx-header-4-area .egx-menu-btn-1 { background-color: transparent; width: 40px; } .egx-header-4-area .egx-menu-btn-1 .svg-path { fill: none; stroke: var(--egx-pr-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .egx-header-4-wrap { display: flex; align-items: center; justify-content: space-between; gap: 80px; position: relative; } @media screen and (min-width: 1920px) { .egx-header-4-wrap { transform: translateX(22px); } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-header-4-wrap { gap: 50px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-4-wrap { gap: 40px; } } .egx-header-4-row { display: flex; align-items: center; gap: 100px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-header-4-row { gap: 65px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-4-row { gap: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-4-row { padding: 15px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-header-4-logo { max-width: 140px; } } @media (max-width: 575px) { .egx-header-4-logo { max-width: 120px; } } .egx-header-4-navigation-bar { align-items: center; gap: 30px; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-header-4-navigation-bar { padding-left: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-header-4-navigation-bar { gap: 0; } } .egx-header-4-action { display: flex; align-items: center; gap: 30px; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-header-4-action { gap: 14px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-header-4-action { gap: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-4-action { display: none; } } .egx-header-4-action .left { display: flex; align-items: center; gap: 28px; padding: 8px 8px 8px 28px; background: #fff; border-radius: 100px; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-4-action .left { display: none; } } .egx-header-4-action .left .call { font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 30px; letter-spacing: -0.01em; color: #717171; } .egx-header-4-action .left .call .call-link { color: #0d0d0d; transition: all 0.4s ease; } .egx-header-4-action .left .call .call-link:hover { color: var(--egx-pr-1); } .egx-header-4-action .left .header-btn { display: flex; justify-content: center; align-items: center; padding: 10px 24px; background: var(--egx-gd-2); border-radius: 100px; font-size: 14px; font-family: var(--urbanist); color: #fff; font-weight: 700; line-height: 20px; transition: all 0.4s ease; position: relative; } .egx-header-4-action .left .header-btn span { position: relative; z-index: 2; } .egx-header-4-action .left .header-btn::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 100px; left: 0; top: 0; background: #209753; transition: all 0.4s ease; } .egx-header-4-action .left .header-btn:hover::after { opacity: 0; } .egx-header-4-action .search { display: flex; align-items: center; gap: 8px; border: none; background-color: transparent; outline: none; transition: all 0.4s ease; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-4-action .search { display: none; } } .egx-header-4-action .search .icon { color: #209753; font-size: 18px; } .egx-header-4-action .search .search-text { font-family: var(--urbanist); font-weight: 400; font-size: 16px; line-height: 19px; color: #999; transform: translateY(-2px); transition: all 0.4s ease; } .egx-header-4-action .search:hover { transform: translateX(3px); } .egx-header-4-action .search:hover .search-text { color: #209753; } .egx-header-4-action .sidebar-btn { background: var(--egx-gd-2); width: 80px; height: 100%; padding: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-header-4-action .sidebar-btn { display: none; } } .egx-header-4-action .sidebar-btn span { width: 5px; height: 5px; border-radius: 50%; background-color: #fff; display: inline-block; transition: all 0.5s ease; } .egx-header-4-action .sidebar-btn:hover span:nth-child(1) { transform: translateX(13px); } .egx-header-4-action .sidebar-btn:hover span:nth-child(2) { transform: translateX(13px); } .egx-header-4-action .sidebar-btn:hover span:nth-child(3) { transform: translateY(13px); } .egx-header-4-action .sidebar-btn:hover span:nth-child(6) { transform: translateY(13px); } .egx-header-4-action .sidebar-btn:hover span:nth-child(9) { transform: translateX(-13px); } .egx-header-4-action .sidebar-btn:hover span:nth-child(8) { transform: translateX(-13px); } .egx-header-4-action .sidebar-btn:hover span:nth-child(7) { transform: translateY(-13px); } .egx-header-4-action .sidebar-btn:hover span:nth-child(4) { transform: translateY(-13px); } .main-navigation:is(.has-menu-4) .navbar-nav > li:not(:last-child) { margin-right: 45px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .main-navigation:is(.has-menu-4) .navbar-nav > li:not(:last-child) { margin-right: 20px; } } .main-navigation:is(.has-menu-4) .navbar-nav li a { font-weight: 600; color: #0d0d0d; padding: 31px 12px; } .main-navigation:is(.has-menu-4) .navbar-nav li .dropdown-menu { border-color: var(--egx-pr-1); } .main-navigation:is(.has-menu-4) .navbar-nav li .dropdown-menu li a::after { content: ""; position: absolute; width: 0; height: 2px; background-color: var(--egx-pr-1); left: 0; top: 18px; border-bottom: 1.5px solid var(--egx-pr-1); } .main-navigation:is(.has-menu-4) .navbar-nav li .dropdown-menu li:hover > a { color: var(--egx-pr-1); padding-left: 12px; } .main-navigation:is(.has-menu-4) .navbar-nav li .dropdown-menu li:hover > a::after { opacity: 1; width: 10px; } .main-navigation:is(.has-menu-4) .navbar-nav li:is(.dropdown) > a::before { right: -5px; color: var(--egx-pr-1); } .main-navigation:is(.has-menu-4) .navbar-nav li:hover > a { color: var(--egx-pr-1); } .main-navigation:is(.has-menu-4) .navbar-nav li:hover::after { transform: scale(1); } .main-navigation:is(.has-menu-4) .navbar-nav li:hover::before { transform: scale(1); } .txa_sticky_header { position: fixed; width: 100%; top: 0; left: 0; right: 0; transition: 300ms ease-in-out; z-index: 8; } .txa_sticky_header:is(.txa_sticky) { transform: translateY(-150%); } .txa_sticky_header:is(.txa_sticky):is(.txa_sticky_show) { transform: translateY(0%); } .txa_sticky_header:is(.egx-header-2-area):is(.txa_sticky_show) { background-color: #0d0d0d; } .txa_sticky_header:is(.egx-header-3-area):is(.txa_sticky_show) { background-color: #0d0d0d; } .txa_sticky_header:is(.egx-header-4-area):is(.txa_sticky_show)::before { background: rgb(255, 255, 255); box-shadow: 2px 2px 5px rgba(94, 94, 94, 0.1921568627); } .egx-footer-1-area::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--egx-gd-1); } .egx-footer-1-area .footer-divider { background-color: rgb(1, 50, 47); width: 100%; height: 2px; } .egx-footer-1-area .copyright { background: var(--egx-gd-1); height: 75px; display: flex; align-items: center; justify-content: center; } .egx-footer-1-area .copyright .copy-text { font-size: 15px; font-weight: 500; line-height: 1; color: #fff; text-align: center; } .egx-footer-1-top { display: grid; grid-template-columns: 1.17fr 1fr; gap: 180px; align-items: end; margin-bottom: 45px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-footer-1-top { gap: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-1-top { display: flex; flex-wrap: wrap; gap: 30px 60px; } } .egx-footer-1-top .title-wrap .subtitle { font-size: 18px; font-family: var(--urbanist); font-weight: 700; line-height: 30px; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 5px; } .egx-footer-1-top .title-wrap .title { font-size: 35px; font-family: var(--urbanist); color: rgb(255, 255, 255); line-height: 1.143; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-footer-1-top .title-wrap .title { font-size: 30px; } } @media (max-width: 575px) { .egx-footer-1-top .title-wrap .title { font-size: 26px; } } .egx-footer-1-top .store-wrap { display: flex; align-items: center; gap: 12px; } .egx-footer-1-top .store-wrap .google-play { background-color: #f7f7f7; padding: 10px 40px; border-radius: 100px; height: 88px; display: flex; align-items: center; justify-content: center; transition: all 0.5s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-1-top .store-wrap .google-play { padding: 10px 25px; height: 80px; } } @media (max-width: 575px) { .egx-footer-1-top .store-wrap .google-play { padding: 10px 20px; height: 60px; } } .egx-footer-1-top .store-wrap .google-play:hover { transform: scale(0.96); } .egx-footer-1-top .store-wrap .app-store { background-color: #050608; padding: 10px 40px; height: 88px; display: flex; align-items: center; justify-content: center; border-radius: 100px; transition: all 0.5s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-footer-1-top .store-wrap .app-store { padding: 10px 25px; height: 80px; } } @media (max-width: 575px) { .egx-footer-1-top .store-wrap .app-store { padding: 10px 20px; height: 60px; } } .egx-footer-1-top .store-wrap .app-store:hover { transform: scale(0.96); } .egx-footer-1-wrap { margin: 40px 0 70px 0; display: grid; grid-template-columns: 1fr 1.3fr 1.1fr; gap: 105px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-footer-1-wrap { grid-template-columns: 1fr 0.7fr 1.1fr; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-footer-1-wrap { grid-template-columns: 1fr 1.4fr; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-footer-1-wrap { grid-template-columns: 1.4fr 1fr; gap: 50px 105px; } } @media (max-width: 575px) { .egx-footer-1-wrap { grid-template-columns: 1fr; gap: 50px; } } .egx-footer-1-wrap .footer-info { position: relative; } .egx-footer-1-wrap .footer-info::after { content: ""; position: absolute; top: 0; right: -52.5px; height: 100%; width: 2px; background-color: rgb(1, 50, 47); } @media (max-width: 575px) { .egx-footer-1-wrap .footer-info::after { display: none; } } .egx-footer-1-wrap .footer-info .title { font-size: 27px; font-weight: 900; color: #fff; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-footer-1-wrap .footer-info .title { font-size: 24px; } } @media (max-width: 575px) { .egx-footer-1-wrap .footer-info .title { font-size: 22px; } } .egx-footer-1-wrap .footer-info .action { margin-top: 45px; display: flex; flex-direction: column; gap: 20px; } .egx-footer-1-wrap .footer-info .action .link { display: grid; grid-template-columns: 37px auto; align-items: center; gap: 10px; } .egx-footer-1-wrap .footer-info .action .link .icon { width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 50%; border: 2px dotted rgb(69, 108, 72); background: var(--egx-gd-1); transition: all 0.3s ease; } .egx-footer-1-wrap .footer-info .action .link .link-text { font-size: 16px; font-family: var(--urbanist); color: rgb(255, 255, 255); font-weight: 700; line-height: 1.563; transition: all 0.3s ease; } .egx-footer-1-wrap .footer-info .action .link:hover .link-text { color: var(--egx-pr-1); } .egx-footer-1-wrap .footer-info .action .link:hover .icon { color: #050608; border-color: #050608; } .egx-footer-1-wrap .footer-menu { position: relative; } .egx-footer-1-wrap .footer-menu::after { content: ""; position: absolute; top: 0; right: -52.5px; height: 100%; width: 2px; background-color: rgb(1, 50, 47); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-1-wrap .footer-menu::after { display: none; } } .egx-footer-1-wrap .footer-menu .title { font-size: 27px; font-weight: 900; color: #fff; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-footer-1-wrap .footer-menu .title { font-size: 24px; } } @media (max-width: 575px) { .egx-footer-1-wrap .footer-menu .title { font-size: 22px; } } .egx-footer-1-wrap .footer-menu .footer-list { display: flex; gap: 15px 50px; flex-wrap: wrap; margin-top: 35px; } .egx-footer-1-wrap .footer-menu .footer-list ul { display: flex; flex-direction: column; gap: 15px; } .egx-footer-1-wrap .footer-menu .footer-list ul li a { display: inline-flex; align-items: baseline; gap: 10px; transition: all 0.3s ease; } .egx-footer-1-wrap .footer-menu .footer-list ul li a i { color: rgb(33, 151, 83); font-size: 15px; transition: all 0.3s ease; } .egx-footer-1-wrap .footer-menu .footer-list ul li a span { font-size: 16px; font-family: var(--urbanist); font-weight: 700; line-height: 1.5; color: #fff; transition: all 0.3s ease; } .egx-footer-1-wrap .footer-menu .footer-list ul li a:hover { transform: translateX(4px); } .egx-footer-1-wrap .footer-menu .footer-list ul li a:hover span { color: rgb(33, 151, 83); } .egx-footer-1-wrap .footer-newsletter .title { font-size: 27px; font-weight: 900; color: #fff; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-footer-1-wrap .footer-newsletter .title { font-size: 24px; } } @media (max-width: 575px) { .egx-footer-1-wrap .footer-newsletter .title { font-size: 22px; } } .egx-footer-1-wrap .footer-newsletter .disc { margin-top: 30px; font-size: 16px; line-height: 23px; color: #fff; } .egx-footer-1-wrap .footer-newsletter .newsletter-form .mc4wp-form-fields { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; } .egx-footer-1-wrap .footer-newsletter .newsletter-form input { height: 51px; padding: 5px 20px; background-color: #fff; border-radius: 100px; outline: none; border: 0; font-family: var(--urbanist); } .egx-footer-1-wrap .update-mess { font-size: 16px; font-weight: 700; color: #fff; margin-top: 12px; display: block; margin-left: 20px; } .egx-footer-2-area .divider { margin-top: 65px; background-color: rgb(197, 197, 197); height: 1px; width: 100%; } .egx-footer-2-area .copyright { padding: 32px 0 38px 0; text-align: center; } .egx-footer-2-area .copyright .copyright-text { font-size: 15px; font-family: var(--urbanist); color: rgb(113, 113, 113); } .egx-footer-2-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 92px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-footer-2-top { gap: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-2-top { grid-template-columns: 1fr; gap: 30px; } } .egx-footer-2-top .title { font-size: 35px; line-height: 50px; color: rgb(14, 14, 14); } @media (max-width: 575px) { .egx-footer-2-top .title { font-size: 28px; line-height: 36px; } } .egx-footer-2-top .title .link { color: rgb(33, 151, 83); position: relative; } .egx-footer-2-top .title .link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: rgb(33, 151, 83); } .egx-footer-2-top .footer-form form { position: relative; display: flex; height: 70px; border-radius: 35px; overflow: hidden; } .egx-footer-2-top .footer-form form input { width: 100%; height: 100%; background-color: #fff; border: none; outline: none; padding: 10px 190px 10px 30px; font-family: var(--urbanist); font-size: 16px; color: #050608; } @media (max-width: 575px) { .egx-footer-2-top .footer-form form input { padding: 10px 30px 10px 20px; } } .egx-footer-2-top .footer-form form input::placeholder { color: rgb(156, 156, 156); } .egx-footer-2-top .footer-form form button { position: absolute; right: 0; font-size: 18px; font-family: var(--urbanist); color: rgb(255, 255, 255); font-weight: 700; background: var(--egx-gd-1); height: 100%; padding: 10px 50px; position: relative; } @media (max-width: 575px) { .egx-footer-2-top .footer-form form button { font-size: 16px; } } .egx-footer-2-top .footer-form form button::after { content: ""; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: #050608; border-radius: 0 35px 35px 0; transition: all 0.4s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-footer-2-top .footer-form form button { padding: 10px 30px; } } @media (max-width: 575px) { .egx-footer-2-top .footer-form form button { padding: 10px; } } .egx-footer-2-top .footer-form form button span { position: relative; z-index: 2; } .egx-footer-2-top .footer-form form button:hover::after { width: 100%; } .egx-footer-2-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-footer-2-gallery { grid-template-columns: repeat(4, 1fr); } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-footer-2-gallery { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575px) { .egx-footer-2-gallery { grid-template-columns: repeat(2, 1fr); } } .egx-footer-2-gallery .gallery-item { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 20px; overflow: hidden; } @media (max-width: 575px) { .egx-footer-2-gallery .gallery-item { border-radius: 10px; } } .egx-footer-2-gallery .gallery-item::after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(5, 6, 8, 0.5); opacity: 0; transition: all 0.4s ease; } .egx-footer-2-gallery .gallery-item .icon-1 { position: absolute; width: 50px; height: 50px; border-radius: 100%; background: var(--egx-gd-1); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; transform: scale(2); opacity: 0; z-index: 2; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } @media (max-width: 575px) { .egx-footer-2-gallery .gallery-item .icon-1 { width: 40px; height: 40px; font-size: 18px; } } .egx-footer-2-gallery .gallery-item:hover::after { opacity: 1; } .egx-footer-2-gallery .gallery-item:hover .icon-1 { opacity: 1; transform: scale(1); } .egx-footer-2-wrap { margin-top: 60px; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.5fr; gap: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-footer-2-wrap { gap: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-2-wrap { display: flex; flex-wrap: wrap; gap: 30px 50px; } } .egx-footer-2-wrap .footer-info .footer-logo { display: inline-block; } .egx-footer-2-wrap .footer-info .title { margin-top: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-2-wrap .footer-info .title { margin-top: 20px; } } .egx-footer-2-wrap .footer-menu .title { font-size: 24px; font-weight: 900; color: rgb(31, 31, 31); } .egx-footer-2-wrap .footer-menu ul { margin-top: 35px; display: flex; flex-direction: column; gap: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-2-wrap .footer-menu ul { margin-top: 20px; } } .egx-footer-2-wrap .footer-menu ul li { display: flex; align-items: baseline; gap: 10px; } .egx-footer-2-wrap .footer-menu ul li .icon { font-size: 17px; color: var(--egx-pr-1); } .egx-footer-2-wrap .footer-menu ul li .link { font-size: 19px; font-family: var(--urbanist); font-weight: 500; color: rgb(81, 78, 78); line-height: 1; text-transform: capitalize; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 108%; background-repeat: no-repeat; background-size: 0% 1.5px; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } .egx-footer-2-wrap .footer-menu ul li .link:hover { color: var(--egx-pr-1); background-size: 100% 1.5px; } .egx-footer-2-wrap .footer-contact .title { font-size: 24px; font-weight: 900; color: rgb(31, 31, 31); } .egx-footer-2-wrap .footer-contact .address { margin-top: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-2-wrap .footer-contact .address { margin-top: 20px; } } .egx-footer-2-wrap .footer-contact .social-media { margin-top: 36px; display: flex; align-items: center; gap: 5px; } .egx-footer-2-wrap .footer-contact .social-media .social-link { width: 57px; height: 57px; display: flex; align-items: center; justify-content: center; background-color: rgb(224, 224, 224); border-radius: 50%; color: rgb(35, 35, 35); font-size: 16px; position: relative; overflow: hidden; transition: all 0.3s ease; } .egx-footer-2-wrap .footer-contact .social-media .social-link i { position: relative; z-index: 2; } .egx-footer-2-wrap .footer-contact .social-media .social-link::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: var(--egx-gd-1); transform: scale(0); border-radius: 50%; transition: all 0.3s ease; } .egx-footer-2-wrap .footer-contact .social-media .social-link:hover { color: #fff; } .egx-footer-2-wrap .footer-contact .social-media .social-link:hover::after { transform: scale(1); } .egx-footer-3-area .divider-1 { height: 2px; width: 100%; background-color: rgb(35, 36, 38); margin-top: 30px; } .egx-footer-3-area .copyright { font-size: 17px; font-family: var(--urbanist); color: #fff; font-weight: 800; line-height: 1.3; text-align: center; margin: 42px 0 0 0; padding-bottom: 26px; } .egx-footer-3-area .copyright .gradient { background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .egx-footer-3-wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 50px 60px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-3-wrap { grid-template-columns: 1fr; } } .egx-footer-3-wrap .footer-info .logo { display: inline-block; } .egx-footer-3-wrap .footer-info .disc { font-size: 17px; color: rgb(127, 127, 127); line-height: 26px; margin-top: 20px; } .egx-footer-3-wrap .footer-info .social-media { margin-top: 35px; display: flex; align-items: center; gap: 30px; } .egx-footer-3-wrap .footer-info .social-media .social-link { display: flex; align-items: center; gap: 5px; } .egx-footer-3-wrap .footer-info .social-media .social-link .icon { font-size: 20px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .egx-footer-3-wrap .footer-info .social-media .social-link .icon i:nth-child(1) { transform: translateY(50px); transition: all 0.4s ease; color: var(--egx-pr-1); } .egx-footer-3-wrap .footer-info .social-media .social-link .icon i:nth-child(2) { position: absolute; transition: all 0.4s ease; color: #fff; } .egx-footer-3-wrap .footer-info .social-media .social-link .text { font-size: 19px; font-family: var(--urbanist); color: rgb(255, 255, 255); font-weight: 700; text-transform: uppercase; line-height: 1.2; transition: all 0.4s ease; } .egx-footer-3-wrap .footer-info .social-media .social-link:hover .text { color: var(--egx-pr-1); } .egx-footer-3-wrap .footer-info .social-media .social-link:hover .icon i:nth-child(1) { transform: translateY(0); } .egx-footer-3-wrap .footer-info .social-media .social-link:hover .icon i:nth-child(2) { transform: translateY(-50px); } .egx-footer-3-wrap .footer-menu-wrap { display: grid; grid-template-columns: auto auto auto; gap: 100px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-footer-3-wrap .footer-menu-wrap { gap: 65px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-footer-3-wrap .footer-menu-wrap { gap: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-3-wrap .footer-menu-wrap { display: flex; flex-wrap: wrap; gap: 35px 50px; } } .egx-footer-3-wrap .footer-menu-wrap .footer-menu ul { display: flex; flex-direction: column; gap: 20px; } .egx-footer-3-wrap .footer-menu-wrap .footer-menu ul li { display: flex; align-items: baseline; gap: 5px; } .egx-footer-3-wrap .footer-menu-wrap .footer-menu ul li a { transition: all 0.4s ease; } .egx-footer-3-wrap .footer-menu-wrap .footer-menu ul li a:hover { transform: translateX(5px); } .egx-footer-3-wrap .footer-menu-wrap .footer-menu ul li a:hover .icon i { transform: rotate(45deg); } .egx-footer-3-wrap .footer-menu-wrap .footer-menu ul li a:hover .text { color: var(--egx-pr-1); } .egx-footer-3-wrap .footer-menu-wrap .footer-menu ul li a .icon { color: var(--egx-pr-1); font-size: 20px; } .egx-footer-3-wrap .footer-menu-wrap .footer-menu ul li a .icon i { transition: all 0.4s ease; } .egx-footer-3-wrap .footer-menu-wrap .footer-menu ul li a .text { font-size: 20px; font-family: var(--urbanist); color: rgb(249, 249, 249); line-height: 1.3; font-weight: 900; transition: all 0.4s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-3-wrap .footer-menu-wrap .footer-menu ul li a .text { font-size: 18px; font-weight: 700; } } .egx-footer-3-bottom { display: grid; grid-template-columns: 1fr 2fr; gap: 40px 105px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-3-bottom { grid-template-columns: 1fr; } } .egx-footer-3-bottom .newsletter { position: relative; padding-top: 30px; } .egx-footer-3-bottom .newsletter::after { content: ""; position: absolute; top: 0; right: -50px; height: 100%; width: 2px; background-color: rgb(35, 36, 38); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-3-bottom .newsletter::after { display: none; } } .egx-footer-3-bottom .newsletter .title { font-size: 22px; font-family: var(--urbanist); color: rgb(255, 255, 255); line-height: 1.3; margin-bottom: 10px; } .egx-footer-3-bottom .newsletter form { position: relative; height: 55px; display: grid; grid-template-columns: 1fr auto; gap: 0; border-radius: 5px; overflow: hidden; } .egx-footer-3-bottom .newsletter form input { width: 100%; height: 100%; border: none; outline: none; padding: 5px 20px; font-size: 16px; font-family: var(--urbanist); color: rgb(115, 115, 115); line-height: 1.2; font-weight: 500; } .egx-footer-3-bottom .newsletter form button { padding: 5px 24px; height: 100%; font-size: 16px; font-family: var(--urbanist); color: rgb(255, 255, 255); font-weight: 800; line-height: 1.2; border: none; outline: none; background: #040404; position: relative; } .egx-footer-3-bottom .newsletter form button::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--egx-gd-1); transition: all 0.3s ease; } .egx-footer-3-bottom .newsletter form button .btn-text { position: relative; z-index: 2; } .egx-footer-3-bottom .newsletter form button:hover::after { opacity: 0; } .egx-footer-3-bottom .gallery-wrap { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding-top: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-footer-3-bottom .gallery-wrap { grid-template-columns: 1fr; } } .egx-footer-3-bottom .gallery-wrap .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .egx-footer-3-bottom .gallery-wrap .gallery { grid-template-columns: repeat(2, 1fr); } } .egx-footer-3-bottom .gallery-wrap .gallery .gallery-item { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; } .egx-footer-3-bottom .gallery-wrap .gallery .gallery-item img { height: 87px !important; } .egx-footer-3-bottom .gallery-wrap .gallery .gallery-item::after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(5, 6, 8, 0.5); opacity: 0; transition: all 0.4s ease; } .egx-footer-3-bottom .gallery-wrap .gallery .gallery-item .icon-1 { position: absolute; width: 50px; height: 50px; border-radius: 100%; background: var(--egx-gd-1); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; transform: scale(2); opacity: 0; z-index: 2; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } @media (max-width: 575px) { .egx-footer-3-bottom .gallery-wrap .gallery .gallery-item .icon-1 { width: 40px; height: 40px; font-size: 18px; } } .egx-footer-3-bottom .gallery-wrap .gallery .gallery-item:hover::after { opacity: 1; } .egx-footer-3-bottom .gallery-wrap .gallery .gallery-item:hover .icon-1 { opacity: 1; transform: scale(1); } .egx-footer-3-bottom .gallery-wrap .action ul { display: flex; flex-direction: column; gap: 8px; } .egx-footer-3-bottom .gallery-wrap .action ul li { display: flex; align-items: baseline; gap: 10px; } .egx-footer-3-bottom .gallery-wrap .action ul li .icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--egx-gd-1); font-size: 13px; color: #fff; transform: translateY(-2px); } .egx-footer-3-bottom .gallery-wrap .action ul li .link { font-size: 18px; font-family: var(--urbanist); color: rgb(249, 249, 249); font-weight: 800; line-height: 1.2; transition: all 0.3s ease; } .egx-footer-3-bottom .gallery-wrap .action ul li .link:hover { color: var(--egx-pr-1); } .txa-search-box { padding-top: 56px; padding-bottom: 56px; background-color: rgba(255, 255, 255, 0.88); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); position: fixed; display: flex; left: 0; top: 0; width: 100%; z-index: 10; align-items: center; transition: 500ms var(--cube-1); transform-origin: top; transform: scaleY(0); visibility: hidden; box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.05); } .txa-search-box-close { height: 40px; width: 40px; font-size: 18px; border: none; outline: none; border-radius: 2px; background: #fff; color: var(--egx-pr-1); flex: 0 0 auto; transition: all 0.3s ease-in-out; position: absolute; right: 40px; top: 35px; line-height: 1; } @media (max-width: 575px) { .txa-search-box-close { right: 20px; top: 15px; } } .txa-search-box-close:hover { background: var(--egx-pr-1); color: #fff; } .txa-search-box.active { top: 0; opacity: 1; visibility: visible; transform: scaleY(1); } .txa-search-box.active .txa-search-form::after { transform: scaleX(1); transition-delay: 0.3s; } .txa-search-container { width: 100%; max-width: 840px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } .txa-search-title { font-size: 23px; font-weight: 600; line-height: 1; margin-bottom: 18px; color: #0d0d0d; } .txa-search-form { position: relative; z-index: 1; } .txa-search-form-input { width: 100%; margin: 0; border: none; outline: none; text-align: center; font-size: 16px; color: #888; font-weight: 400; padding: 3px 10px; background: transparent; } .txa-search-form::after { content: ""; width: 100%; bottom: 0; left: 0; right: 0; height: 1px; position: absolute; background-color: #6d6d6d; transition: all 0.5s ease-in-out; transform: scaleX(0); transition-delay: 0s; } .txa-search-tag { gap: 8px; justify-content: center; } .txa-search-tag-title { font-size: 16px; font-weight: 500; color: #5d5d5d; margin-bottom: 12px; } .txa-search-tag-item { flex: 0 0 auto; display: inline-block; font-size: 15px; font-weight: 500; color: #454545; border: 1px solid #dfe1e5; line-height: 1; padding: 9px 17px; transition: all 0.2s ease-in-out; border-radius: 4px; } .txa-search-tag-item:hover { background: var(--egx-pr-1); color: #fff; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 1; display: none; } .overlay:is(.active) { display: block; } .egx-pagination { max-width: 1250px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 64px; gap: 10px 0; } .egx-pagination ul { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; background: #efeff0; border-radius: 100px; padding: 8px; gap: 8px; } .egx-pagination ul li a, .egx-pagination .current { width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 100px; font-family: var(--urbanist); font-weight: 500; font-size: 15px; line-height: 18px; color: #717171; transition: all 0.4s ease; } .egx-pagination ul li a:is(.active), .egx-pagination .current { background: #003936; color: #fff; } .egx-pagination ul li a:hover { background: #003936; color: #fff; } .egx-pagination .dot-wrap { padding: 0 24px; display: flex; gap: 5px; } .egx-pagination .dot-wrap span { font-family: var(--urbanist); font-weight: 900; font-size: 15px; line-height: 20px; letter-spacing: 0.02em; color: #717171; } .blog-sidebar { background: #fff; border: 1px solid rgba(108, 108, 108, 0.2); border-radius: 12px; padding: 40px 32px; overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-sidebar { margin-top: 60px; } } @media (max-width: 575px) { .blog-sidebar { padding: 40px 20px; } } .blog-sidebar .sidebar-box { position: relative; } .blog-sidebar .sidebar-box:not(:last-child) { padding-bottom: 40px; } .blog-sidebar .sidebar-box:not(:first-child)::after { content: ""; position: absolute; left: -32px; top: 0; width: 1000px; height: 1px; background: #dfe1e5; } .blog-sidebar .sidebar-box:not(:first-child) .sidebar-box-title { padding-top: 35px; } .blog-sidebar .sidebar-box .sidebar-box-title { font-size: 22px; line-height: 26px; text-transform: capitalize; color: #0d0d0d; } .blog-sidebar .sidebar-box .sidebar-search-box { position: relative; display: grid; grid-template-columns: auto 54px; gap: 0; height: 54px; border-radius: 5px; overflow: hidden; margin-top: 14px; } @media (max-width: 575px) { .blog-sidebar .sidebar-box .sidebar-search-box { display: flex; } } .blog-sidebar .sidebar-box .sidebar-search-box .search-input { height: 100%; background: #f4f5f5; border: none; outline: none; padding: 5px 20px; font-family: var(--urbanist); font-weight: 400; font-size: 16px; line-height: 20px; color: #717171; } @media (max-width: 575px) { .blog-sidebar .sidebar-box .sidebar-search-box .search-input { max-width: 200px; } } .blog-sidebar .sidebar-box .sidebar-search-box .search-input::placeholder { color: rgba(113, 113, 113, 0.48); } .blog-sidebar .sidebar-box .sidebar-search-box .search-btn { height: 100%; background: var(--egx-gd-2); border-radius: 0 5px 5px 0; position: relative; width: 54px; } .blog-sidebar .sidebar-box .sidebar-search-box .search-btn::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #b9d32a 0%, #209753 100%); transition: all 0.4s ease; opacity: 0; } .blog-sidebar .sidebar-box .sidebar-search-box .search-btn i { color: #fff; position: relative; z-index: 2; font-size: 20px; } .blog-sidebar .sidebar-box .sidebar-search-box .search-btn:hover::after { opacity: 1; } .blog-sidebar .sidebar-box ul li a { font-family: var(--urbanist); font-weight: 500; font-size: 18px; line-height: 28px; color: #0d0d0d; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; position: relative; } .blog-sidebar .sidebar-box ul li a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 1px; background-color: var(--egx-pr-1); transition: all 0.8s ease; } .blog-sidebar .sidebar-box ul li a::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #dfe1e5; } .blog-sidebar .sidebar-box ul li a .text { transition: all 0.4s ease; } .blog-sidebar .sidebar-box ul li a .number { transition: all 0.4s ease; } .blog-sidebar .sidebar-box ul li a:hover::after { width: 100%; } .blog-sidebar .sidebar-box ul li a:hover .text { transform: translateX(5px); color: var(--egx-pr-1); } .blog-sidebar .sidebar-box ul li a:hover .number { color: var(--egx-pr-1); } .blog-sidebar .sidebar-box .latest-post-item-wrap { margin-top: 24px; display: flex; flex-direction: column; gap: 24px; } .blog-sidebar .sidebar-box .latest-post-item-wrap .latest-post-item { display: grid; grid-template-columns: 112px auto; gap: 14px; align-items: center; } .blog-sidebar .sidebar-box .latest-post-item-wrap .latest-post-item .img { max-width: 112px; border-radius: 4px; overflow: hidden; } .blog-sidebar .sidebar-box .latest-post-item-wrap .latest-post-item .img img { height: 123px; object-fit: cover; } .blog-sidebar .sidebar-box .latest-post-item-wrap .latest-post-item .img .img-cover { transition: all 0.5s ease; } .blog-sidebar .sidebar-box .latest-post-item-wrap .latest-post-item .img:hover .img-cover { transform: scale(1.1); } .blog-sidebar .sidebar-box .latest-post-item-wrap .latest-post-item .content .date { font-weight: 700; font-size: 10px; line-height: 20px; color: #fff; background: var(--egx-gd-2); border-radius: 50px; padding: 7px 15px; } .blog-sidebar .sidebar-box .latest-post-item-wrap .latest-post-item .content .title { margin-top: 14px; font-family: var(--urbanist); font-weight: 600; font-size: 18px; line-height: 28px; color: #0d0d0d; transition: all 0.3s ease; } @media (max-width: 575px) { .blog-sidebar .sidebar-box .latest-post-item-wrap .latest-post-item .content .title { line-height: 25px; } } .blog-sidebar .sidebar-box .latest-post-item-wrap .latest-post-item .content .title:hover { color: var(--egx-pr-1); } .blog-sidebar .sidebar-box .tagcloud { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; } .blog-sidebar .sidebar-box .sidebar-tag a, .widget_tag_cloud a { padding: 8px 16px; background: #f4f5f5; border-radius: 2px; font-family: var(--urbanist); font-weight: 400; font-size: 16px !important; line-height: 20px; color: #717171; transition: all 0.4s ease; } .blog-sidebar .sidebar-box .sidebar-tag a:hover, .widget_tag_cloud a:hover { background: var(--egx-pr-1); color: #fff; } .blog-sidebar .sidebar-box .sidebar-social { margin-top: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; } .blog-sidebar .sidebar-box .sidebar-social .social-link { width: 50px; height: 50px; background: #fff; border: 1px solid #eee; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.4s ease; } .blog-sidebar .sidebar-box .sidebar-social .social-link:hover { color: #209753; } .txa-offcanvas-box { position: fixed; right: 20px; top: 20px; background: #fff; z-index: 9; max-width: 720px; width: 100%; height: calc(100% - 40px); background-color: rgba(255, 255, 255, 0.88); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); overflow-y: scroll; transform: translateX(105%); visibility: hidden; opacity: 1; transition: all 0.5s ease-in-out; z-index: 99; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .txa-offcanvas-box { right: 0; top: 0; height: 100vh; } } .txa-offcanvas-box::-webkit-scrollbar { display: none; } .txa-offcanvas-box-close { display: flex; flex: 0 0 auto; width: 56px; height: 56px; background: #000; color: #fff; justify-content: center; align-items: center; font-size: 26px; position: absolute; right: 16px; top: 16px; transition: all 0.3s ease-in-out; } @media (max-width: 575px) { .txa-offcanvas-box-close { width: 46px; height: 46px; font-size: 20px; right: 10px; top: 10px; } } .txa-offcanvas-box-close:hover { background: var(--egx-pr-1); } .txa-offcanvas-box-container { padding: 80px; display: flex; flex-direction: column; height: 100%; justify-content: space-between; gap: 50px; } @media (max-width: 575px) { .txa-offcanvas-box-container { padding: 80px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .txa-offcanvas-box-container { padding: 80px 40px; } } .txa-offcanvas-box .offcanvas-slideup { transform: translateY(100%); transition: all 0.5s ease-in-out; transition-delay: 0s; } .txa-offcanvas-box:is(.active) { transform: translateX(0%); visibility: visible; opacity: 1; } .txa-offcanvas-box:is(.active) .offcanvas-slideup { transform: translateY(0%); transition-delay: 0.3s; } .txa-offcanvas-services-title { font-size: 16px; color: #0d0d0d; margin-bottom: 14px; font-weight: 600; } .txa-offcanvas-services li { overflow: hidden; line-height: 1.5; } .txa-offcanvas-services li:not(:last-child) { margin-bottom: 20px; } .txa-offcanvas-services-item { font-size: 32px; font-weight: 600; color: #5d5d5d; display: flex; align-items: baseline; gap: 10px; transform: translateX(-28px); transition: all 0.4s ease-in-out; } .txa-offcanvas-services-item i { font-size: 20px; transform: translateY(-3px) translateX(0); color: #000; } .txa-offcanvas-services-item:hover { color: #000; transform: translateX(0); } .txa-offcanvas-content { display: flex; gap: 50px; justify-content: space-between; } @media (max-width: 575px) { .txa-offcanvas-content { flex-wrap: wrap; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .txa-offcanvas-content { flex-wrap: nowrap; } } .txa-offcanvas-content-box-title { font-size: 16px; font-weight: 600; color: #888; margin-bottom: 14px; } .txa-offcanvas-contact li { font-size: 16px; line-height: 22px; color: #0d0d0d; font-weight: 500; display: flex; gap: 12px; align-items: center; } .txa-offcanvas-contact li:not(:last-child) { margin-bottom: 10px; } .txa-offcanvas-contact li span { display: flex; gap: 11px; align-items: center; } .txa-offcanvas-contact li a { display: flex; gap: 11px; align-items: center; transition: all 0.3s ease-in-out; } .txa-offcanvas-contact li a:hover { color: var(--egx-pr-1); } .txa-offcanvas-social li { overflow: hidden; margin-bottom: 7px; } .txa-offcanvas-social-item { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: #5d5d5d; line-height: 1.5; transform: translateX(-25px); transition: all 0.3s ease-in-out; } .txa-offcanvas-social-item i { width: 15px; } .txa-offcanvas-social-item:hover { transform: translateX(0); color: #0d0d0d; } .progress-wrap { position: fixed; right: 30px; bottom: 40px; height: 35px; width: 35px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2); z-index: 99; opacity: 0; visibility: hidden; -webkit-transition: all 200ms linear; transition: all 200ms linear; transform: translateY(15px); -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); } .progress-wrap:is(.active-progress) { opacity: 1; visibility: visible; transform: translateY(0); } .progress-wrap::after { position: absolute; content: "\f062"; font-family: "Font Awesome 6 Free"; text-align: center; line-height: 35px; font-size: 15px; color: var(--egx-pr-1); left: 0; top: 0; height: 35px; width: 35px; cursor: pointer; display: block; font-weight: 700; z-index: 1; -webkit-transition: all 200ms linear; transition: all 200ms linear; font-size: 13px; } .progress-wrap svg path { fill: none; } .progress-wrap .progress-circle path { stroke: var(--egx-pr-1); stroke-width: 5; box-sizing: border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .mobile-menu { position: fixed; left: -500px; top: 0; width: 100%; max-width: 470px; height: 100%; z-index: 9; transition: 0.5s; } .mobile-menu::-webkit-scrollbar { display: none; scrollbar-width: none; } .mobile-menu:is(.mobile_menu_on) { left: 0; } .mobile-menu:is(.mobile_menu_on) .mobile_menu_overlay { opacity: 1; visibility: visible; } .mobile-menu-logo-wrap { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .mobile-menu-logo-wrap .mobile-menu-logo { max-width: 220px; } .mobile-menu-close { font-size: 30px; color: #fff; cursor: pointer; } .mobile-menu-close i { line-height: 1; display: inline-block; transition: 300ms ease-in-out; } .mobile-menu-close:hover { color: var(--egx-pr-1); } .mobile-menu-wrap { height: 100%; padding: 80px 50px; overflow-y: scroll; background: #6e6d6d; } .mobile-menu-search-form-1 { position: relative; z-index: 1; } .mobile-menu-search-form-1 input { height: 45px; padding: 0 20px; background: rgba(255, 255, 255, 0.25); width: 100%; border: none; outline: none; color: #fff; font-size: 16px; border-radius: 30px; } .mobile-menu-search-form-1 .form-btn { border: none; outline: none; background: transparent; color: #fff; transition: 300ms var(--cube-1); text-transform: capitalize; font-size: 16px; position: absolute; right: 0; top: 0; height: 100%; width: 50px; padding: 0; } .mobile-menu-search-form-1 .form-btn:hover { color: var(--egx-pr-1); } .mobile_menu_overlay { top: 0; width: 100%; height: 100%; position: fixed; z-index: 100; right: 0%; height: 120vh; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.9); -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; z-index: -1; } .mobile_menu_overlay_on { overflow: hidden; } .mobile-main-navigation .navbar-nav li { position: relative; } .mobile-main-navigation .navbar-nav li:not(:last-child) { margin-bottom: 15px; } .mobile-main-navigation .navbar-nav li a { color: rgba(255, 255, 255, 0.9); font-family: var(--urbanist); font-size: 18px; text-transform: capitalize; font-weight: 600; } .mobile-main-navigation .navbar-nav li a:hover { color: var(--egx-pr-1); } .mobile-main-navigation .navbar-nav li .dropdown-btn { position: absolute; top: 0; right: 0; cursor: pointer; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.1); font-size: 14px; color: rgba(255, 255, 255, 0.8); transition: 400ms ease-in-out; border-radius: 5px; } .mobile-main-navigation .navbar-nav li .dropdown-btn:hover { background-color: var(--egx-pr-1); } .mobile-main-navigation .navbar-nav li .dropdown-btn:is(.active) { -webkit-transform: rotate(90deg); transform: rotate(90deg); background-color: var(--egx-pr-1); } .mobile-main-navigation .navbar-nav li .dropdown-menu { border-radius: 0; background-color: transparent; border: none; border-radius: 3px; } .mobile-main-navigation .navbar-nav li .dropdown-menu li { padding-left: 30px; margin-bottom: 0; } .mobile-main-navigation .navbar-nav li .dropdown-menu li a { font-size: 18px; } .mobile-main-navigation .navbar-nav li .dropdown-menu li .dropdown-btn { position: absolute; top: 5px; width: 22px; height: 22px; font-size: 12px; } @media (max-width: 767px) { .mobile-menu-wrap { padding: 80px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .mobile-menu-wrap { padding: 80px 30px; } } .egx-hero-1-area { position: relative; background: -moz-linear-gradient( 90deg, rgba(124, 165, 204, 0.99608) 0%, rgb(207, 231, 254) 100% ); background: -webkit-linear-gradient( 90deg, rgba(124, 165, 204, 0.99608) 0%, rgb(207, 231, 254) 100% ); background: -ms-linear-gradient( 90deg, rgba(124, 165, 204, 0.99608) 0%, rgb(207, 231, 254) 100% ); padding-top: 140px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-1-area { padding-top: 0; } } .egx-hero-1-area .bg-image { position: absolute; bottom: 0; left: 0; } .egx-hero-1-area .shape-1 { position: absolute; top: 240px; left: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-1-area .shape-1 { top: 200px; max-width: 280px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-hero-1-area .shape-1 { top: 150px; left: auto; right: 60px; max-width: 250px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-1-area .shape-1 { top: 120px; left: auto; right: 40px; max-width: 200px; } } @media (max-width: 575px) { .egx-hero-1-area .shape-1 { display: none; } } .egx-hero-1-area .shape-2 { position: absolute; top: 230px; right: 320px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-hero-1-area .shape-2 { right: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-1-area .shape-2 { display: none; } } .egx-hero-1-area .shape-3 { position: absolute; bottom: 120px; right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-1-area .shape-3 { max-width: 260px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-1-area .shape-3 { display: none; } } .egx-hero-1-wrap { position: relative; padding: 222px 0 118px 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-1-wrap { display: flex; gap: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-1-wrap { display: flex; flex-direction: column-reverse; gap: 50px; padding: 200px 0 0 0; } } @media (max-width: 575px) { .egx-hero-1-wrap { display: flex; flex-direction: column-reverse; gap: 50px; padding: 150px 0 0 0; } } .egx-hero-1-wrap .main-img { position: absolute; bottom: -30px; left: -135px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-hero-1-wrap .main-img { left: -15px; max-width: 700px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-hero-1-wrap .main-img { left: -15px; max-width: 580px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-1-wrap .main-img { position: static; } } .egx-hero-1-wrap .hero-content { max-width: 535px; margin-left: auto; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-1-wrap .hero-content { margin-left: 0; } } .egx-hero-1-wrap .hero-content .gradient-2 { background: -webkit-linear-gradient( -180deg, rgb(153, 187, 59) 0%, rgb(33, 151, 83) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .egx-hero-1-wrap .hero-content .hero-title { font-size: 70px; font-family: var(--urbanist); color: var(--egx-heading-1); line-height: 1.143; font-weight: 900; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-hero-1-wrap .hero-content .hero-title { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-1-wrap .hero-content .hero-title { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-hero-1-wrap .hero-content .hero-title { font-size: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-1-wrap .hero-content .hero-title { font-size: 40px; } } @media (max-width: 575px) { .egx-hero-1-wrap .hero-content .hero-title { font-size: 35px; } } .egx-hero-1-wrap .hero-content .feature { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; align-items: center; margin-top: 29px; } @media (max-width: 575px) { .egx-hero-1-wrap .hero-content .feature { display: flex; flex-wrap: wrap; gap: 15px 25px; } } .egx-hero-1-wrap .hero-content .feature .item { display: grid; grid-template-columns: 58px auto; gap: 12px; align-items: center; } .egx-hero-1-wrap .hero-content .feature .item .icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background-color: #fff; box-shadow: 0 10px 11.96px 1.04px rgba(28, 36, 104, 0.13); font-size: 26px; transition: all 0.3s ease; } .egx-hero-1-wrap .hero-content .feature .item .icon:hover { background-color: rgb(251, 204, 0); } .egx-hero-1-wrap .hero-content .feature .item .icon:hover i { animation: egx_zigzag 0.4s ease; } .egx-hero-1-wrap .hero-content .feature .item .title { font-size: 18px; font-weight: 900; line-height: 1.111; } .egx-hero-1-wrap .hero-content .btn-wrap { margin-top: 40px; } .egx-hero-2-area { padding: 298px 0 0 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-2-area { padding-top: 220px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-hero-2-area { padding-top: 180px; padding-bottom: 298px; } .egx-hero-2-right { bottom: 200px !important; left: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-2-area { padding-top: 150px; padding-bottom: 298px; } .egx-hero-2-right { bottom: 200px !important; left: 15px; } } @media (max-width: 575px) { .egx-hero-2-area { padding-top: 130px; padding-bottom: 298px; } .egx-hero-2-right { bottom: 200px !important; } } .egx-hero-2-wrap { position: relative; } .egx-hero-2-left { max-width: 655px; padding-bottom: 126px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-2-left { padding-bottom: 0; } } .egx-hero-2-left .hero-title { font-size: 75px; font-family: var(--urbanist); color: #fff; line-height: 1.067; font-weight: 900; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-hero-2-left .hero-title { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-2-left .hero-title { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-hero-2-left .hero-title { font-size: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-2-left .hero-title { font-size: 40px; } } @media (max-width: 575px) { .egx-hero-2-left .hero-title { font-size: 35px; } } .egx-hero-2-left .disc { color: #fff; margin-top: 25px; } .egx-hero-2-left .btn-wrap { margin-top: 35px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; overflow: hidden; } .egx-hero-2-left .client { margin-top: 110px; display: flex; flex-wrap: wrap; align-items: start; gap: 24px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-2-left .client { margin-top: 50px; } } .egx-hero-2-left .client .popup-video { width: 77px; height: 77px; border-radius: 50%; background: var(--egx-gd-1); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .egx-hero-2-left .client .popup-video .icon { width: 49px; height: 49px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #000; transition: all 0.4s ease; } .egx-hero-2-left .client .popup-video:hover .icon { transform: scale(1.2); color: var(--egx-pr-1); } .egx-hero-2-left .client .client-cont { max-width: 250px; } .egx-hero-2-left .client .client-cont .subtitle { font-size: 16px; font-family: var(--urbanist); line-height: 26px; font-weight: 500; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .egx-hero-2-left .client .client-cont .title { font-size: 22px; color: rgb(255, 255, 255); font-weight: 800; line-height: 1.182; } .egx-hero-2-right { background: var(--egx-gd-1); position: absolute; max-width: 535px; right: 0; bottom: -62px; padding: 55px 50px 70px 35px; border-radius: 6px; display: grid; grid-template-columns: 91px auto; align-items: start; gap: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-2-right { max-width: 480px; padding-bottom: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-2-right { position: relative; right: auto; } } @media (max-width: 575px) { .egx-hero-2-right { display: flex; flex-wrap: wrap; padding: 40px 30px 60px 30px; } } .egx-hero-2-right .icon:hover img { animation: bounceIn 0.8s ease; } .egx-hero-2-right .title { font-size: 24px; line-height: 30px; color: #fff; } .egx-hero-2-right .disc { color: #fff; margin-top: 16px; } .egx-hero-2-right .link { width: 68px; height: 55px; display: flex; align-items: center; justify-content: center; color: #fff; background: #fff; position: absolute; bottom: 0; right: 0; overflow: hidden; } .egx-hero-2-right .link i { position: relative; z-index: 2; transition: all 0.3s ease; } .egx-hero-2-right .link::after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: var(--egx-gd-1); transition: all 0.3s ease; } .egx-hero-2-right .link:hover { color: var(--egx-pr-1); } .egx-hero-2-right .link:hover::after { width: 0%; right: 0; } .egx-hero-2-right .link:hover i { transform: rotate(-45deg); } .egx-hero-3-area { padding: 215px 0 150px 0; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-3-area { padding: 160px 0 100px 0; } } @media (max-width: 575px) { .egx-hero-3-area { padding: 120px 0 100px 0; } } .egx-hero-3-left { max-width: 600px; } .egx-hero-3-left .hero-title { font-size: 75px; font-family: var(--urbanist); color: #fff; line-height: 1.067; font-weight: 900; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-hero-3-left .hero-title { font-size: 60px; line-height: 1.3; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-3-left .hero-title { font-size: 55px; line-height: 1.2; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-hero-3-left .hero-title { font-size: 50px; line-height: 1.2; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-3-left .hero-title { font-size: 40px; line-height: 1.2; } } @media (max-width: 575px) { .egx-hero-3-left .hero-title { font-size: 35px; line-height: 1.2; } } .egx-hero-3-left .disc { color: rgb(255, 255, 255); margin-top: 30px; max-width: 475px; } .egx-hero-3-left .feature { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; margin-top: 35px; } .egx-hero-3-left .feature .item { display: grid; grid-template-columns: 69px auto; align-items: center; gap: 10px; max-width: 200px; } .egx-hero-3-left .feature .item .icon { border-radius: 50%; background: var(--egx-gd-1); width: 69px; height: 69px; display: flex; align-items: center; justify-content: center; } .egx-hero-3-left .feature .item .icon:hover img { animation: bounceIn 0.8s ease; } .egx-hero-3-left .feature .item .title { color: #fff; font-size: 22px; line-height: 24px; font-weight: 800; } .egx-hero-3-left .btn-wrap { margin-top: 60px; } .egx-hero-3-right { position: absolute; bottom: -110px; right: -425px; transform: translateX(1000px); transition: 1.2s var(--cube-1); } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-hero-3-right { max-width: 1300px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-hero-3-right { max-width: 1200px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-hero-3-right { max-width: 1000px; bottom: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-3-right { max-width: 900px; bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-3-right { position: static; margin-top: 50px; } } .egx-hero-4-area { overflow: hidden; background-color: #f4f5f5; } .egx-hero-4-area .egx_hero_4_active { position: relative; } .egx-hero-4-area .egx_hero_4_active .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .egx-hero-4-item .hero-title .split-line > div, .egx-hero-4-area .egx_hero_4_active .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .egx-hero-4-item .hero-title .split-line span { transform: translateY(0); } .egx-hero-4-area .egx_hero_4_active .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .bg-img img { transform: translate(0); } .egx-hero-4-area .egx_hero_4_active .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .bg-img::after { transform: rotate(22deg) translateX(130px) scaleY(1); } .egx-hero-4-wrap { position: relative; max-width: 1920px; margin: 0 auto; padding: 237px 0 5px 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-4-wrap { padding: 150px 0 5px 0; } } @media (max-width: 575px) { .egx-hero-4-wrap { padding: 120px 0 55px 0; } } .egx-hero-4-wrap .fan { position: absolute; bottom: 0; right: 18%; z-index: 3; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-hero-4-wrap .fan { right: 16%; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-hero-4-wrap .fan { right: 13%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-hero-4-wrap .fan { right: 5%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-4-wrap .fan { max-width: 600px; right: 0%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-hero-4-wrap .fan { max-width: 600px; right: -100px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-4-wrap .fan { max-width: 400px; right: -130px; } } @media (max-width: 575px) { .egx-hero-4-wrap .fan { display: none; } } .egx-hero-4-wrap .fan .fan-line { display: flex; justify-content: center; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-hero-4-wrap .fan .fan-line { height: 400px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-4-wrap .fan .fan-line { height: 300px; } } .egx-hero-4-wrap .fan .fan-circle { position: relative; right: -4px; top: 488px; animation: fti-roated-1 30s linear infinite; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-hero-4-wrap .fan .fan-circle { top: 322px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-4-wrap .fan .fan-circle { top: 218px; right: 0; } } .egx-hero-4-wrap .bg-img { position: absolute; right: 0; top: -237px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-hero-4-wrap .bg-img { max-width: 800px; height: 940px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-hero-4-wrap .bg-img { max-width: 700px; height: 900px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-4-wrap .bg-img { display: none; } } .egx-hero-4-wrap .bg-img img { position: relative; z-index: -1; height: 100%; transform: translate(200px); transition: all 1.2s ease; } .egx-hero-4-wrap .bg-img::after { content: ""; position: absolute; left: 0; top: -131px; width: 56px; height: 1324px; background: linear-gradient(360deg, #b9d32a -0.73%, #209753 101.53%); transform: rotate(22deg) translateX(130px) scaleY(0); z-index: 9; transition: all 1s ease; transition-delay: 1.2s; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-hero-4-wrap .bg-img::after { transform: rotate(18deg) translateX(90px); } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-4-wrap .bg-img::after { display: none; } } .egx-hero-4-wrap .shape-1 { position: absolute; top: 79px; left: -95px; } .egx-hero-4-wrap .shape-2 { position: absolute; right: 0; bottom: 0; } .egx-hero-4-wrap .social-media { position: absolute; display: flex; flex-direction: column; gap: 12px; left: 80px; z-index: 4; top: 50%; transform: translateY(-50%); } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-hero-4-wrap .social-media { left: 30px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-4-wrap .social-media { left: 20px; } } @media (max-width: 575px) { .egx-hero-4-wrap .social-media { display: none; } } .egx-hero-4-wrap .social-media .social-link { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid rgba(0, 57, 54, 0.12); position: relative; transition: all 0.4s ease; } .egx-hero-4-wrap .social-media .social-link::after { content: ""; position: absolute; width: 0; height: 2px; right: 42px; background: #003936; transition: all 0.4s ease; } .egx-hero-4-wrap .social-media .social-link .social-text { position: absolute; left: 56px; font-family: var(--urbanist); font-weight: 600; font-size: 16px; line-height: 19px; color: #003936; transform: translateX(-40px); visibility: hidden; opacity: 0; transition: all 0.4s ease; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-4-wrap .social-media .social-link .social-text { display: none; } } .egx-hero-4-wrap .social-media .social-link .icon { font-size: 16px; color: #003936; opacity: 0.64; transition: all 0.4s ease; } .egx-hero-4-wrap .social-media .social-link:hover { border-color: #003936; } .egx-hero-4-wrap .social-media .social-link:hover::after { width: 81px; } .egx-hero-4-wrap .social-media .social-link:hover .icon { opacity: 1; } .egx-hero-4-wrap .social-media .social-link:hover .social-text { opacity: 1; visibility: visible; transform: translateX(0); } .egx-hero-4-wrap .hightlight-text { font-family: var(--inter); font-weight: 800; font-size: 280px; line-height: 300px; text-transform: uppercase; color: rgba(0, 57, 54, 0.03); margin: -80px 0 0 0; position: relative; z-index: 1; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-hero-4-wrap .hightlight-text { font-size: 260px; line-height: 260px; margin-top: -60px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-hero-4-wrap .hightlight-text { margin-left: 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-hero-4-wrap .hightlight-text { margin-left: 40px; font-size: 220px; line-height: 220px; margin-top: -55px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-4-wrap .hightlight-text { font-size: 200px; line-height: 200px; margin: -45px 0 0 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-hero-4-wrap .hightlight-text { font-size: 180px; line-height: 180px; margin: -45px 0 0 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-4-wrap .hightlight-text { font-size: 120px; line-height: 120px; margin: -35px 0 0 50px; } } @media (max-width: 575px) { .egx-hero-4-wrap .hightlight-text { display: none; } } .egx-hero-4-wrap .hightlight-text .split-line div div { transition: all 1s ease; } .egx-hero-4-wrap .hightlight-text .split-line div div:nth-child(2) { transform: translateX(-100px); } .egx-hero-4-wrap .hightlight-text .split-line div div:nth-child(3) { transform: translateX(-150px); } .egx-hero-4-wrap .hightlight-text .split-line .last div div { transition: all 1s ease; } .egx-hero-4-wrap .hightlight-text .split-line .last div div:nth-child(1) { transform: translateX(-250px); color: #e5eae8; } .egx-hero-4-wrap .hightlight-text .split-line .last div div:nth-child(2) { transform: translateX(-350px); color: #e5eae8; } .egx-hero-4-wrap .hightlight-text:is(.active) .split-line div div { transform: translateX(0); } .egx-hero-4-wrap .hightlight-text:is(.active) .split-line .last div div { transform: translateX(0); color: #f4f5f5; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-4-wrap .hightlight-text:is(.active) .split-line .last div div { color: rgba(0, 57, 54, 0.03); } } .egx-hero-4-item { max-width: 560px; padding-bottom: 15px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-hero-4-item { margin-left: 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-hero-4-item { margin-left: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-4-item { margin-left: 50px; max-width: 460px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-4-item { margin-left: 50px; } } .egx-hero-4-item .hero-title { font-weight: 800; font-size: 72px; line-height: 76px; text-transform: capitalize; color: #0d0d0d; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-hero-4-item .hero-title { font-size: 60px; line-height: 1.1; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-4-item .hero-title { font-size: 55px; line-height: 1.1; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-hero-4-item .hero-title { font-size: 50px; line-height: 1.2; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-4-item .hero-title { font-size: 40px; line-height: 1.2; } } @media (max-width: 575px) { .egx-hero-4-item .hero-title { font-size: 35px; line-height: 1.2; } } .egx-hero-4-item .hero-title .full-stop { color: var(--egx-pr-2); display: inline-block !important; } .egx-hero-4-item .hero-title .split-line { overflow: hidden; } .egx-hero-4-item .hero-title .split-line > div, .egx-hero-4-item .hero-title .split-line span { display: inline; transform: translateY(80px); transition: all 800ms ease; transition-delay: 0.3s; } .egx-hero-4-item .disc { margin-top: 30px; color: #0d0d0d; max-width: 490px; } .egx-hero-4-item .btn-wrap { margin-top: 40px; } .egx-hero-4-pagination { display: flex; flex-direction: column; align-items: center; gap: 32px; font-family: var(--urbanist); font-weight: 400; font-size: 16px; line-height: 30px; color: #717171; padding: 20px 10px; position: absolute; left: auto !important; right: 40px; bottom: 40px !important; top: auto !important; width: 80px !important; z-index: 4; transition: all 0.4s ease; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-4-pagination { right: 0; } } .egx-hero-4-pagination span { opacity: 1 !important; background: transparent; position: relative; } .egx-hero-4-pagination span::after { content: ""; position: absolute; left: -30px; bottom: -10px; width: 0; height: 2px; background: var(--egx-gd-2); transition: all 0.4s ease; } @media (max-width: 575px) { .egx-hero-4-pagination span::after { bottom: -15px; } } .egx-hero-4-pagination .swiper-pagination-bullet-active { font-weight: 700; font-size: 28px; color: #0d0d0d; transform: translateX(-5px); padding-bottom: 35px; } @media (max-width: 575px) { .egx-hero-4-pagination .swiper-pagination-bullet-active { font-size: 25px; padding-bottom: 25px; } } .egx-hero-4-pagination .swiper-pagination-bullet-active::after { width: 60px; } .egx-hero-inner-area .egx-container-2 { position: relative; } .egx-hero-inner-area .breadcrumb { position: absolute; bottom: 0; right: 0; display: flex; gap: 30px; align-items: center; padding: 13px 24px; background: #fff; margin-bottom: 0; } .egx-hero-inner-area .breadcrumb a { position: relative; } .egx-hero-inner-area .breadcrumb a:after { top: 5px; right: -22px; width: 20px; content: ""; height: 20px; position: absolute; background-image: url(../../../../../../../../themes/eergx/assets/img/bread-arrow.svg); } .egx-hero-inner-area .breadcrumb .link { font-family: var(--urbanist); font-weight: 500; font-size: 18px; line-height: 16px; color: #0d0d0d; text-transform: capitalize; transition: all 0.4s ease; } .egx-hero-inner-area .breadcrumb .link:hover { color: var(--egx-pr-1); } .egx-hero-inner-area .breadcrumb .current { font-family: var(--urbanist); font-weight: 500; font-size: 18px; line-height: 16px; color: #b1b1b1; text-transform: capitalize; transition: all 0.4s ease; } .egx-hero-inner-area .breadcrumb .current:hover { color: var(--egx-pr-1); } .egx-hero-inner-wrap { max-width: 650px; padding: 326px 0 186px 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-hero-inner-wrap { padding: 250px 0 150px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-inner-wrap { padding: 150px 0 150px 0; } } .egx-hero-inner-wrap .hero-inner-title { font-weight: 800; font-size: 70px; line-height: 76px; text-transform: capitalize; color: #0d0d0d; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-hero-inner-wrap .hero-inner-title { font-size: 60px; line-height: 1.1; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-inner-wrap .hero-inner-title { font-size: 55px; line-height: 1.1; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-hero-inner-wrap .hero-inner-title { font-size: 50px; line-height: 1.2; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-inner-wrap .hero-inner-title { font-size: 40px; line-height: 1.2; } } @media (max-width: 575px) { .egx-hero-inner-wrap .hero-inner-title { font-size: 35px; line-height: 1.2; } } .egx-hero-inner-wrap .disc { margin-top: 25px; color: #0d0d0d; max-width: 477px; } .egx-hero-inner-wrap .btn-wrap { margin-top: 40px; } .egx-hero-inner-wrap .btn-wrap .egx-btn-3 { box-shadow: none; } .egx-hero-career-area { padding: 327px 0 0 0; position: relative; overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-career-area { padding: 150px 0 100px 0; } } .egx-hero-career-area .hero-bg { position: absolute; top: 0; left: 0; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-career-area .hero-bg { width: 100%; height: 100%; } } .egx-hero-career-area .egx-hero-career-wrap { position: relative; } .egx-hero-career-area .egx-hero-career-wrap .hero-inner-title { max-width: 1000px; font-weight: 800; font-size: 70px; line-height: 76px; text-transform: capitalize; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-hero-career-area .egx-hero-career-wrap .hero-inner-title { font-size: 60px; line-height: 1.1; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-career-area .egx-hero-career-wrap .hero-inner-title { font-size: 55px; line-height: 1.1; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-hero-career-area .egx-hero-career-wrap .hero-inner-title { font-size: 50px; line-height: 1.2; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-hero-career-area .egx-hero-career-wrap .hero-inner-title { font-size: 40px; line-height: 1.2; } } @media (max-width: 575px) { .egx-hero-career-area .egx-hero-career-wrap .hero-inner-title { font-size: 35px; line-height: 1.2; } } .egx-hero-career-area .egx-hero-career-wrap .disc { color: #fff; max-width: 585px; margin-top: 30px; } .egx-hero-career-area .egx-hero-career-wrap .btn-wrap { margin-top: 40px; } .egx-hero-career-area .egx-hero-career-wrap .hero-img-wrap { margin-top: 122px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-career-area .egx-hero-career-wrap .hero-img-wrap { display: flex; gap: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-career-area .egx-hero-career-wrap .hero-img-wrap { display: flex; flex-direction: column; gap: 40px; } } .egx-hero-career-area .egx-hero-career-wrap .hero-img-wrap .img-1 img { border-radius: 16px; } .egx-hero-career-area .egx-hero-career-wrap .hero-img-wrap .img-2 { position: absolute; bottom: 60px; right: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-hero-career-area .egx-hero-career-wrap .hero-img-wrap .img-2 { position: relative; bottom: 180px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-hero-career-area .egx-hero-career-wrap .hero-img-wrap .img-2 { position: static; } } .egx-hero-career-area .egx-hero-career-wrap .hero-img-wrap .img-2 img { border-radius: 16px; } .egx-career_single-hero-area { padding: 260px 0 120px 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-career_single-hero-area { padding: 240px 0 120px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-career_single-hero-area { padding: 180px 0 120px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-career_single-hero-area { padding: 150px 0 100px 0; } } .egx-career_single-hero-area .breadcrumb { display: inline-flex; align-items: center; gap: 8px; } .egx-career_single-hero-area .breadcrumb .icon { font-size: 18px; color: #fff; transition: all 0.4s ease; } .egx-career_single-hero-area .breadcrumb .text { font-family: var(--urbanist); font-weight: 600; font-size: 18px; line-height: 22px; letter-spacing: 0.02em; color: #fff; transition: all 0.4s ease; } .egx-career_single-hero-area .breadcrumb:hover .icon { color: var(--egx-pr-1); } .egx-career_single-hero-area .breadcrumb:hover .text { color: var(--egx-pr-1); } .egx-career_single-hero-area .title-wrap { margin-top: 164px; max-width: 710px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-career_single-hero-area .title-wrap { margin-top: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-career_single-hero-area .title-wrap { margin-top: 70px; } } .egx-career_single-hero-area .title-wrap .hero-title { font-weight: 800; font-size: 80px; line-height: 88px; text-transform: capitalize; color: #fff; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-career_single-hero-area .title-wrap .hero-title { font-size: 70px; line-height: 76px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-career_single-hero-area .title-wrap .hero-title { font-size: 60px; line-height: 1.1; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-career_single-hero-area .title-wrap .hero-title { font-size: 55px; line-height: 1.1; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-career_single-hero-area .title-wrap .hero-title { font-size: 50px; line-height: 1.2; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-career_single-hero-area .title-wrap .hero-title { font-size: 40px; line-height: 1.2; } } @media (max-width: 575px) { .egx-career_single-hero-area .title-wrap .hero-title { font-size: 35px; line-height: 1.2; } } .egx-oops-hero-area { position: relative; height: 1040px; padding-bottom: 133px; display: flex; align-items: end; justify-content: center; overflow: hidden; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-oops-hero-area { height: 900px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-oops-hero-area { height: 800px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-oops-hero-area { height: 700px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-oops-hero-area { height: 650px; } } .egx-oops-hero-area .bg-img { position: absolute; bottom: 0; z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-oops-hero-area .bg-img { left: -200px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-oops-hero-area .bg-img { display: none; } } .egx-oops-hero-area .egx-oops-wrap { max-width: 436px; margin-left: auto; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-oops-hero-area .egx-oops-wrap { margin-left: 0; } } .egx-oops-hero-area .egx-oops-wrap .oops-title { font-family: var(--urbanist); font-weight: 400; font-size: 70px; line-height: 88px; letter-spacing: -0.02em; color: #717171; margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-oops-hero-area .egx-oops-wrap .oops-title { font-size: 55px; line-height: 66px; } } @media (max-width: 575px) { .egx-oops-hero-area .egx-oops-wrap .oops-title { font-size: 40px; line-height: 50px; } } .egx-oops-hero-area .egx-oops-wrap .oops-title-2 { font-family: var(--urbanist); font-weight: 700; font-size: 80px; line-height: 88px; letter-spacing: -0.02em; color: #209753; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-oops-hero-area .egx-oops-wrap .oops-title-2 { font-size: 55px; line-height: 66px; } } @media (max-width: 575px) { .egx-oops-hero-area .egx-oops-wrap .oops-title-2 { font-size: 40px; line-height: 50px; } } .egx-oops-hero-area .egx-oops-wrap .disc { color: #0d0d0d; margin-top: 15px; } .egx-oops-hero-area .egx-oops-wrap .btn { margin-top: 35px; box-shadow: none; border: none; } .egx-services-1-area { padding: 96px 0 170px 0; } @media (max-width: 575px) { .egx-services-1-area { padding: 90px 0 100px 0; } } .egx-services-1-top-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-services-1-top-wrap { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-services-1-top-wrap { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .egx-services-1-top-wrap { grid-template-columns: 1fr; } } .egx-services-1-card { position: relative; border-radius: 10px; overflow: hidden; transition: all 0.4s ease; } @media (max-width: 575px) { .egx-services-1-card { max-width: 300px; margin: 0 auto; } } .egx-services-1-card .card-img { position: relative; overflow: hidden; } .egx-services-1-card .card-img::after { content: ""; background: var(--egx-gd-1); position: absolute; left: 0; bottom: -3px; width: 100%; height: 3px; } .egx-services-1-card .card-img img { transition: all 0.4s ease; } .egx-services-1-card .number { color: rgb(170, 171, 172); line-height: 30px; font-weight: 900; position: absolute; top: 10px; right: 15px; transition: all 0.4s ease; } .egx-services-1-card .content { padding: 20px 20px 20px 32px; border-left: 2px solid rgb(250, 250, 250); border-right: 2px solid rgb(250, 250, 250); border-bottom: 2px solid rgb(250, 250, 250); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-services-1-card .content { padding: 20px; } } .egx-services-1-card .content .subtitle { font-size: 15px; line-height: 2; font-weight: 400; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .egx-services-1-card .content .title { font-size: 23px; color: rgb(0, 0, 0); line-height: 30px; font-weight: 900; } .egx-services-1-card:hover { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15); } .egx-services-1-card:hover .number { color: var(--egx-pr-1); border-color: var(--egx-pr-1); } .egx-services-1-card:hover .card-img img { transform: scaleX(1.1); } .egx-services-1-bottom-wrap { position: relative; margin-top: 129px; display: flex; align-items: center; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-services-1-bottom-wrap { flex-direction: column; gap: 40px; } } @media (max-width: 576px) { .egx-services-1-card .card-img img { width: 100%; } } @media (max-width: 575px) { .egx-services-1-bottom-wrap { margin-top: 100px; } } .egx-services-1-bottom-wrap .main-img { position: absolute; left: -100px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-services-1-bottom-wrap .main-img { left: -40px; max-width: 600px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-services-1-bottom-wrap .main-img { left: -30px; max-width: 550px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-services-1-bottom-wrap .main-img { position: static; } } .egx-services-1-bottom-wrap .services-content { max-width: 675px; margin-left: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-services-1-bottom-wrap .services-content { max-width: 570px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-services-1-bottom-wrap .services-content { margin-left: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-services-1-bottom-wrap .services-content { overflow: hidden; } } .egx-services-1-bottom-wrap .services-content .disc { color: rgb(113, 113, 113); margin-top: 20px; } .message-wrap { border-radius: 20px; background: var(--egx-gd-1); padding: 20px 40px; } @media (max-width: 575px) { .message-wrap { padding: 20px; } } .message-wrap .message { font-size: 15px; font-family: var(--urbanist); color: rgb(255, 255, 255); font-style: italic; line-height: 26px; margin-bottom: 0; } .list-mainarea { display: flex; flex-wrap: wrap; gap: 15px 27px; } .list-mainarea .item { display: grid; grid-template-columns: 27px auto; align-items: center; gap: 11px; } .list-mainarea .item .icon { width: 27px; height: 27px; border-radius: 50%; background-color: rgb(233, 233, 233); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #00b7ff; } .list-mainarea .item .item-text { font-size: 16px; font-family: var(--urbanist); color: rgb(0, 0, 0); font-weight: 700; line-height: 1; } .egx-services-1-bottom-wrap .services-content .action { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 29px; align-items: center; } .contact-wrapper { display: grid; grid-template-columns: 58px auto; gap: 12px; align-items: center; } .contact-wrapper .icon { background-color: rgb(41, 41, 41); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 26px; color: #fff; transition: all 0.3s ease; } .contact-wrapper .icon:hover { background-color: var(--egx-pr-1); } .contact-wrapper .icon:hover i { animation: egx_zigzag 0.4s ease; } .contact-wrapper .call .call-text { font-size: 17px; font-family: var(--urbanist); color: rgb(0, 0, 0); line-height: 1; display: block; } .contact-wrapper .call .call-link { font-size: 26px; font-family: var(--urbanist); font-weight: 900; color: rgb(0, 0, 0); line-height: 1; display: block; margin-top: 6px; transition: all 0.3s ease; } .contact-wrapper .call .call-link:hover { color: var(--egx-pr-1); } .egx-services-2-area .section-title-wrap { max-width: 650px; margin: 0 auto; text-align: center; } .egx-services-2-wrap { max-width: 975px; margin: 25px auto 0; } .egx-services-2-wrap .block__link:nth-child(1) .egx-services-2-item { border-top: 0; } .egx-services-2-wrap .block__link .egx-services-2-item { border-top: 3px solid rgb(24, 24, 24); } .egx-services-2-wrap .block__link .egx-services-2-item i { transform: rotate(45deg); } .egx-services-2-item { height: 140px; display: flex; align-items: center; justify-content: space-between; } .egx-services-3-area { padding: 255px 0 202px 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-services-3-area { padding: 110px 0; } } .egx-services-3-area .section-title-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 65px; align-items: center; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-services-3-area .section-title-wrap { grid-template-columns: 1fr; gap: 20px; } } .egx-services-3-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-services-3-wrap { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-services-3-wrap { grid-template-columns: 1fr; } } .egx-services-3-card { padding: 0 25px; position: relative; } .egx-services-3-card::after { content: ""; position: absolute; width: 100%; height: 82%; bottom: 0; left: 0; background-color: rgb(246, 246, 246); z-index: -1; border-radius: 0 0 20px 20px; } .egx-services-3-card .card-top { overflow: hidden; position: relative; } .egx-services-3-card .card-top .card-img { display: flex; justify-content: center; position: relative; transition: all 0.5s ease; } .egx-services-3-card .card-top .card-img:nth-child(1) { transform: translatex(50%) scalex(2); opacity: 0; filter: blur(10px); } .egx-services-3-card .card-top .card-img:nth-child(2) { position: absolute; top: 0; left: 0; } .egx-services-3-card .card-top .card-img::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background: var(--egx-gd-1); } .egx-services-3-card .card-top .card-img img { border-radius: 20px 20px 0 0; } .egx-services-3-card .card-content { padding: 15px 0 30px 0; } .egx-services-3-card .card-content .top { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 25px; } .egx-services-3-card .card-content .top .icon { width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--egx-gd-1); color: #fff; font-size: 25px; } .egx-services-3-card .card-content .top .title { font-size: 26px; color: rgb(0, 0, 0); font-weight: 800; transition: all 0.3s ease; } .egx-services-3-card .card-content .top .title:hover { color: var(--egx-pr-1); } .egx-services-3-card .card-content .disc { padding-left: 10px; margin-top: 20px; color: rgb(113, 113, 113); } @media (max-width: 575px) { .egx-services-3-card .card-content .disc { padding-left: 0; } } .egx-services-3-card:hover .card-top .card-img:nth-child(1) { transform: translatex(0) scalex(1); opacity: 1; filter: blur(0); } .egx-services-3-card:hover .card-top .card-img:nth-child(2) { transform: translatex(-50%) scalex(2); opacity: 0; filter: blur(10px); } .egx-services-3-card:hover .card-content .top .icon i { animation: bounceIn 0.8s ease; } .egx-services-4-area { padding: 140px 0; } .egx-services-4-area .section-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 25px 60px; align-items: end; } .egx-services-4-area .section-top .section-title-wrap { max-width: 720px; } .egx-services-4-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-services-4-wrap { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-services-4-wrap { grid-template-columns: 1fr; } } .egx-services-4-card { padding: 40px; overflow: hidden; position: relative; } .egx-services-4-card::after { content: ""; position: absolute; width: 0; height: 184px; left: -62px; top: -20px; background: linear-gradient( 90deg, rgba(32, 151, 83, 0) 21.4%, rgba(85, 172, 69, 0.4) 66%, #b9d32a 100% ); transform: rotate(39.53deg); border-radius: 50%; transition: all 0.6s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-services-4-card:nth-child(2) { border-radius: 0 16px 16px 0; } .egx-services-4-card:nth-child(3) { border-radius: 16px 0 0 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-services-4-card { border-radius: 16px !important; } } @media (max-width: 575px) { .egx-services-4-card { padding: 40px 30px; } } .egx-services-4-card:nth-child(1) { border-radius: 16px 0 0 16px; } .egx-services-4-card:nth-child(4) { border-radius: 0 16px 16px 0; } .egx-services-4-card .icon { width: 136px; height: 136px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(13, 13, 13, 0.16); position: relative; z-index: 2; } .egx-services-4-card .icon img { max-width: 104px; } .egx-services-4-card .title { font-weight: 800; font-size: 28px; line-height: 32px; letter-spacing: -1px; text-transform: uppercase; color: #fff; margin-top: 35px; } .egx-services-4-card .disc { font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.88); margin-top: 28px; } .egx-services-4-card .link { width: 56px; height: 56px; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.12); border-radius: 50%; margin-top: 28px; font-size: 18px; color: var(--egx-pr-2); position: relative; transition: all 0.4s ease; transform: rotate(-45deg); } .egx-services-4-card .link i { position: relative; z-index: 2; } .egx-services-4-card .link::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: var(--egx-gd-2); transform: scale(0); transition: all 0.4s ease; } .egx-services-4-card .link:hover { color: #fff; transform: rotate(0deg); } .egx-services-4-card .link:hover::after { transform: scale(1); } .egx-services-4-card:hover::after { width: 251px; } .egx-services-5-area { padding: 120px 0; overflow: hidden; } .egx-services-5-area .section-title-wrap { max-width: 900px; margin: 0 auto; text-align: center; } .egx-services-5-wrap { margin-top: 55px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-services-5-wrap { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-services-5-wrap { grid-template-columns: 1fr; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-services-details-area { padding: 150px 0 120px 0; } } .egx-services-details-area .top-shape { position: absolute; right: 0; top: 180px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-services-details-area .top-shape { max-width: 500px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-services-details-area .top-shape { max-width: 300px; } } @media (max-width: 575px) { .egx-services-details-area .top-shape { display: none; } } .egx-services-details-area .top-wrap .breadcrumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; } .egx-services-details-area .top-wrap .breadcrumb .icon { font-size: 18px; color: #209753; transition: all 0.4s ease; } .egx-services-details-area .top-wrap .breadcrumb .text { font-family: var(--urbanist); font-weight: 600; font-size: 18px; line-height: 22px; letter-spacing: 0.02em; color: #209753; transition: all 0.4s ease; } .egx-services-details-area .top-wrap .breadcrumb:hover .icon { color: var(--egx-pr-1); } .egx-services-details-area .top-wrap .breadcrumb:hover .text { color: var(--egx-pr-1); } .egx-services-details-area .top-wrap .title-wrap { max-width: 600px; margin-top: 96px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-services-details-area .top-wrap .title-wrap { margin-top: 50px; } } @media (max-width: 575px) { .egx-services-details-area .top-wrap .title-wrap { margin-top: 40px; } } .egx-services-details-area .top-wrap .title-wrap .hero-title { font-weight: 800; font-size: 80px; line-height: 88px; text-transform: capitalize; color: #0d0d0d; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-services-details-area .top-wrap .title-wrap .hero-title { font-size: 70px; line-height: 76px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-services-details-area .top-wrap .title-wrap .hero-title { font-size: 60px; line-height: 1.1; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-services-details-area .top-wrap .title-wrap .hero-title { font-size: 55px; line-height: 1.1; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-services-details-area .top-wrap .title-wrap .hero-title { font-size: 50px; line-height: 1.2; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-services-details-area .top-wrap .title-wrap .hero-title { font-size: 40px; line-height: 1.2; } } @media (max-width: 575px) { .egx-services-details-area .top-wrap .title-wrap .hero-title { font-size: 35px; line-height: 1.2; } } .egx-services-details-area .thumbnails-1 { max-width: 1688px; padding: 0 24px; margin: 70px auto; position: relative; z-index: 2; } .egx-services-details-area .thumbnails-1 .img-cover { border-radius: 20px; overflow: hidden; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-services-details-area .thumbnails-1 .img-cover { border-radius: 10px; } } @media (max-width: 575px) { .egx-services-details-area .thumbnails-1 .img-cover { border-radius: 6px; } } .egx-services-details-area .thumb-2 { border-radius: 12px; } @media (max-width: 575px) { .egx-services-details-area .thumb-2 { border-radius: 6px; } } .egx-services-details-area .client-say { margin: 55px auto 0; max-width: 730px; } .egx-services-details-area .client-say .title { font-size: 32px; line-height: 40px; color: #0d0d0d; } @media (max-width: 575px) { .egx-services-details-area .client-say .title { font-size: 26px; line-height: 34px; } } .egx-services-details-area .client-say .client-wrap { margin-top: 35px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-services-details-area .client-say .client-wrap { grid-template-columns: 1fr; } } .egx-services-details-area .client-say .client-wrap .client-card { background: #f6f6f6; border-radius: 12px; padding: 32px 28px; } .egx-services-details-area .client-say .client-wrap .client-card .author { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .egx-services-details-area .client-say .client-wrap .client-card .author .auth-img { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto; } .egx-services-details-area .client-say .client-wrap .client-card .author .auth-cont { flex: 0 0 auto; } .egx-services-details-area .client-say .client-wrap .client-card .author .auth-cont .name { font-family: var(--urbanist); font-weight: 600; font-size: 18px; line-height: 22px; color: #0d0d0d; } .egx-services-details-area .client-say .client-wrap .client-card .author .auth-cont .designation { font-family: var(--urbanist); font-weight: 400; font-size: 15px; line-height: 18px; color: #0d0d0d; } .egx-services-details-area .client-say .client-wrap .client-card .rating { margin-top: 24px; display: flex; align-items: center; gap: 8px; } .egx-services-details-area .client-say .client-wrap .client-card .rating i { font-size: 14px; color: #fca804; } .egx-services-details-area .client-say .client-wrap .client-card .disc { margin-top: 25px; line-height: 26px; color: rgba(13, 13, 13, 0.88); } .egx-services-details-area .faq-wrap { max-width: 730px; margin: 55px auto 0; } .egx-services-details-area .faq-wrap .title { font-size: 32px; line-height: 44px; color: #0d0d0d; margin-bottom: 30px; } @media (max-width: 575px) { .egx-services-details-area .faq-wrap .title { font-size: 26px; line-height: 34px; } } .egx-services-details-area .faq-wrap .egx-faq-1-right .accordion .accordion-item .accordion-body { max-width: 690px; } .egx-services-details-area .gallery-wrap { max-width: 1058px; margin: 55px auto 0; } .egx-services-details-area .gallery-wrap .title-wrap { max-width: 730px; margin: 0 auto 35px; } .egx-services-details-area .gallery-wrap .title-wrap .title { font-size: 32px; line-height: 40px; text-transform: uppercase; color: #0d0d0d; } @media (max-width: 575px) { .egx-services-details-area .gallery-wrap .title-wrap .title { font-size: 26px; line-height: 34px; } } .egx-services-details-area .gallery-wrap .gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 32px; } .egx-services-details-area .gallery-wrap .gallery .gallery-item { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 4px; overflow: hidden; } .egx-services-details-area .gallery-wrap .gallery .gallery-item::after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(5, 6, 8, 0.5); opacity: 0; transition: all 0.4s ease; } .egx-services-details-area .gallery-wrap .gallery .gallery-item .icon-1 { position: absolute; width: 80px; height: 80px; border-radius: 100%; background: var(--egx-gd-1); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; transform: scale(2); opacity: 0; z-index: 2; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } @media (max-width: 575px) { .egx-services-details-area .gallery-wrap .gallery .gallery-item .icon-1 { width: 70px; height: 70px; font-size: 25px; } } .egx-services-details-area .gallery-wrap .gallery .gallery-item:hover::after { opacity: 1; } .egx-services-details-area .gallery-wrap .gallery .gallery-item:hover .icon-1 { opacity: 1; transform: scale(1); } .egx-services-details-area .contact-wrap { max-width: 522px; margin: 70px auto 0; } .egx-services-details-area .contact-wrap .title { font-size: 44px; line-height: 48px; letter-spacing: -1px; color: #0d0d0d; } @media (max-width: 575px) { .egx-services-details-area .contact-wrap .title { font-size: 30px; line-height: 38px; } } .egx-services-details-area .contact-wrap form { margin-top: 55px; display: flex; flex-direction: column; gap: 24px; max-width: 384px; } .egx-services-details-area .contact-wrap form .item { position: relative; } .egx-services-details-area .contact-wrap form .item:focus-within label { color: #209753; } .egx-services-details-area .contact-wrap form .item:focus-within::after { width: 100%; } .egx-services-details-area .contact-wrap form .item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 1px; background-color: #000; z-index: 2; transition: all 0.5s ease; } .egx-services-details-area .contact-wrap form .item label { font-family: var(--urbanist); font-weight: 400; font-size: 14px; line-height: 17px; color: rgba(13, 13, 13, 0.56); display: block; transition: color 0.3s ease; } .egx-services-details-area .contact-wrap form .item input { border: none; background-color: transparent; position: relative; outline: none; border-bottom: 1px solid #ced3ca; font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 19px; color: #0d0d0d; width: 100%; padding-bottom: 6px; } .egx-services-details-area .contact-wrap form .item input::placeholder { font-weight: 400; color: rgba(13, 13, 13, 0.8); } .egx-services-details-area .contact-wrap form .item textarea { border: none; background-color: transparent; position: relative; outline: none; border-bottom: 1px solid #ced3ca; font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 19px; color: #0d0d0d; width: 100%; margin-top: 10px; height: 74px; } .egx-services-details-area .contact-wrap form .item textarea::placeholder { font-weight: 400; color: rgba(13, 13, 13, 0.8); } .egx-services-details-area .contact-wrap form .item:nth-last-child(2)::after { bottom: 10px; } .egx-services-details-area .contact-wrap form .btn { align-self: self-start; box-shadow: none; border: none; outline: none; } .egx-services-details-content { max-width: 730px; margin: 0 auto; } .egx-services-details-content p { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 30px; color: #0d0d0d; margin-bottom: 0; } .egx-services-details-content h4 { font-family: var(--urbanist); font-weight: 700; font-size: 32px; line-height: 42px; color: #0d0d0d; margin: 45px 0 26px 0; } @media (max-width: 575px) { .egx-services-details-content h4 { font-size: 26px; line-height: 34px; } } .egx-services-details-content ul { display: flex; flex-direction: column; gap: 12px; } .egx-services-details-content ul li { display: inline-flex; gap: 12px; align-items: baseline; font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 30px; color: #0d0d0d; } .egx-services-details-content ul li img { transform: translateY(5px); } .egx-services-details-feature { display: flex; flex-direction: column; gap: 28px; max-width: 730px; margin: 35px auto 64px; } .egx-services-details-feature .item { position: relative; display: flex; align-items: center; } .egx-services-details-feature .item .icon { width: 78px; height: 78px; background: #209753; display: flex; align-items: center; justify-content: center; position: absolute; } @media (max-width: 575px) { .egx-services-details-feature .item .icon { top: 20px; left: 20px; } } .egx-services-details-feature .item .icon:hover img { animation: bounceIn 0.8s ease; } .egx-services-details-feature .item .content { background: #fff; border: 1px solid rgba(0, 57, 54, 0.12); padding: 26px 32px 26px 69px; max-width: 693px; margin-left: auto; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-services-details-feature .item .content { padding: 26px 32px 26px 95px; } } @media (max-width: 575px) { .egx-services-details-feature .item .content { padding: 120px 25px 25px 25px; } } .egx-services-details-feature .item .content .title { font-size: 20px; line-height: 24px; color: #0d0d0d; } .egx-services-details-feature .item .content .disc { font-weight: 400; font-size: 16px; line-height: 26px; color: rgba(13, 13, 13, 0.72); margin-top: 10px; } .egx-cta-1-area { margin-bottom: -272px; position: relative; } .egx-cta-1-wrap { background: -moz-linear-gradient( 90deg, rgba(124, 165, 204, 0.99608) 0%, rgb(207, 231, 254) 100% ); background: -webkit-linear-gradient( 90deg, rgba(124, 165, 204, 0.99608) 0%, rgb(207, 231, 254) 100% ); background: -ms-linear-gradient( 90deg, rgba(124, 165, 204, 0.99608) 0%, rgb(207, 231, 254) 100% ); padding: 39px 66px 0 66px; display: grid; grid-template-columns: 1fr 1.74fr; gap: 120px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-cta-1-wrap { padding-bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-cta-1-wrap { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 575px) { .egx-cta-1-wrap { padding: 35px 20px; } } .egx-cta-1-wrap .section-title-wrap { margin-top: 56px; } @media (max-width: 575px) { .egx-cta-1-wrap .section-title-wrap { margin-top: 0; } } .egx-cta-1-wrap .section-title-wrap .cta-title { font-size: 50px; font-weight: 900; font-family: var(--urbanist); color: rgb(0, 0, 0); line-height: 1.1; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-cta-1-wrap .section-title-wrap .cta-title { font-size: 45px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-cta-1-wrap .section-title-wrap .cta-title { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-cta-1-wrap .section-title-wrap .cta-title { font-size: 35px; } } @media (max-width: 575px) { .egx-cta-1-wrap .section-title-wrap .cta-title { font-size: 30px; } } .egx-cta-1-wrap .section-title-wrap .btn-wrap { margin-top: 35px; } .egx-cta-1-wrap .cta-content { display: flex; position: relative; gap: 28px; align-items: center; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-cta-1-wrap .cta-content { flex-direction: column-reverse; } } .egx-cta-1-wrap .cta-content .savings { border-radius: 50%; background-color: rgb(220, 179, 0); box-shadow: 0 10px 11.96px 1.04px rgba(28, 36, 104, 0.13); width: 139px; height: 139px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; bottom: 65px; left: -65px; z-index: 2; animation: bounce_y_30 10s linear infinite; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-cta-1-wrap .cta-content .savings { left: -60px; } } @media (max-width: 575px) { .egx-cta-1-wrap .cta-content .savings { display: none; } } .egx-cta-1-wrap .cta-content .savings .number { font-size: 48px; font-family: var(--urbanist); font-weight: 800; color: rgb(0, 0, 0); line-height: 1; } .egx-cta-1-wrap .cta-content .savings .number .parcent { font-weight: 400; } .egx-cta-1-wrap .cta-content .savings .title { font-size: 21px; font-family: var(--urbanist); color: rgb(0, 0, 0); line-height: 1; } .egx-cta-1-wrap .cta-content .main-img { position: relative; z-index: 2; margin-top: -140px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-cta-1-wrap .cta-content .main-img { margin-top: -80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-cta-1-wrap .cta-content .main-img { margin-top: 0; } } @media (max-width: 575px) { .egx-cta-1-wrap .cta-content .main-img { display: none; } } .egx-cta-1-wrap .cta-content .feature { display: flex; flex-direction: column; gap: 23px; max-width: 160px; margin-top: 35px; } .egx-cta-1-wrap .cta-content .feature .item { display: grid; grid-template-columns: 65px auto; gap: 13px; align-items: center; } .egx-cta-1-wrap .cta-content .feature .item:nth-child(even) .icon { background-color: rgb(251, 204, 0); } .egx-cta-1-wrap .cta-content .feature .item .icon { display: flex; align-items: center; justify-content: center; width: 65px; height: 65px; border-radius: 50%; background-color: #fff; font-size: 26px; transition: all 0.3s ease; } .egx-cta-1-wrap .cta-content .feature .item .icon:hover i { animation: egx_zigzag 0.4s ease; } .egx-cta-1-wrap .cta-content .feature .item .title { font-size: 18px; font-weight: 700; line-height: 1.111; } @-webkit-keyframes bounce_y_30 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .egx-cta-2-area { padding: 82px 0 72px 0; } .egx-cta-2-wrap { max-width: 610px; background: var(--egx-gd-1); padding: 80px 60px 60px 57px; border-radius: 20px; } @media (max-width: 575px) { .egx-cta-2-wrap { padding: 40px 30px; } } .egx-cta-2-wrap .disc { max-width: 430px; line-height: 24px; color: rgb(233, 233, 233); margin-top: 20px; } .egx-cta-2-wrap .btn-wrap { margin-top: 35px; } .egx-solar-panel-1-area { padding: 360px 0 98px 0; } .egx-solar-panel-1-area .section-title-wrap { max-width: 565px; margin: 0 auto; text-align: center; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-solar-panel-1-area .section-title-wrap { overflow: hidden; } } .egx-solar-panel-1-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px 29px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-solar-panel-1-wrap { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-solar-panel-1-wrap { grid-template-columns: 1fr; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-solar-panel-1-wrap { overflow: hidden; } } .egx-solar-panel-1-card { padding: 0 25px 35px 25px; position: relative; overflow: hidden; } .egx-solar-panel-1-card::after { content: ""; background-color: rgb(21, 35, 48); position: absolute; left: 0; bottom: 0; width: 100%; height: 75.5%; } .egx-solar-panel-1-card .card-img { position: relative; z-index: 2; transition: all 0.4s ease; } .egx-solar-panel-1-card .card-img::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; background: var(--egx-gd-1); height: 3px; } .egx-solar-panel-1-card .card-content { padding: 19px 10px 0; position: relative; z-index: 2; } .egx-solar-panel-1-card .card-content .title-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 21px; } .egx-solar-panel-1-card .card-content .title-wrap .icon { border-radius: 50%; background-color: rgb(255, 255, 255); box-shadow: 0 10px 11.96px 1.04px rgba(28, 36, 104, 0.13); width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #000; position: relative; overflow: hidden; transition: all 0.3s ease; } .egx-solar-panel-1-card .card-content .title-wrap .icon::after { content: ""; position: absolute; width: 100%; height: 100%; background: var(--egx-gd-1); border-radius: 50%; transform: scale(0); transition: all 0.3s ease; } .egx-solar-panel-1-card .card-content .title-wrap .icon i { position: relative; z-index: 2; } .egx-solar-panel-1-card .card-content .title-wrap .icon:hover { color: #fff; } .egx-solar-panel-1-card .card-content .title-wrap .icon:hover::after { transform: scale(1); } .egx-solar-panel-1-card .card-content .title-wrap .icon:hover i { animation: egx_zigzag 0.4s ease; } .egx-solar-panel-1-card .card-content .title-wrap .title { font-size: 25px; font-weight: 900; color: #fff; font-family: var(--urbanist); transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } .egx-solar-panel-1-card .card-content .title-wrap .title a { background-image: linear-gradient(currentColor, currentColor); background-position: 0% 94%; background-repeat: no-repeat; background-size: 0% 1.5px; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } .egx-solar-panel-1-card .card-content .title-wrap .title:hover { color: var(--egx-pr-1); } .egx-solar-panel-1-card .card-content .title-wrap .title:hover a { background-size: 100% 1.5px; } .egx-solar-panel-1-card .card-content .disc { margin-top: 22px; color: rgb(191, 191, 191); } .egx-solar-panel-1-card:hover .card-img { transform: scaleX(1.15); } .egx-benefit-1-area .shape-1 { position: absolute; bottom: -70px; right: 6px; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-benefit-1-area .shape-1 { max-width: 400px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-benefit-1-area .shape-1 { max-width: 300px; bottom: 0; } } @media (max-width: 575px) { .egx-benefit-1-area .shape-1 { max-width: 200px; bottom: 0; } } .egx-benefit-1-area .section-title-wrap { max-width: 620px; margin: 0 auto; text-align: center; } .egx-benefit-1-wrap { margin-top: 50px; display: grid; grid-template-columns: 1.66fr 1fr; gap: 54px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-benefit-1-wrap { grid-template-columns: 1fr; } } .egx-benefit-1-wrap:is(.benefit-1-wrap-inner) { grid-template-columns: repeat(3, 1fr); gap: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-benefit-1-wrap:is(.benefit-1-wrap-inner) { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-benefit-1-wrap:is(.benefit-1-wrap-inner) { grid-template-columns: 1fr; } } .egx-benefit-1-wrap .benefit-left { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-benefit-1-wrap .benefit-left { grid-template-columns: 1fr; gap: 50px; } } .egx-benefit-1-wrap .benefit-right .title { font-family: var(--urbanist); color: rgb(13, 13, 13); font-weight: 900; font-size: 25px; line-height: 30px; } .egx-benefit-1-wrap .benefit-right .disc { color: rgb(113, 113, 113); margin-top: 20px; } .benefit-progress .progress-item .progress-title { font-family: var(--urbanist); color: rgb(4, 4, 4); font-weight: 700; font-size: 16px; line-height: 30px; } .benefit-progress .progress-item .progress { background-color: rgb(238, 238, 238); height: 12px; border-radius: 5px; position: relative; z-index: 2; overflow: visible; } .benefit-progress .progress-item .progress .progress-bar { background: var(--egx-gd-1); height: 12px; width: 0; border-radius: 5px; position: relative; z-index: -1; -webkit-transition: 1s all ease-in-out; transition: 1s all ease-in-out; } .benefit-progress .progress-item .progress span { font-size: 15px; font-family: var(--urbanist); color: rgb(4, 4, 4); font-weight: 800; line-height: 1.6; position: absolute; right: 0; top: -26px; } .egx-benefit-1-wrap .benefit-right .btn-wrap { margin-top: 66px; } .egx-benefit-1-card { overflow: hidden; } .egx-benefit-1-card .card-top { border-radius: 20px; background: -moz-linear-gradient( 90deg, rgba(213, 255, 230, 0.99608) 0%, rgb(244, 255, 231) 100% ); background: -webkit-linear-gradient( 90deg, rgba(213, 255, 230, 0.99608) 0%, rgb(244, 255, 231) 100% ); background: -ms-linear-gradient( 90deg, rgba(213, 255, 230, 0.99608) 0%, rgb(244, 255, 231) 100% ); padding: 30px 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; justify-content: center; } .egx-benefit-1-card .card-top .icon { transition: all 0.4s ease; } .egx-benefit-1-card .card-top .price { font-size: 45px; font-family: var(--urbanist); color: rgb(13, 13, 13); line-height: 1; font-weight: 900; margin-bottom: 0; } @media (max-width: 575px) { .egx-benefit-1-card .card-top .price { font-size: 35px; } } .egx-benefit-1-card .card-top .price .dollar { font-size: 20px; display: inline-block; transform: translateY(-18px); } @media (max-width: 575px) { .egx-benefit-1-card .card-top .price .dollar { transform: translateY(-10px); } } .egx-benefit-1-card .card-top .price .type { font-size: 16px; font-weight: 400; text-transform: uppercase; } .egx-benefit-1-card .card-top .title { font-size: 32px; color: rgb(13, 13, 13); line-height: 1.2; font-weight: 900; } @media (max-width: 575px) { .egx-benefit-1-card .card-top .title { font-size: 26px; } } .egx-benefit-1-card .card-img { margin-top: 15px; border-radius: 20px; overflow: hidden; } .egx-benefit-1-card .card-img img { transition: all 0.4s ease; } .egx-benefit-1-card .card-body { border-radius: 20px; background: -moz-linear-gradient( 90deg, rgba(213, 255, 230, 0.99608) 0%, rgb(244, 255, 231) 100% ); background: -webkit-linear-gradient( 90deg, rgba(213, 255, 230, 0.99608) 0%, rgb(244, 255, 231) 100% ); background: -ms-linear-gradient( 90deg, rgba(213, 255, 230, 0.99608) 0%, rgb(244, 255, 231) 100% ); margin-top: 14px; padding: 57px 30px 43px 54px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-benefit-1-card .card-body { padding: 50px 30px 40px 30px; } } .egx-benefit-1-card .card-body ul { display: flex; flex-direction: column; gap: 17px; } .egx-benefit-1-card .card-body ul li { display: grid; align-items: baseline; gap: 11px; grid-template-columns: 27px auto; } .egx-benefit-1-card .card-body ul li .icon { border-radius: 50%; background: var(--egx-gd-1); width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; } .egx-benefit-1-card .card-body ul li .list-text { font-size: 16px; font-weight: 700; font-family: var(--urbanist); color: #000; } .egx-benefit-1-card .card-body .btn-wrap { margin-top: 30px; } .egx-benefit-1-card:hover .card-top .icon { transform: rotate(180deg); } .egx-benefit-1-card:hover .card-img img { transform: scale(1.1); } .egx-benefit-2-area { padding: 120px 0; } .egx-benefit-2-area .section-title-wrap { max-width: 695px; margin: 0 auto; text-align: center; } .egx-benefit-2-wrap { margin-top: 55px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-benefit-2-wrap { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-benefit-2-wrap { grid-template-columns: 1fr; } } .egx-benefit-2-card { padding: 40px; background: #fff; border: 1px solid rgba(0, 57, 54, 0.16); border-radius: 8px; } @media (max-width: 575px) { .egx-benefit-2-card { padding: 30px; } } .egx-benefit-2-card .icon { display: inline-block; } .egx-benefit-2-card .title { margin-top: 24px; font-family: var(--urbanist); font-weight: 700; font-size: 22px; line-height: 30px; color: #0d0d0d; } .egx-benefit-2-card .disc { font-weight: 400; font-size: 16px; line-height: 26px; color: #717171; margin-top: 22px; } .egx-benefit-2-card:hover .icon img { animation: bounceIn 0.8s ease; } .egx-energy-1-top { display: grid; grid-template-columns: 630px auto; gap: 200px; align-items: center; max-width: 1040px; margin: 0 auto; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-energy-1-top { gap: 130px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-energy-1-top { display: flex; flex-direction: column; gap: 20px; align-items: center; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-1-top { display: flex; flex-direction: column; gap: 0; align-items: center; } } .egx-energy-1-top .section-title-wrap .energy-title { font-size: 66px; font-family: var(--urbanist); line-height: 1; font-weight: 900; text-align: end; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-energy-1-top .section-title-wrap .energy-title { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-energy-1-top .section-title-wrap .energy-title { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-energy-1-top .section-title-wrap .energy-title { font-size: 37px; } } @media (max-width: 575px) { .egx-energy-1-top .section-title-wrap .energy-title { font-size: 30px; margin-bottom: 2px; } } .egx-energy-1-top .section-title-wrap .energy-title-big { font-size: 192px; line-height: 234px; font-family: var(--urbanist); font-weight: 900; text-align: end; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0; margin-top: -75px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-energy-1-top .section-title-wrap .energy-title-big { font-size: 165px; line-height: 200px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-energy-1-top .section-title-wrap .energy-title-big { font-size: 135px; line-height: 200px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-energy-1-top .section-title-wrap .energy-title-big { font-size: 110px; line-height: 190px; } } @media (max-width: 575px) { .egx-energy-1-top .section-title-wrap .energy-title-big { font-size: 90px; line-height: 175px; } } .egx-energy-1-top .cloud-2 { position: absolute; top: -80px; right: -350px; animation: cloude_2_anim 20s linear infinite; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-1-top .cloud-2 { display: none; } } .egx-energy-1-wrap { position: relative; display: grid; grid-template-columns: auto 340px; gap: 90px; margin-top: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-1-wrap { grid-template-columns: 1fr; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-1-wrap { margin-top: 50px; } } .egx-energy-1-wrap .cloud-1 { position: absolute; top: -165px; left: -223px; animation: scale_down_up 15s linear infinite; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-energy-1-wrap .cloud-1 { top: -100px; left: -100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-1-wrap .cloud-1 { display: none; } } .egx-energy-1-wrap .energy-left:is(.active) .main-img { transform: translateX(0); } .egx-energy-1-wrap .energy-left:is(.active) .saving { transform: translateY(0); } .egx-energy-1-wrap .energy-left .main-img { position: absolute; bottom: -35px; left: -180px; z-index: 2; transform: translateX(-180px); transition: 1500ms var(--cube-1); } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-energy-1-wrap .energy-left .main-img { max-width: 900px; left: 0; bottom: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-energy-1-wrap .energy-left .main-img { max-width: 850px; left: 0; bottom: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-1-wrap .energy-left .main-img { position: static; } } .egx-energy-1-wrap .energy-left .shape-bg { position: absolute; bottom: -40px; left: 200px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-energy-1-wrap .energy-left .shape-bg { max-width: 550px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-1-wrap .energy-left .shape-bg { display: none; } } .egx-energy-1-wrap .energy-left .saving { border-radius: 50%; background-color: rgb(255, 255, 255); box-shadow: 0 30px 73.6px 6.4px rgba(32, 41, 96, 0.25); position: absolute; width: 166px; height: 166px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; bottom: 10px; right: 525px; z-index: 3; transform: translateY(100px); transition: 1000ms var(--cube-1); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-energy-1-wrap .energy-left .saving { top: 300px; bottom: auto; right: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-energy-1-wrap .energy-left .saving { top: 250px; bottom: auto; right: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-energy-1-wrap .energy-left .saving { top: 170px; bottom: auto; right: 100px; width: 150px; height: 150px; } } @media (max-width: 575px) { .egx-energy-1-wrap .energy-left .saving { top: 90px; bottom: auto; right: 30px; width: 135px; height: 135px; } } .egx-energy-1-wrap .energy-left .saving .number { font-size: 65px; font-family: var(--urbanist); font-weight: 700; line-height: 1; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0; } .egx-energy-1-wrap .energy-left .saving .number .parcent { font-weight: 400; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-energy-1-wrap .energy-left .saving .number { font-size: 50px; } } @media (max-width: 575px) { .egx-energy-1-wrap .energy-left .saving .number { font-size: 40px; } } .egx-energy-1-wrap .energy-left .saving .title { font-size: 28px; font-weight: 900; line-height: 1.3; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: -10px; } @media (max-width: 575px) { .egx-energy-1-wrap .energy-left .saving .title { font-size: 24px; } } .egx-energy-1-wrap .energy-right { display: flex; flex-direction: column; gap: 55px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-1-wrap .energy-right { align-items: center; } } .egx-energy-1-wrap .energy-right .item { display: grid; grid-template-columns: 102px auto; gap: 20px; align-items: center; max-width: 240px; } @media (max-width: 575px) { .egx-energy-1-wrap .energy-right .item { grid-template-columns: 90px auto; } } .egx-energy-1-wrap .energy-right .item:nth-child(odd) .icon { background: #fff; color: rgb(33, 151, 83); } .egx-energy-1-wrap .energy-right .item:nth-child(2) { transform: translateX(90px); } @media (max-width: 575px) { .egx-energy-1-wrap .energy-right .item:nth-child(2) { transform: translateX(0); } } .egx-energy-1-wrap .energy-right .item:nth-child(3) { transform: translateX(100px); } @media (max-width: 575px) { .egx-energy-1-wrap .energy-right .item:nth-child(3) { transform: translateX(0); } } .egx-energy-1-wrap .energy-right .item:nth-child(4) { transform: translateX(30px); } @media (max-width: 575px) { .egx-energy-1-wrap .energy-right .item:nth-child(4) { transform: translateX(0); } } .egx-energy-1-wrap .energy-right .item .icon { border-radius: 50%; background: var(--egx-gd-1); width: 102px; height: 102px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff; } @media (max-width: 575px) { .egx-energy-1-wrap .energy-right .item .icon { width: 90px; height: 90px; font-size: 35px; } } .egx-energy-1-wrap .energy-right .item .icon:hover i { animation: egx_zigzag 0.4s ease; } .egx-energy-1-wrap .energy-right .item .title { font-size: 25px; font-family: var(--urbanist); color: rgb(255, 255, 255); font-weight: 800; line-height: 1; } @keyframes cloude_2_anim { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } @keyframes scale_down_up { 0% { transform: scale(1); } 50% { transform: scale(0.9); } 100% { transform: scale(1); } } .egx-energy-2-area { padding: 145px 0 150px 0; overflow: hidden; } .egx-energy-2-wrap { position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-2-wrap { display: flex; flex-direction: column-reverse; gap: 50px; align-items: center; } } .egx-energy-2-left { position: absolute; bottom: 0; z-index: -1; left: -140px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-energy-2-left { left: -50px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-energy-2-left { left: -30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-2-left { position: static; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-energy-2-left .main-img { max-width: 660px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-energy-2-left .main-img { max-width: 550px; } } .egx-energy-2-left .rated { position: absolute; right: -80px; bottom: 215px; display: flex; align-items: center; gap: 8px; border-radius: 26px; background-color: rgb(255, 255, 255); box-shadow: 0 7px 95px 0 rgba(0, 0, 0, 0.07); padding: 13.5px 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-2-left .rated { right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-energy-2-left .rated { bottom: 300px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-energy-2-left .rated { bottom: 200px; } } @media (max-width: 575px) { .egx-energy-2-left .rated { display: none; } } .egx-energy-2-left .rated .icon { color: gold; font-size: 16px; } .egx-energy-2-left .rated .title { font-size: 16px; color: #101c26; } .egx-energy-2-right { max-width: 670px; margin-left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-2-right { margin-left: 0; } } .egx-energy-2-right .disc { margin-top: 18px; } .egx-energy-2-right .content { margin-top: 50px; max-width: 600px; margin-left: 55px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-2-right .content { margin-left: 0; } } @media (max-width: 575px) { .egx-energy-2-right .content { grid-template-columns: 1fr; } } .egx-energy-2-right .content .content-left { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; max-height: 185px; } @media (max-width: 575px) { .egx-energy-2-right .content .content-left { max-width: 240px; } } .egx-energy-2-right .content .content-left .item { background: var(--egx-gd-1); height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px 5px; border-radius: 100px; position: relative; } .egx-energy-2-right .content .content-left .item:nth-child(2) { height: 135px; } .egx-energy-2-right .content .content-left .item:nth-child(2)::after { height: 40px; } .egx-energy-2-right .content .content-left .item:nth-child(3) { height: 183px; } .egx-energy-2-right .content .content-left .item:nth-child(3)::after { height: 80px; } .egx-energy-2-right .content .content-left .item::after { content: ""; position: absolute; width: 4px; height: 16px; background: var(--egx-gd-1); border-radius: 2px; top: 47%; transform: translateY(-50%); } .egx-energy-2-right .content .content-left .item .title { display: flex; align-content: center; justify-content: center; font-size: 16px; color: #fff; } .egx-energy-2-right .content .content-right .topper { padding-left: 26px; position: relative; } .egx-energy-2-right .content .content-right .topper::after { content: ""; position: absolute; width: 5px; height: 100%; border-radius: 2.5px; background: var(--egx-gd-1); top: 0; left: 0; } .egx-energy-2-right .content .content-right .topper .subtitle { font-size: 15px; font-family: var(--urbanist); line-height: 1.3; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .egx-energy-2-right .content .content-right .topper .title { font-size: 30px; color: rgb(20, 21, 21); line-height: 1.129; font-weight: 900; text-transform: none; } .egx-energy-2-right .content .content-right ul { margin-top: 25px; } .egx-energy-2-right .content .content-right ul li { display: flex; align-items: baseline; gap: 10px; } .egx-energy-2-right .content .content-right ul li .icon { transform: translateY(1.5px); } .egx-energy-2-right .content .content-right ul li .list-text { font-size: 18px; font-family: var(--urbanist); color: rgb(25, 24, 37); font-weight: 700; line-height: 30px; } .egx-energy-2-right .content .content-right .btn-wrap { margin-top: 30px; } .egx-energy-3-area { padding-top: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-3-area { padding: 50px 0; } } .egx-energy-3-wrap { display: grid; grid-template-columns: 1.28fr 1fr; gap: 50px 0; transform: translateY(95px); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-3-wrap { grid-template-columns: 1fr; transform: translateY(0); } } .egx-energy-3-left { display: flex; flex-direction: column; justify-content: space-between; margin-top: 45px; } .egx-energy-3-left .section-title-wrap { max-width: 610px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-energy-3-left .section-title-wrap { max-width: 510px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-3-left .section-title-wrap { max-width: 450px; } } .egx-energy-3-left .section-title-wrap .energy-title { font-size: 66px; font-family: var(--urbanist); line-height: 1; font-weight: 900; text-align: end; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-energy-3-left .section-title-wrap .energy-title { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-energy-3-left .section-title-wrap .energy-title { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-energy-3-left .section-title-wrap .energy-title { font-size: 37px; } } @media (max-width: 575px) { .egx-energy-3-left .section-title-wrap .energy-title { font-size: 30px; margin-bottom: 2px; } } .egx-energy-3-left .section-title-wrap .energy-title-big { font-size: 192px; line-height: 234px; font-family: var(--urbanist); font-weight: 900; text-align: end; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0; margin-top: -75px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-energy-3-left .section-title-wrap .energy-title-big { font-size: 150px; line-height: 200px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-energy-3-left .section-title-wrap .energy-title-big { font-size: 135px; line-height: 200px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-energy-3-left .section-title-wrap .energy-title-big { font-size: 110px; line-height: 190px; } } @media (max-width: 575px) { .egx-energy-3-left .section-title-wrap .energy-title-big { font-size: 90px; line-height: 175px; } } .egx-energy-3-left .section-title-wrap .disc { color: rgb(224, 224, 224); margin-top: 15px; } .egx-energy-3-left .section-title-wrap .btn-wrap { margin-top: 35px; } .egx-energy-3-left .bottom-content { margin-top: 85px; display: grid; grid-template-columns: 310px auto; gap: 0; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-energy-3-left .bottom-content { grid-template-columns: 280px auto; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-3-left .bottom-content { grid-template-columns: 1fr; } } .egx-energy-3-left .bottom-content .video { width: 310px; display: flex; align-items: center; justify-content: center; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-energy-3-left .bottom-content .video { width: 280px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-energy-3-left .bottom-content .video { width: 60%; height: 150px; } } @media (max-width: 575px) { .egx-energy-3-left .bottom-content .video { width: 100%; height: 150px; } } .egx-energy-3-left .bottom-content .video .popup-video .icon { width: 58px; height: 58px; border-radius: 50%; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; transition: all 0.4s ease; } .egx-energy-3-left .bottom-content .video .popup-video .icon:hover { color: var(--egx-pr-1); } .egx-energy-3-left .bottom-content .men-img { position: absolute; bottom: 0; left: 200px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-energy-3-left .bottom-content .men-img { left: 140px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-energy-3-left .bottom-content .men-img { right: 0; left: auto; } } @media (max-width: 575px) { .egx-energy-3-left .bottom-content .men-img { display: none; } } .egx-energy-3-left .bottom-content .action { background: var(--egx-gd-1); padding: 60px 20px 26px 130px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-energy-3-left .bottom-content .action { padding: 40px 20px 26px 85px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-energy-3-left .bottom-content .action { padding: 40px 20px 30px 30px; } } .egx-energy-3-left .bottom-content .action .subtitle { font-size: 18px; color: rgb(239, 239, 239); line-height: 1.4; font-weight: 400; } .egx-energy-3-left .bottom-content .action .title { font-size: 30px; color: rgb(255, 255, 255); font-weight: 800; line-height: 1.2; } .egx-energy-3-left .bottom-content .action .link { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #fff; color: #000; margin-top: 10px; transition: all 0.4s ease; } .egx-energy-3-left .bottom-content .action .link:hover { color: var(--egx-pr-1); } .egx-experience-1-area { padding: 103px 0 134px 0; } .egx-experience-1-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-experience-1-wrap { grid-template-columns: 1fr; } } .egx-experience-1-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; position: relative; } .egx-experience-1-item:nth-child(1)::after { content: ""; position: absolute; top: 0; right: -0.5px; height: 100%; width: 1px; background: var(--egx-gd-1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-experience-1-item:nth-child(1)::after { display: none; } } .egx-experience-1-item:nth-child(2)::after { content: ""; position: absolute; top: 0; right: -0.5px; height: 100%; width: 1px; background: var(--egx-gd-1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-experience-1-item:nth-child(2)::after { display: none; } } .egx-experience-1-item .icon { font-size: 48px; color: rgb(33, 151, 83); } .egx-experience-1-item .number { font-size: 50px; font-family: var(--urbanist); font-weight: 900; color: rgb(0, 0, 0); line-height: 1; margin: 36px 0 22px 0; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-experience-1-item .number { font-size: 45px; } } @media (max-width: 575px) { .egx-experience-1-item .number { font-size: 40px; } } .egx-experience-1-item .title { font-size: 16px; font-family: var(--urbanist); color: rgb(255, 255, 255); line-height: 1.375; font-weight: 500; background: var(--egx-gd-1); padding: 4px 15px; border-radius: 100px; } .egx-experience-1-item:hover .icon { animation: scale_up_down 0.6s ease; } @keyframes scale_up_down { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .egx-experience-2-area { padding: 92px 0; } .egx-experience-2-area:is(.experience-area-inner) { padding: 92px 0 0 0; } .egx-experience-2-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 55px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-experience-2-wrap { gap: 42px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-experience-2-wrap { grid-template-columns: repeat(3, 1fr); gap: 40px 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-experience-2-wrap { grid-template-columns: repeat(2, 1fr); gap: 40px 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-experience-2-wrap { grid-template-columns: repeat(2, 1fr); gap: 40px; } } @media (max-width: 575px) { .egx-experience-2-wrap { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 575px) { .egx-experience-2-wrap { max-width: 285px; margin: 0 auto; } } .egx-experience-2-item { display: grid; grid-template-columns: 80px auto; gap: 20px; align-items: center; } .egx-experience-2-item .icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: var(--egx-gd-1); border-radius: 50%; font-size: 32px; color: #fff; } .egx-experience-2-item .icon:hover i { animation: bounceIn 0.8s ease; } .egx-experience-2-item .number { font-size: 32px; font-family: var(--urbanist); color: rgb(19, 19, 19); line-height: 1.1; font-weight: 900; margin-bottom: 0; } .egx-experience-2-item .title { font-size: 17px; color: rgb(130, 130, 130); font-weight: 500; } .egx-experience-3-wrap { display: grid; grid-template-columns: 1fr 1.31fr; gap: 125px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-experience-3-wrap { gap: 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-experience-3-wrap { grid-template-columns: 1fr; gap: 60px; } } .egx-experience-3-left .disc { font-size: 20px; color: rgb(255, 255, 255); margin-top: 15px; } .egx-experience-3-left ul { margin-top: 20px; } .egx-experience-3-left ul li { display: flex; align-items: baseline; gap: 10px; } .egx-experience-3-left ul li .icon { color: var(--egx-pr-1); font-size: 30px; transform: translateY(5px); } .egx-experience-3-left ul li .list-text { font-size: 17px; font-family: var(--urbanist); color: rgb(255, 255, 255); line-height: 1.2; font-weight: 900; } .egx-experience-3-left .growth { margin-top: 32px; display: flex; flex-direction: column; gap: 30px; } .egx-experience-3-left .growth .item { display: grid; grid-template-columns: 75px 1fr; gap: 22px; } .egx-experience-3-left .growth .item .number { font-size: 37px; color: rgb(255, 255, 255); line-height: 1.3; } .egx-experience-3-left .growth .item .progress-item .progress-title { font-size: 14px; font-family: var(--urbanist); color: rgb(255, 255, 255); font-weight: 700; text-transform: uppercase; line-height: 37px; } .egx-experience-3-left .growth .item .progress-item .progress { background-color: rgb(238, 238, 238); height: 10px; border-radius: 5px; position: relative; z-index: 2; overflow: visible; } .egx-experience-3-left .growth .item .progress-item .progress .progress-bar { background: var(--egx-gd-1); height: 10px; width: 0; border-radius: 5px; position: relative; z-index: -1; -webkit-transition: 1s all ease-in-out; transition: 1s all ease-in-out; } .egx-experience-3-left .growth .item .progress-item .progress span { display: none; } .egx-experience-3-left .btn-wrap { margin-top: 57px; } .egx-experience-3-right { position: relative; } .egx-experience-3-right .main-img { position: absolute; right: 0; top: -200px; } .egx-experience-3-right .main-img img { border-radius: 10px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-experience-3-right .main-img { top: auto; bottom: 0; max-width: 540px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-experience-3-right .main-img { display: none; } } .egx-experience-3-right .form-wrap { position: relative; z-index: 2; background: var(--egx-gd-1); padding: 45px; border-radius: 10px; text-align: center; max-width: 446px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-experience-3-right .form-wrap { max-width: 100%; } } @media (max-width: 575px) { .egx-experience-3-right .form-wrap { padding: 35px 20px; } } .egx-experience-3-right .form-wrap .subtitle { font-size: 15px; font-family: var(--urbanist); color: rgb(255, 255, 255); font-weight: 700; line-height: 28px; } .egx-experience-3-right .form-wrap .title { font-size: 30px; color: rgb(255, 255, 255); font-weight: 800; line-height: 1.2; } .egx-experience-3-right .form-wrap form { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; } .egx-experience-3-right .form-wrap form input { border: none; outline: none; height: 62px; background-color: #fff; border-radius: 10px; padding: 8px 20px 8px 30px; font-family: var(--urbanist); font-size: 14px; line-height: 1.2; color: #000; } .egx-experience-3-right .form-wrap form input::placeholder { color: rgb(100, 124, 158); } @media (max-width: 575px) { .egx-experience-3-right .form-wrap form input { padding: 8px 20px 8px 20px; height: 55px; } } .egx-experience-3-right .form-wrap form textarea { border: none; outline: none; min-height: 70px; height: 118px; background-color: #fff; border-radius: 10px; padding: 20px 20px 8px 30px; font-family: var(--urbanist); font-size: 14px; color: #000; line-height: 1.2; } .egx-experience-3-right .form-wrap form textarea::placeholder { color: rgb(100, 124, 158); } @media (max-width: 575px) { .egx-experience-3-right .form-wrap form textarea { padding: 15px 20px 8px 20px; height: 90px; } } .egx-experience-3-right .form-wrap form button { width: 100%; background-color: #fff; font-size: 16px; font-family: "Urbanist"; color: rgb(1, 1, 1); font-weight: 700; text-transform: uppercase; line-height: 1.5; padding: 18px 20px; border-radius: 100px; margin-top: 22px; position: relative; overflow: hidden; transition: all 0.3s ease; } .egx-experience-3-right .form-wrap form button span { position: relative; z-index: 2; } .egx-experience-3-right .form-wrap form button::after { content: ""; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: #000; border-radius: 100px; transition: all 0.5s ease; } .egx-experience-3-right .form-wrap form button:hover { color: #fff; } .egx-experience-3-right .form-wrap form button:hover::after { width: 100%; } .egx-experience-4-area { position: relative; } .egx-experience-4-area .bg-img { position: absolute; width: 100%; z-index: -1; left: 0; top: 512px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-experience-4-area .bg-img { display: none; } } .egx-experience-4-area .content-wrap { max-width: 1920px; margin: 0 auto; } .egx-experience-4-wrap { max-width: 1600px; margin-left: auto; border-radius: 16px 0 0 0; padding-top: 172px; } .egx-experience-4-wrap .bottom-items { display: flex; } @media (max-width: 575px) { .egx-experience-4-wrap .bottom-items { flex-direction: column; } } .egx-experience-4-item { width: 340px; height: 340px; padding: 52px 40px; display: flex; flex-direction: column; justify-content: space-between; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-experience-4-item { width: 300px; height: 300px; padding: 40px 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-experience-4-item { width: 270px; height: 270px; padding: 40px 30px; } } @media (max-width: 575px) { .egx-experience-4-item { width: 250px; height: 250px; padding: 40px 25px; } } .egx-experience-4-item:is(.active) .number { font-weight: 600; color: #fff; } .egx-experience-4-item:is(.active) .number .last { color: var(--egx-pr-2); } .egx-experience-4-item:is(.active) .title { color: rgba(255, 255, 255, 0.8); } .egx-experience-4-item .number { font-family: var(--urbanist); font-weight: 500; font-size: 120px; line-height: 144px; letter-spacing: -4px; text-transform: uppercase; color: #0d0d0d; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-experience-4-item .number { font-size: 100px; line-height: 120px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-experience-4-item .number { font-size: 80px; line-height: 100px; } } .egx-experience-4-item .number .last { font-size: 60px; line-height: 72px; letter-spacing: -3px; color: #209753; transform: translate(2px, -42px); display: inline-block; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-experience-4-item .number .last { transform: translate(2px, -28px); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-experience-4-item .number .last { font-size: 40px; line-height: 55px; } } .egx-experience-4-item .title { font-weight: 500; font-size: 20px; line-height: 24px; text-transform: uppercase; color: #717171; } .egx-project-1-area .section-title-wrap { max-width: 690px; margin: 0 auto; text-align: center; } @media (max-width: 575px) { .egx-project-1-area .section-title-wrap { overflow: hidden; } } .egx-project-1-wrap { margin: 39px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 0; max-width: 1920px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-project-1-wrap { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .egx-project-1-wrap { grid-template-columns: 1fr; } } .egx-project-1-wrap .top-content { position: absolute; top: 0; z-index: 2; background: var(--egx-gd-1); height: 56px; padding: 5px 35px; border-radius: 0 0 20px 20px; display: flex; align-items: center; justify-content: center; left: 50%; transform: translate(-50%, -15px); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-project-1-wrap .top-content { height: auto; flex-wrap: wrap; gap: 10px; padding: 20px 20px; text-align: center; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-project-1-wrap .top-content { height: auto; flex-wrap: wrap; gap: 10px; padding: 10px 20px; text-align: center; } } @media (max-width: 575px) { .egx-project-1-wrap .top-content { display: none; } } .egx-project-1-wrap .top-content span { font-size: 16px; font-family: var(--urbanist); color: rgb(255, 255, 255); font-weight: 700; line-height: 1; } .egx-project-1-card { position: relative; overflow: hidden; } .egx-project-1-card .card-content { position: absolute; bottom: 0; width: 100%; padding: 20px 60px 0; background-color: #fff; transform: translateY(180px); transition: all 0.6s ease; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-project-1-card .card-content { padding: 20px 20px 0; } } .egx-project-1-card .card-content a { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; } .egx-project-1-card .card-content a .title { font-size: 25px; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.4s ease; } .egx-project-1-card .card-content a .icon { color: rgb(37, 151, 33); transition: all 0.4s ease; } .egx-project-1-card .card-content a:hover .title { letter-spacing: 0.2px; } .egx-project-1-card .card-content a:hover .icon { transform: rotate(-45deg); } .egx-project-1-card .card-content .divider { width: 100%; height: 2px; background: var(--egx-gd-1); margin-top: 20px; } .egx-project-1-card:hover .card-content { transform: translateY(0); } .egx-project-2-area .grid-sizer { width: 25%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-project-2-area .grid-sizer { width: 33.33%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-project-2-area .grid-sizer { width: 50%; } } .egx-project-2-card { border-radius: 20px; overflow: hidden; position: relative; padding: 16px 13px; margin-top: 30px; width: 25%; padding: 12px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-project-2-card { width: 33.33%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-project-2-card { width: 50%; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-project-2-card { width: 100%; } } .egx-project-2-area .section-title-wrap { max-width: 700px; margin: 0 auto; text-align: center; } .egx-project-2-area .container { max-width: 1900px; } .egx-project-2-area .project-button-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 15px 10px; margin-top: 24px; } .egx-project-2-area .project-button-group .filter-button { padding: 14px 34px; border-radius: 50px; font-size: 16px; font-weight: 700; line-height: 20px; font-family: var(--urbanist); color: rgb(32, 32, 32); background-color: rgb(248, 248, 240); position: relative; overflow: hidden; transition: all 0.2s ease; } .egx-project-2-area .project-button-group .filter-button::after { content: ""; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: var(--egx-gd-1); border-radius: 50px; transition: all 0.4s ease; } .egx-project-2-area .project-button-group .filter-button span { position: relative; z-index: 2; } .egx-project-2-area .project-button-group .filter-button:hover { color: #fff; } .egx-project-2-area .project-button-group .filter-button:hover::after { width: 100%; } .egx-project-2-area .project-button-group .filter-button:is(.is-checked) { background: var(--egx-gd-1); color: #fff; } .egx-project-2-area .project-button-group .filter-button:nth-child(1) { padding: 14px 28px; } .egx-project-2-wrap { margin-top: 25px; gap: 40px 0; } .egx-project-2-card { border-radius: 20px; overflow: hidden; position: relative; padding: 16px 13px; } .egx-project-2-card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: var(--egx-gd-1); z-index: -1; opacity: 0; transition: all 0.5s ease; } .egx-project-2-card img { border-radius: 20px !important; } .egx-project-2-card .card-cont { position: absolute; bottom: 63px; left: 13px; width: 275px; background: var(--egx-gd-1); padding: 25px 20px 25px 30px; display: flex; align-items: center; gap: 10px; border-radius: 0 10px 10px 0; } @media (max-width: 575px) { .egx-project-2-card .card-cont { width: 250px; padding: 20px; } } .egx-project-2-card .card-cont .icon { color: #fff; font-size: 50px; } @media (max-width: 575px) { .egx-project-2-card .card-cont .icon { font-size: 40px; } } .egx-project-2-card .card-cont .title { font-size: 24px; font-family: var(--urbanist); font-weight: 900; line-height: 30px; color: #fff; } @media (max-width: 575px) { .egx-project-2-card .card-cont .title { font-size: 22px; } } .egx-project-2-card:hover::after { opacity: 1; height: 100%; } .egx-project-3-area .section-title-wrap { max-width: 810px; margin: 0 auto; text-align: center; } .egx-project-3-wrap { max-width: 1920px; margin: 50px auto 0; display: flex; gap: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-3-wrap { flex-direction: column; gap: 35px; } } .egx-project-3-card { flex: 1; transition: 0.7s var(--cube-1); height: 682px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-project-3-card { height: 500px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-project-3-card { height: 450px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-3-card { height: auto; } } .egx-project-3-card:nth-child(odd) .card-content { background-color: rgb(36, 36, 36); } .egx-project-3-card:is(.active) { flex: 1.92; } .egx-project-3-card:is(.active) .card-content::after { opacity: 1; } .egx-project-3-card:is(.active) .card-content .link-wrap { transform: translateX(0); } .egx-project-3-card .card-img { height: 100%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-3-card .card-img { height: 300px; } } .egx-project-3-card .card-content { padding: 20px 30px 15px 40px; display: flex; align-items: center; gap: 15px; position: relative; background-color: rgb(28, 28, 28); min-height: 100px; position: relative; overflow: hidden; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-project-3-card .card-content { padding: 20px 20px 15px 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-project-3-card .card-content { padding: 15px 20px 15px 20px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-project-3-card .card-content { min-height: 125px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-3-card .card-content { padding: 20px; } } .egx-project-3-card .card-content::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--egx-gd-1); opacity: 0; transition: all 0.4s ease; } .egx-project-3-card .card-content .icon { color: #fff; font-size: 30px; position: relative; z-index: 2; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-project-3-card .card-content .icon { display: none; } } .egx-project-3-card .card-content .title { font-size: 22px; color: rgb(255, 255, 255); line-height: 1.364; max-width: 220px; position: relative; z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-project-3-card .card-content .title { font-size: 18px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-project-3-card .card-content .title { font-size: 16px; max-width: 150px; } } @media (max-width: 575px) { .egx-project-3-card .card-content .title { font-size: 20px; max-width: 175px; } } .egx-project-3-card .card-content .link-wrap { position: absolute; z-index: 2; right: 84px; z-index: 2; transition: all 0.8s ease; transition-delay: 0.7s; transform: translateX(140px); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-project-3-card .card-content .link-wrap { right: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-3-card .card-content .link-wrap { right: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-3-card .card-content .link-wrap { transition-delay: 0s; } } .egx-project-3-card .card-content .link-wrap .link { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: rgb(28, 28, 28); font-size: 18px; background-color: #fff; transition: all 0.4s; } .egx-project-3-card .card-content .link-wrap .link:hover { background-color: #000; color: #fff; } .egx-project-4-area { padding: 140px 0; } .egx-project-4-area .section-title-wrap { max-width: 726px; margin: 0 auto; text-align: center; } .egx-project-4-area .section-title-wrap .egx-subtitle-2 { justify-content: center; } .egx-project-4-wrap { display: flex; gap: 32px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-project-4-wrap { display: grid; grid-template-columns: repeat(2, 1fr); padding: 0 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-4-wrap { display: grid; grid-template-columns: 1fr; padding: 0 30px; } } .egx-project-4-card { position: relative; border-radius: 16px; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: #003936; } .egx-project-4-card::after { content: ""; position: absolute; width: 85%; height: 87%; padding: 32px; background: linear-gradient(90deg, #209753 0%, #b9d32a 100%); mix-blend-mode: overlay; border-radius: 16px; transform: translateY(600px); transition: all 0.5s ease; border: 9px solid #fff; } .egx-project-4-card .card-img { width: 100%; height: 100%; } .egx-project-4-card .card-img img { mix-blend-mode: luminosity; transition: all 0.4s ease; } .egx-project-4-card .content-bottom { padding: 9px; position: absolute; width: 85%; height: 87%; transform: translateY(600px); transition: all 0.5s ease; z-index: 2; } .egx-project-4-card .content-bottom .content-wrap { width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); border-radius: 16px; transition: all 0.4s ease; position: relative; z-index: 2; } .egx-project-4-card .content-bottom .content-wrap .content { width: 100%; height: 100%; border-radius: 16px; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .egx-project-4-card .content-bottom .content-wrap .content a { margin-left: auto; position: relative; z-index: 3; border-radius: 0 8px 0 0; overflow: hidden; } .egx-project-4-card .content-bottom .content-wrap .content a::after { content: ""; position: absolute; width: 100%; height: 100%; background-color: #fff; clip-path: polygon(100% 0, 0 0, 100% 100%); left: 0; top: 0; opacity: 0; transition: all 0.4s ease; } .egx-project-4-card .content-bottom .content-wrap .content a img { border-radius: 0 8px 0 0; position: relative; z-index: 2; } .egx-project-4-card .content-bottom .content-wrap .content a:hover::after { opacity: 1; } .egx-project-4-card .content-bottom .content-wrap .content .title-wrap { padding: 0 0 40px 40px; position: relative; z-index: 3; display: flex; flex-direction: column; align-items: start; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-4-card .content-bottom .content-wrap .content .title-wrap { padding: 0 20px 20px 20px; } } .egx-project-4-card .content-bottom .content-wrap .content .title-wrap .category { font-family: var(--urbanist); font-weight: 600; font-size: 14px; line-height: 25px; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; background: var(--egx-gd-2); padding: 4.5px 16px; border-radius: 4px; display: inline-block; } .egx-project-4-card .content-bottom .content-wrap .content .title-wrap .title { font-weight: 800; font-size: 24px; line-height: 36px; color: #fff; background-color: #003936; padding: 10.5px 28px; border-radius: 4px; display: inline-block; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-4-card .content-bottom .content-wrap .content .title-wrap .title { font-size: 20px; line-height: 30px; padding: 10px 12px; } } .egx-project-4-card:hover::after { transform: translateY(0); } .egx-project-4-card:hover .card-img img { mix-blend-mode: normal; } .egx-project-4-card:hover .content-bottom { transform: translateY(0); } .egx-project-5-area { padding: 120px 0; } .egx-project-5-area .section-title-wrap { max-width: 726px; margin: 0 auto; text-align: center; } .egx-project-5-card { position: relative; display: flex; justify-content: center; overflow: hidden; } .egx-project-5-card .card-img { overflow: hidden; border-radius: 16px; width: auto; } .egx-project-5-card .card-content { position: absolute; bottom: 0; padding: 24.5px 20px 24.5px 32px; display: flex; align-items: center; gap: 20px; background: #fff; border-width: 0 2px; border-style: solid; border-color: #b9d32a; border-radius: 16px; width: 91%; transform: translateY(200px); transition: all 0.8s ease; } .egx-project-5-card .card-content .title { font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: 0.02em; color: #0d0d0d; } @media (max-width: 575px) { .egx-project-5-card .card-content .title { font-size: 20px; line-height: 28px; } } .egx-project-5-card .card-content .link { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; position: relative; flex: 0 0 auto; border-radius: 100px; background: linear-gradient( 90deg, rgba(32, 151, 83, 0.28) 0%, rgba(185, 211, 42, 0.28) 100% ); } .egx-project-5-card .card-content .link i { font-size: 24px; color: var(--egx-pr-1); position: relative; z-index: 2; transition: all 0.4s ease; transform: rotate(-45deg); } .egx-project-5-card .card-content .link::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--egx-gd-2); border-radius: 100px; transform: scale(0); transition: all 0.4s ease; } .egx-project-5-card .card-content .link:hover i { color: #fff; transform: rotate(0deg); } .egx-project-5-card .card-content .link:hover::after { transform: scale(1); } .egx-project-5-card:hover .card-content { transform: translateY(0); } .egx-project-6-area { padding: 120px 0; } .egx-project-6-area .section-title-wrap { max-width: 730px; } .egx-project-6-wrap { margin-top: 70px; display: flex; flex-direction: column; gap: 55px; } .egx-project-6-card { display: grid; grid-template-columns: 1.61fr 1fr; gap: 52px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-6-card { display: flex; flex-direction: column; gap: 30px; } } .egx-project-6-card:nth-child(even) { grid-template-columns: 1fr 1.61fr; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-6-card:nth-child(even) { flex-direction: column-reverse; } } .egx-project-6-card .card-img { overflow: hidden; } .egx-project-6-card .card-img img { transition: all 0.8s ease; } .egx-project-6-card .card-img:hover img { transform: scale(1.1); } .egx-project-6-card .card-content .title { font-size: 32px; line-height: 42px; color: #0d0d0d; } .egx-project-6-card .card-content .content-details { margin-top: 45px; margin-left: 52px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-6-card .card-content .content-details { margin-left: 0; } } .egx-project-6-card .card-content .content-details .date { font-family: var(--urbanist); font-weight: 500; font-size: 18px; line-height: 28px; color: #209753; } .egx-project-6-card .card-content .content-details .divider { margin-top: 22px; width: 100%; height: 1px; background: #dfe1e5; } .egx-project-6-card .card-content .content-details .author { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; } .egx-project-6-card .card-content .content-details .author .client { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 30px; color: #717171; } .egx-project-6-card .card-content .content-details .author .name { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 30px; color: #0d0d0d; } .egx-project-6-card .card-content .content-details .service { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 23px; } .egx-project-6-card .card-content .content-details .service .service-name { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 30px; color: rgba(13, 13, 13, 0.72); } .egx-project-6-card .card-content .content-details .service ul li { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 30px; color: #0d0d0d; position: relative; display: flex; align-items: center; margin-left: 14px; } .egx-project-6-card .card-content .content-details .service ul li::after { content: ""; position: absolute; left: -20px; width: 6px; height: 6px; background: #209753; border-radius: 50%; } .egx-project-details-area { padding: 260px 0 120px 0; position: relative; overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-details-area { padding: 150px 0 120px 0; } } .egx-project-details-area .top-wrap { display: flex; align-items: center; justify-content: space-between; gap: 50px 60px; flex-wrap: wrap; padding-bottom: 80px; align-items: end; } .egx-project-details-area .top-wrap .breadcrumb-wrap { max-width: 630px; } .egx-project-details-area .top-wrap .breadcrumb-wrap .breadcrumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; } .egx-project-details-area .top-wrap .breadcrumb-wrap .breadcrumb .icon { font-size: 18px; color: #209753; transition: all 0.4s ease; } .egx-project-details-area .top-wrap .breadcrumb-wrap .breadcrumb .text { font-family: var(--urbanist); font-weight: 600; font-size: 18px; line-height: 22px; letter-spacing: 0.02em; color: #209753; transition: all 0.4s ease; } .egx-project-details-area .top-wrap .breadcrumb-wrap .breadcrumb:hover .icon { color: var(--egx-pr-1); } .egx-project-details-area .top-wrap .breadcrumb-wrap .breadcrumb:hover .text { color: var(--egx-pr-1); } .egx-project-details-area .top-wrap .breadcrumb-wrap .title-wrap { margin-top: 96px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-project-details-area .top-wrap .breadcrumb-wrap .title-wrap { margin-top: 50px; } } @media (max-width: 575px) { .egx-project-details-area .top-wrap .breadcrumb-wrap .title-wrap { margin-top: 40px; } } .egx-project-details-area .top-wrap .breadcrumb-wrap .title-wrap .hero-title { font-weight: 800; font-size: 80px; line-height: 88px; text-transform: capitalize; color: #0d0d0d; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-project-details-area .top-wrap .breadcrumb-wrap .title-wrap .hero-title { font-size: 70px; line-height: 76px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-project-details-area .top-wrap .breadcrumb-wrap .title-wrap .hero-title { font-size: 60px; line-height: 1.1; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-project-details-area .top-wrap .breadcrumb-wrap .title-wrap .hero-title { font-size: 55px; line-height: 1.1; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-project-details-area .top-wrap .breadcrumb-wrap .title-wrap .hero-title { font-size: 50px; line-height: 1.2; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-project-details-area .top-wrap .breadcrumb-wrap .title-wrap .hero-title { font-size: 40px; line-height: 1.2; } } @media (max-width: 575px) { .egx-project-details-area .top-wrap .breadcrumb-wrap .title-wrap .hero-title { font-size: 35px; line-height: 1.2; } } .project-info { background: #f4f5f5; border-radius: 12px; padding: 40px 36px; display: flex; flex-direction: column; gap: 14px; margin-bottom: -148px; position: relative; z-index: 2; } @media (max-width: 575px) { .project-info { margin-bottom: 0; } .mobile-respo { position: relative !important; margin-bottom: 30px !important; } } .project-info .info-text { font-family: var(--urbanist); font-weight: 500; font-size: 18px; line-height: 28px; color: #0d0d0d; margin-bottom: 0; } .project-info .info-text span { font-weight: 400; color: rgba(13, 13, 13, 0.72); margin-left: 4px; } .egx-project-details-area .thumb-wrap { max-width: 1920px; margin: 0 auto 70px; } .egx-project-details-area .thumb-wrap .thumbnails-1 { max-width: 1768px; border-radius: 0 28px 28px 0; overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-details-area .thumb-wrap .thumbnails-1 { border-radius: 0; } } .egx-project-details-area .gallery-wrap { max-width: 1058px; margin: 55px auto 0; } .egx-project-details-area .gallery-wrap .title-wrap { max-width: 730px; margin: 0 auto 35px; } .egx-project-details-area .gallery-wrap .title-wrap .title { font-size: 32px; line-height: 40px; color: #0d0d0d; } @media (max-width: 575px) { .egx-project-details-area .gallery-wrap .title-wrap .title { font-size: 26px; line-height: 34px; } } .mainp__gal .gallery-wrap .gallery .gallery-item { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .mainp__gal .gallery-wrap .gallery img { height: 396px !important; width: 100% !important; object-fit: cover; } .mainp__gal .gallery-wrap .gallery .gallery-item::after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(5, 6, 8, 0.5); opacity: 0; transition: all 0.4s ease; } .mainp__gal .gallery-wrap .gallery .gallery-item .icon-1 { position: absolute; width: 80px; height: 80px; border-radius: 100%; background: var(--egx-gd-1); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; transform: scale(2); opacity: 0; z-index: 2; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } @media (max-width: 575px) { .mainp__gal .gallery-wrap .gallery .gallery-item .icon-1 { width: 70px; height: 70px; font-size: 25px; } } .mainp__gal .gallery-wrap .gallery .gallery-item:hover::after { opacity: 1; } .mainp__gal .gallery-wrap .gallery .gallery-item:hover .icon-1 { opacity: 1; transform: scale(1); } .egx-project-details-content p { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 30px; color: #0d0d0d; margin-bottom: 0; } .egx-project-details-content h4 { font-family: var(--urbanist); font-weight: 700; font-size: 32px; line-height: 44px; color: #0d0d0d; margin: 55px 0 30px 0; } .egx-project-details-content ul { display: flex; flex-direction: column; gap: 8px; } .egx-project-details-content ul li { display: flex; align-items: baseline; gap: 10px; font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 28px; color: #313030; } .egx-project-details-content ul li img { transform: translateY(3px); } .egx-project-details-feature { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 1058px; margin: 55px auto 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-project-details-feature { grid-template-columns: 1fr; } } .egx-project-details-feature .item { overflow: hidden; border-radius: 12px; } .egx-project-details-feature .item img { --webkit-filter: grayscale(3); filter: grayscale(3); transition: all 0.4s ease; } .egx-project-details-feature .item:hover img { --webkit-filter: grayscale(0); filter: grayscale(0); } .egx-faq-1-area { padding: 155px 0 128px 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-faq-1-area { overflow: hidden; } } .egx-faq-1-area .section-title-wrap { max-width: 830px; margin: 0 auto; text-align: center; } .egx-faq-1-wrap { display: grid; grid-template-columns: 1fr 1.36fr; gap: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-faq-1-wrap { gap: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-faq-1-wrap { grid-template-columns: 1fr; gap: 60px; } } .egx-faq-1-wrap:is(.faq-1-wrap-inner) { display: grid; grid-template-columns: 1fr 1.65fr; gap: 108px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-faq-1-wrap:is(.faq-1-wrap-inner) { gap: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-faq-1-wrap:is(.faq-1-wrap-inner) { grid-template-columns: 1fr; gap: 60px; } } .egx-faq-1-title-wrap .faq-btn { padding: 13px 20px; display: inline-flex; align-items: center; gap: 12px; background: #eee; border-radius: 4px; margin-top: 60px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-faq-1-title-wrap .faq-btn { margin-top: 40px; } } .egx-faq-1-title-wrap .faq-btn .btn-text { font-family: var(--urbanist); font-weight: 600; font-size: 18px; line-height: 28px; letter-spacing: -0.01em; text-transform: uppercase; color: #0d0d0d; } .egx-faq-1-left .faq-tab-btn-wrap { height: 208px; display: flex; align-items: end; gap: 10px; justify-content: center; padding-bottom: 20px; border-radius: 20px; margin-bottom: 25px; } @media (max-width: 575px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-faq-1-left .faq-tab-btn-wrap { flex-direction: column; align-items: center; padding: 20px; height: auto; } } .egx-faq-1-left .faq-tab-btn-wrap .faq-btn { font-size: 16px; line-height: 1; font-weight: 700; font-family: var(--urbanist); color: rgb(30, 34, 43); padding: 15px 18px; background: #fff; border-radius: 100px; } .egx-faq-1-left .faq-tab-btn-wrap .faq-btn:is(.active) { background: var(--egx-gd-1); color: #fff; } .egx-faq-1-left .disc { color: rgb(113, 113, 113); } .egx-faq-1-left .award { margin-top: 30px; position: relative; background-color: rgb(255, 255, 255); box-shadow: 0 0 49px 0 rgba(0, 0, 0, 0.08); max-width: 235px; padding: 20px 0 20px 50px; margin-left: 40px; } .egx-faq-1-left .award::after { content: ""; position: absolute; width: 3px; height: 100%; background-color: rgb(33, 151, 83); left: 0; top: 0; } .egx-faq-1-left .award::before { content: ""; position: absolute; width: 3px; height: 100%; background-color: rgb(124, 187, 59); right: 0; top: 0; } .egx-faq-1-left .award .icon { border-radius: 50%; background: var(--egx-gd-1); width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; position: absolute; left: -40px; z-index: 2; } .egx-faq-1-left .award .number { font-size: 40px; font-family: var(--urbanist); color: rgb(40, 40, 40); line-height: 1; font-weight: 900; margin-bottom: 0; } .egx-faq-1-left .award .title { font-size: 20px; font-weight: 500; line-height: 28px; } .egx-faq-1-left .award:hover .icon i { animation: egx_zigzag 0.4s ease; } .egx-faq-1-right { overflow: hidden; } .egx-faq-1-right .fade:not(.show) { transform: translateY(400px); } .egx-faq-1-right .fade:is(.show) { transform: translateY(0); transition: 0.5s ease; } .egx-faq-1-right .accordion { display: flex; flex-direction: column; gap: 15px; --bs-accordion-bg: transparent; --bs-accordion-border-width: 0px; } .egx-faq-1-right .accordion .accordion-item { background: var(--egx-gd-1); position: relative; border-radius: 10px !important; overflow: hidden; } .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button { border-radius: 10px; background: rgb(248, 248, 248); font-size: 20px; font-family: var(--urbanist); color: rgb(30, 34, 43); line-height: 1.4; font-weight: 900; border-radius: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 21px 21px 21px 110px; position: static; transition: all 0.3s ease; } @media (max-width: 575px) { .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button { padding: 15px 15px 15px 65px; font-size: 18px; font-weight: 700; gap: 5px; } } .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button .text { transition: all 0.1s ease; } .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button .number { font-size: 20px; font-family: var(--urbanist); font-weight: 800; position: absolute; top: 0; left: 0; width: 68px; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--egx-gd-1); color: #fff; } @media (max-width: 575px) { .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button .number { width: 50px; } } .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button .icon { width: 33px; height: 33px; border-radius: 50%; background: rgb(228, 225, 225); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } @media (max-width: 575px) { .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button .icon { width: 25px; height: 25px; } } .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button .icon .plus { font-size: 24px; font-weight: 600; } @media (max-width: 575px) { .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button .icon .plus { font-size: 20px; } } .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button .icon .minus { font-size: 24px; font-weight: 600; position: absolute; opacity: 0; color: #fff; } @media (max-width: 575px) { .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button .icon .minus { font-size: 20px; } } .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) { background: transparent; } .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .text { color: #fff; } .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon { background: var(--egx-gd-1); } .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon .plus { opacity: 0; } .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon .minus { opacity: 1; } .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button:focus { outline: none; box-shadow: none; } .egx-faq-1-right .accordion .accordion-item .accordion-header .accordion-button::after { display: none; } .egx-faq-1-right .accordion .accordion-item .accordion-body { padding: 0 25px 35px 110px; max-width: 550px; margin-top: -10px; } @media (max-width: 575px) { .egx-faq-1-right .accordion .accordion-item .accordion-body { margin-top: 0; padding: 0 15px 15px 65px; } } .egx-faq-1-right .accordion .accordion-item .accordion-body .disc { color: #fff; } @media (max-width: 575px) { .egx-faq-1-right .accordion .accordion-item .accordion-body .disc { font-size: 16px; line-height: 26px; } } .egx-faq-2-area .faq-area-wrap { max-width: 1920px; margin: 0 auto; position: relative; } .egx-faq-2-area:is(.active) .main-img { transform: translateY(0); } .egx-faq-2-wrap .content { max-width: 720px; position: relative; z-index: 2; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-faq-2-wrap .content { margin: 0 auto; } } .egx-faq-2-wrap .content .accordion { max-width: 635px; display: flex; flex-direction: column; gap: 20px; --bs-accordion-bg: transparent; --bs-accordion-border-width: 2px; } .egx-faq-2-wrap .content .accordion .accordion-item { background: var(--egx-gd-1); position: relative; border-radius: 100px !important; overflow: hidden; border: 2px solid rgb(224, 224, 224); } @media (max-width: 575px) { .egx-faq-2-wrap .content .accordion .accordion-item { border-radius: 20px !important; } } .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button { background: rgb(255, 255, 255); font-size: 22px; font-family: var(--urbanist); color: rgb(31, 30, 24); line-height: 1.4; font-weight: 900; border-radius: 0; padding: 21px 58px 21px 95px; position: static; transition: all 0.3s ease; } @media (max-width: 575px) { .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button { padding: 20px 35px 20px 60px; font-size: 18px; font-weight: 700; } } .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button .number { position: absolute; top: 0; left: 0; width: 85px; height: 100%; display: flex; align-items: center; justify-content: center; } @media (max-width: 575px) { .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button .number { width: 60px; } } .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button .number span { font-size: 15px; font-family: var(--urbanist); font-weight: 700; width: 47px; height: 47px; display: flex; align-items: center; justify-content: center; background: rgb(243, 243, 243); color: rgb(16, 16, 16); border-radius: 50%; } @media (max-width: 575px) { .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button .number span { width: 40px; height: 40px; } } .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button .icon { position: absolute; right: 30px; top: 0; height: 100%; display: flex; align-items: center; } @media (max-width: 575px) { .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button .icon { right: 10px; } } .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button .icon .down-icon { font-size: 20px; color: var(--egx-pr-1); } .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button .icon .up-icon { font-size: 20px; color: #fff; position: absolute; opacity: 0; } @media (max-width: 575px) { .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button .icon .up-icon { font-size: 20px; } } .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button:not(.collapsed) { background: transparent; color: #fff; box-shadow: none; } .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button:not(.collapsed) .icon .up-icon { opacity: 1; } .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button:not(.collapsed) .icon .down-icon { opacity: 0; } .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button:focus { outline: none; box-shadow: none; } .egx-faq-2-wrap .content .accordion .accordion-header .accordion-button::after { display: none; } .egx-faq-2-wrap .content .accordion .accordion-body { padding: 0 50px 35px 95px; max-width: 550px; margin-top: -10px; } @media (max-width: 575px) { .egx-faq-2-wrap .content .accordion .accordion-body { margin-top: -5px; padding: 0 30px 15px 60px; } } .egx-faq-2-wrap .content .accordion .accordion-body .disc { color: #fff; line-height: 28px; } @media (max-width: 575px) { .egx-faq-2-wrap .content .accordion .accordion-body .disc { font-size: 16px; line-height: 26px; } } .egx-faq-2-area .main-img { position: absolute; right: 0; top: -450px; transform: translateY(200px); transition: 1s var(--cube-1); } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-faq-2-area .main-img { max-width: 900px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-faq-2-area .main-img { max-width: 780px; top: -300px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-faq-2-area .main-img { max-width: 600px; top: -180px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-faq-2-area .main-img { position: static; } } .egx-faq-3-area { padding: 240px 0 0 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-faq-3-area { padding-top: 100px; } } .egx-faq-3-area .section-title-wrap { max-width: 700px; margin: 0 auto; text-align: center; } .egx-faq-3-wrap .accordion { display: flex; flex-direction: column; gap: 30px; --bs-accordion-bg: transparent; --bs-accordion-border-width: 0px; } .egx-faq-3-wrap .accordion .accordion-item { background: var(--egx-gd-1); border-radius: 50px; } @media (max-width: 575px) { .egx-faq-3-wrap .accordion .accordion-item { border-radius: 20px; } } .egx-faq-3-wrap .accordion .accordion-item .accordion-header { background-color: rgb(243, 243, 243); border-radius: 50px; } @media (max-width: 575px) { .egx-faq-3-wrap .accordion .accordion-item .accordion-header { border-radius: 20px; } } .egx-faq-3-wrap .accordion .accordion-item .accordion-header .accordion-button { padding: 30px 60px; font-size: 30px; font-family: var(--urbanist); color: rgb(20, 21, 21); font-weight: 800; line-height: 1.2; display: flex; align-items: center; justify-content: space-between; } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-faq-3-wrap .accordion .accordion-item .accordion-header .accordion-button { padding: 25px 30px; font-size: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-faq-3-wrap .accordion .accordion-item .accordion-header .accordion-button { padding: 25px 30px; font-size: 20px; } } .egx-faq-3-wrap .accordion .accordion-item .accordion-header .accordion-button .icon .up-icon { transition: all 0.3s ease; } .egx-faq-3-wrap .accordion .accordion-item .accordion-header .accordion-button .icon .up-icon i { transform: rotate(180deg); transition: all 0.3s ease; } .egx-faq-3-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) { background: transparent; } .egx-faq-3-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon .up-icon { color: var(--egx-pr-1); } .egx-faq-3-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon .up-icon i { transform: rotate(0); } .egx-faq-3-wrap .accordion .accordion-item .accordion-header .accordion-button:focus { outline: none; box-shadow: none; } .egx-faq-3-wrap .accordion .accordion-item .accordion-header .accordion-button::after { display: none; } .egx-faq-3-wrap .accordion .accordion-item .accordion-body { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: center; padding: 50px 70px 40px 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-faq-3-wrap .accordion .accordion-item .accordion-body { padding: 50px 60px 40px 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-faq-3-wrap .accordion .accordion-item .accordion-body { padding: 50px 50px 40px 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-faq-3-wrap .accordion .accordion-item .accordion-body { padding: 30px 20px 20px 20px; grid-template-columns: 1fr; gap: 35px; } } .egx-faq-3-wrap .accordion .accordion-item .accordion-body .main-img img { border-radius: 90px; } .egx-faq-3-wrap .accordion .accordion-item .accordion-body .content .cont-top { display: grid; grid-template-columns: auto 1fr; gap: 20px; } .egx-faq-3-wrap .accordion .accordion-item .accordion-body .content .cont-top .icon { font-size: 45px; color: #fff; transform: translateY(10px); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-faq-3-wrap .accordion .accordion-item .accordion-body .content .cont-top .icon { transform: translateY(5px); font-size: 40px; } } .egx-faq-3-wrap .accordion .accordion-item .accordion-body .content .cont-top .title { font-size: 32px; font-family: var(--urbanist); color: rgb(255, 255, 255); font-weight: 800; line-height: 1.25; } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-faq-3-wrap .accordion .accordion-item .accordion-body .content .cont-top .title { font-size: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-faq-3-wrap .accordion .accordion-item .accordion-body .content .cont-top .title { font-size: 20px; } } .egx-faq-3-wrap .accordion .accordion-item .accordion-body .content .disc { font-size: 18px; font-family: var(--urbanist); color: rgb(255, 255, 255); line-height: 28px; margin-top: 20px; } .egx-faq-4-area { padding: 120px 0; } .egx-faq-4-area .section-title-wrap { max-width: 620px; margin: 0 auto; text-align: center; } .egx-faq-4-area .section-title-wrap .disc { margin-top: 25px; } .egx-faq-4-wrap { max-width: 1058px; margin: 55px auto 0; } .egx-faq-4-wrap .accordion { --bs-accordion-border-radius: 0px; } .egx-faq-4-wrap .accordion .accordion-item { border-width: 1px 0; border-style: solid; border-color: #dbdbdb; } .egx-faq-4-wrap .accordion .accordion-item:not(:last-child) { border-bottom: 0; } .egx-faq-4-wrap .accordion .accordion-item .accordion-header .accordion-button { padding: 30px 0; font-family: var(--urbanist); font-weight: 500; font-size: 32px; line-height: 30px; color: #0d0d0d; display: flex; align-items: center; justify-content: space-between; } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-faq-4-wrap .accordion .accordion-item .accordion-header .accordion-button { font-size: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-faq-4-wrap .accordion .accordion-item .accordion-header .accordion-button { font-size: 24px; } } @media (max-width: 575px) { .egx-faq-4-wrap .accordion .accordion-item .accordion-header .accordion-button { font-size: 22px; } } .egx-faq-4-wrap .accordion .accordion-item .accordion-header .accordion-button .icon { font-size: 32px; color: #313030; transition: all 0.4s ease; } .egx-faq-4-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) { background: transparent; box-shadow: none; font-weight: 600; } .egx-faq-4-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon { color: var(--egx-pr-1); } .egx-faq-4-wrap .accordion .accordion-item .accordion-header .accordion-button:focus { outline: none; box-shadow: none; } .egx-faq-4-wrap .accordion .accordion-item .accordion-header .accordion-button::after { display: none; } .egx-faq-4-wrap .accordion .accordion-item .accordion-body { padding-bottom: 30px; } .egx-faq-4-wrap .accordion .accordion-item .accordion-body .job-type { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 120px; } .egx-faq-4-wrap .accordion .accordion-item .accordion-body .job-type .item .name { font-weight: 500; font-size: 22px; line-height: 30px; color: #0d0d0d; } .egx-faq-4-wrap .accordion .accordion-item .accordion-body .job-type .item .cont { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 30px; color: #717171; } .egx-faq-4-wrap .accordion .accordion-item .accordion-body .disc { margin-top: 30px; color: #717171; } .egx-faq-4-wrap .accordion .accordion-item .accordion-body .faq-btn { margin-top: 35px; font-family: var(--urbanist); font-weight: 700; font-size: 16px; line-height: 30px; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; background: var(--egx-gd-2); display: inline-flex; padding: 13px 32px; border-radius: 100px; overflow: hidden; position: relative; } .egx-faq-4-wrap .accordion .accordion-item .accordion-body .faq-btn::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #b9d32a 0%, #209753 100%); transition: all 0.4s ease; opacity: 0; } .egx-faq-4-wrap .accordion .accordion-item .accordion-body .faq-btn .btn-text { position: relative; z-index: 2; } .egx-faq-4-wrap .accordion .accordion-item .accordion-body .faq-btn:hover::after { opacity: 1; } .egx-blog-3-wrap .card-img.img-cover img { height: 357px !important; } .egx-blog-1-area { padding-bottom: 105px; } .egx-blog-1-card .card-img img { height: 257px !important; } .egx-blog-1-area .section-title-wrap { max-width: 850px; margin: 0 auto; text-align: center; } @media (max-width: 575px) { .egx-blog-1-area .section-title-wrap { overflow: hidden; } } .egx-blog-1-wrap { margin-top: 35px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-blog-1-wrap { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .egx-blog-1-wrap { grid-template-columns: 1fr; } } .egx-blog-1-card { background-color: rgba(108, 108, 108, 0); border-style: solid; border-width: 0 1px 1px 1px; border-color: rgb(221, 221, 221); border-radius: 10px; } .egx-blog-1-card .card-top { overflow: hidden; position: relative; border-radius: 10px 10px 0 0; } .egx-blog-1-card .card-top .card-img { transition: all 0.5s ease; } .egx-blog-1-card .card-top .card-img:nth-child(1) { transform: translatex(50%) scalex(2); opacity: 0; filter: blur(10px); } .egx-blog-1-card .card-top .card-img:nth-child(2) { position: absolute; top: 0; left: 0; } .egx-blog-1-card .card-top .publish { position: absolute; right: 18px; bottom: 12px; background: var(--egx-gd-1); border-radius: 6px; padding: 15px 11.3px; z-index: 2; } .egx-blog-1-card .card-top .publish span { font-size: 20px; font-family: var(--urbanist); color: rgb(255, 255, 255); line-height: 1; font-weight: 900; display: block; text-align: center; text-transform: uppercase; } .egx-blog-1-card .card-content { padding: 24px 30px 30px 30px; border-radius: 0 0 10px 10px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-1-card .card-content { padding: 24px 20px; } } .egx-blog-1-card .card-content .author { display: grid; grid-template-columns: 50px auto; gap: 10px; align-items: center; } .egx-blog-1-card .card-content .author .auth-img img { width: 50px; height: 50px; border-radius: 50%; } .egx-blog-1-card .card-content .author .auth-cont { display: flex; flex-direction: column; } .egx-blog-1-card .card-content .author .name { font-size: 22px; font-family: var(--urbanist); color: rgb(30, 34, 43); font-weight: 800; line-height: 28px; } .egx-blog-1-card .card-content .author .position { font-size: 14px; font-family: var(--urbanist); font-weight: 500; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 14px; } .egx-blog-1-card .card-content .title { margin-top: 15px; font-size: 28px; color: rgb(30, 34, 43); font-weight: 800; line-height: 35px; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-1-card .card-content .title { font-size: 24px; line-height: 32px; } } .egx-blog-1-card .card-content .title a { background-image: linear-gradient(currentColor, currentColor); background-position: 0% 94%; background-repeat: no-repeat; background-size: 0% 1.5px; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } .egx-blog-1-card .card-content .title:hover { color: var(--egx-pr-1); } .egx-blog-1-card .card-content .title:hover a { background-size: 100% 1.5px; } .egx-blog-1-card:hover .card-top .card-img:nth-child(1) { transform: translatex(0) scalex(1); opacity: 1; filter: blur(0); } .egx-blog-1-card:hover .card-top .card-img:nth-child(2) { transform: translatex(-50%) scalex(2); opacity: 0; filter: blur(10px); } .egx-blog-3-area .section-title-wrap { max-width: 485px; text-align: center; margin: 0 auto; } .egx-blog-3-area .bottom-text { text-align: center; margin-top: 75px; font-size: 20px; color: rgb(38, 37, 36); line-height: 1.5; } .egx-blog-3-area .bottom-text a { font-weight: 800; text-decoration: underline; transition: all 0.4s ease; } .egx-blog-3-area .bottom-text a:hover { color: var(--egx-pr-1); } .egx-blog-3-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 28px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-blog-3-wrap { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-3-wrap { grid-template-columns: 1fr; } } .egx-blog-3-card { position: relative; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-3-card { max-width: 400px; margin: 0 auto; } } .egx-blog-3-card .card-img { overflow: hidden; border-radius: 10px; } .egx-blog-3-card .card-img img { border-radius: 10px; transition: all 0.4s ease; } .egx-blog-3-card .date { width: 80px; height: 80px; background: var(--egx-gd-1); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 5px 10px; position: absolute; top: 18px; left: 30px; } .egx-blog-3-card .date .date-text { font-size: 18px; font-family: var(--urbanist); color: rgb(255, 255, 255); text-transform: uppercase; line-height: 1.3; text-align: center; font-weight: 900; } .egx-blog-3-card .card-content { padding: 0 20px 0 22px; margin-top: -20px; position: relative; z-index: 2; } .egx-blog-3-card .card-content .meta { display: inline-flex; align-items: center; flex-wrap: wrap; background: var(--egx-gd-1); padding: 5px 16px; border-radius: 50px; gap: 0 12px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-3-card .card-content .meta { padding: 5px 20px; } } .egx-blog-3-card .card-content .meta .user .icon { font-size: 16px; color: #fff; } .egx-blog-3-card .card-content .meta .user .text { font-size: 16px; font-family: var(--urbanist); line-height: 1; color: #fff; font-weight: 800; text-transform: capitalize; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-3-card .card-content .meta .user .text { font-weight: 700; font-size: 15px; } } .egx-blog-3-card .card-content .title { font-size: 27px; font-weight: 800; line-height: 1.2; margin-top: 22px; } @media (max-width: 575px) { .egx-blog-3-card .card-content .title { font-size: 24px; } } .egx-blog-3-card .card-content .title a { color: rgb(38, 37, 36); background-image: linear-gradient(currentColor, currentColor); background-position: 0% 94%; background-repeat: no-repeat; background-size: 0% 1.5px; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } .egx-blog-3-card .card-content .title:hover a { background-size: 100% 1.5px; color: var(--egx-pr-1); } .egx-blog-3-card .card-content .disc { margin-top: 12px; color: rgb(82, 82, 82); } .egx-blog-3-card:hover .card-img img { transform: scale(1.1); } .egx-blog-4-area { padding: 140px 0; } @media (max-width: 575px) { .egx-blog-4-area { padding: 100px 0; } } .egx-blog-4-area .section-title-wrap { max-width: 665px; } .egx-blog-4-wrap .side-card-wrap { display: flex; flex-direction: column; gap: 35px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-4-wrap .side-card-wrap { gap: 40px; } } .egx-blog-4-card-big { position: relative; } .egx-blog-4-card-big::after { content: ""; position: absolute; width: 1px; height: 100%; right: -40.5px; top: 0; background: rgba(0, 57, 54, 0.2); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-4-card-big::after { display: none; } } .egx-blog-4-card-big .card-img { border-radius: 12px; overflow: hidden; } .egx-blog-4-card-big .card-img img { transition: all 0.8s ease; height: 522px !important; } .egx-blog-4-card-big .category { position: absolute; top: 24px; left: 24px; font-family: var(--urbanist); font-weight: 600; font-size: 14px; line-height: 30px; text-transform: uppercase; color: #fff; background-color: #209753; border-radius: 8px; padding: 2px 16px; } .egx-blog-4-card-big .content { margin-top: 38px; } .egx-blog-4-card-big .content .meta .publish { font-family: var(--urbanist); font-weight: 500; font-size: 18px; line-height: 30px; color: rgba(13, 13, 13, 0.65); position: relative; display: inline-flex; align-items: center; margin-right: 30px; } .egx-blog-4-card-big .content .meta .publish::after { content: ""; position: absolute; width: 4px; height: 4px; background: #191b2e; border-radius: 50%; right: -18px; } .egx-blog-4-card-big .content .meta .author { font-family: var(--urbanist); font-weight: 500; font-size: 18px; line-height: 30px; color: #0d0d0d; } .egx-blog-4-card-big .content .title { margin-top: 22px; font-size: 30px; line-height: 36px; } @media (max-width: 575px) { .egx-blog-4-card-big .content .title { margin-top: 11px; font-size: 23px; line-height: 28px; font-weight: 600; } } .egx-blog-4-card-big .content .title a { background-image: linear-gradient(currentColor, currentColor); background-position: 0% 94%; background-repeat: no-repeat; background-size: 0% 1.5px; color: #0d0d0d; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } .egx-blog-4-card-big .content .title:hover a { background-size: 100% 1.5px; } .egx-blog-4-card-big:hover .card-img img { transform: scale(1.1); } .egx-blog-4-card .meta .publish { font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 30px; color: rgba(13, 13, 13, 0.65); position: relative; display: inline-flex; align-items: center; margin-right: 24px; } .egx-blog-4-card .meta .publish::after { content: ""; position: absolute; width: 4px; height: 4px; background: #191b2e; border-radius: 50%; right: -15px; } .egx-blog-4-card .meta .author { font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 30px; color: #0d0d0d; } .egx-blog-4-card .title { font-weight: 600; font-size: 24px; line-height: 28px; margin-top: 11px; } .egx-blog-4-card .title a { background-image: linear-gradient(currentColor, currentColor); background-position: 0% 94%; background-repeat: no-repeat; background-size: 0% 1.5px; color: #0d0d0d; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } .egx-blog-4-card .title:hover a { background-size: 100% 1.5px; } .egx-blog-4-card .card-img { border-radius: 8px; overflow: hidden; margin-top: 24px; } .egx-blog-4-card .card-img img { transition: all 0.6s ease; height: 180px !important; } .egx-blog-4-card:hover .card-img img { transform: scale(1.15); } .egx-blog-5-area { padding: 120px 0; } .egx-blog-5-area .pagination-wrap { padding-top: 16px; } .egx-blog-5-top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px 60px; align-items: center; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-5-top { grid-template-columns: 1fr; } } .egx-blog-5-top .main-img-wrap { position: relative; } .egx-blog-5-top .main-img-wrap .img-cover { border-radius: 16px; overflow: hidden; } .egx-blog-5-top .main-img-wrap .img-cover img { transition: transform 500ms; transform: perspective(0) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1); transform-origin: center center; border-radius: 16px; } .egx-blog-5-top .main-img-wrap:hover .img-cover img { transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.1) scaleY(1.1); } .egx-blog-5-top .date { position: absolute; bottom: 28px; right: 28px; background: var(--egx-gd-2); font-family: var(--urbanist); font-weight: 700; font-size: 20px; line-height: 24px; text-align: center; color: #fff; border-radius: 8px; padding: 16px 20px; } .egx-blog-5-top .date span { display: block; } .egx-blog-5-top .content .author { display: grid; grid-template-columns: 60px auto; gap: 16px; align-items: center; } .egx-blog-5-top .content .author .auth-img { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; } .egx-blog-5-top .content .author .name { font-weight: 600; font-size: 24px; line-height: 24px; color: #0d0d0d; } .egx-blog-5-top .content .author .designation { font-family: var(--urbanist); font-weight: 400; font-size: 16px; line-height: 22px; background: var(--egx-gd-2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .egx-blog-5-top .content .title { font-size: 40px; line-height: 48px; color: #0d0d0d; margin-top: 35px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-5-top .content .title { font-size: 28px; line-height: 38px; } } .egx-blog-5-top .content .disc { color: #717171; margin-top: 30px; } .egx-blog-5-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-blog-5-wrap { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-5-wrap { grid-template-columns: 1fr; } } .egx-blog-6-area { padding: 120px 0; } .egx-blog-6-area .row { --bs-gutter-x: 2rem; } .egx-blog-6-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-6-wrap { grid-template-columns: 1fr; } } .egx-blog-7-area { padding: 120px 0; } .egx-blog-7-wrap { display: flex; flex-direction: column; gap: 32px; } .egx-blog-7-card { background: #fff; border: 1px solid rgba(108, 108, 108, 0.2); border-radius: 10px; overflow: hidden; } .egx-blog-7-card .blog-list-slider-wrap { position: relative; } .egx-blog-7-card .blog-list-slider-wrap .blog-list-slide-item { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } @media (max-width: 575px) { .egx-blog-7-card .blog-list-slider-wrap .blog-list-slide-item { height: 150px; } } .egx-blog-7-card .blog-list-slider-wrap .blog-list-slide-item img { object-fit: cover; width: 100%; transition: all 0.6s ease; height: 316px; } .egx-blog-7-card .blog-list-slider-wrap .blog-list-slide-item .egx-plybtn-1 { position: absolute; width: 84px; height: 84px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #1b95f8; transition: all 0.4s ease; } .egx-blog-7-card .blog-list-slider-wrap .blog-list-slide-item .egx-plybtn-1::before { content: ""; width: 100%; height: 100%; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; opacity: 0.2; animation: egx-plybtn-1 2s linear infinite; } .egx-blog-7-card .blog-list-slider-wrap .blog-list-slide-item .egx-plybtn-1::after { content: ""; width: 100%; height: 100%; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; opacity: 0.4; animation: egx-plybtn-1 4s linear infinite; } .egx-blog-7-card .blog-list-slider-wrap .blog-list-slide-item .egx-plybtn-1 i { position: relative; z-index: 2; } .egx-blog-7-card .blog-list-slider-wrap .blog-list-slide-item .egx-plybtn-1:hover { color: var(--egx-pr-1); } .egx-blog-7-card .blog-list-slider-wrap .blog-list-slide-item:hover img { transform: scale(1.05); } .egx-blog-7-card .blog-list-slider-wrap .egx-blog-slider-navigation .egx_blog_list_prev { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.2); border: 2px solid #fff; backdrop-filter: blur(5.5px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; left: 40px; transition: all 0.4s ease; } @media (max-width: 575px) { .egx-blog-7-card .blog-list-slider-wrap .egx-blog-slider-navigation .egx_blog_list_prev { left: 15px; } } .egx-blog-7-card .blog-list-slider-wrap .egx-blog-slider-navigation .egx_blog_list_prev:hover { color: var(--egx-pr-1); background-color: #fff; } .egx-blog-7-card .blog-list-slider-wrap .egx-blog-slider-navigation .egx_blog_list_next { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.2); border: 2px solid #fff; backdrop-filter: blur(5.5px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; right: 40px; transition: all 0.4s ease; } @media (max-width: 575px) { .egx-blog-7-card .blog-list-slider-wrap .egx-blog-slider-navigation .egx_blog_list_next { right: 15px; } } .egx-blog-7-card .blog-list-slider-wrap .egx-blog-slider-navigation .egx_blog_list_next:hover { color: var(--egx-pr-1); background-color: #fff; } .egx-blog-7-card .card-content { padding: 40px 44px; } @media (max-width: 575px) { .egx-blog-7-card .card-content { padding: 35px 20px; } } .egx-blog-7-card .card-content .meta-data { display: flex; align-items: center; gap: 15px 40px; flex-wrap: wrap; } .egx-blog-7-card .card-content .meta-data .name { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 20px; color: #0d0d0d; } .egx-blog-7-card .card-content .meta-data i { font-size: 18px; color: #003936; margin-right: 5px; } .egx-blog-7-card .card-content .title { font-size: 32px; line-height: 34px; color: #0d0d0d; margin-top: 24px; } @media (max-width: 575px) { .egx-blog-7-card .card-content .title { font-size: 26px; line-height: 32px; } } .egx-blog-7-card .card-content .disc { color: #717171; margin-top: 24px; } .egx-blog-7-card .card-content .blog-list-btn { margin-top: 24px; display: inline-flex; align-items: center; gap: 12px; padding: 11px 28px; background: #717171; border-radius: 100px; transition: all 0.4s ease; } .egx-blog-7-card .card-content .blog-list-btn .btn-text { font-family: var(--urbanist); font-weight: 700; font-size: 16px; line-height: 30px; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; transition: all 0.4s ease; } .egx-blog-7-card .card-content .blog-list-btn .btn-icon { font-size: 20px; color: #fff; transition: all 0.4s ease; } .egx-blog-7-card .card-content .blog-list-btn:hover { background-color: var(--egx-pr-1); } .fx-blog-details-content .image-pllx img { height: 650px !important; object-fit: cover; } .egx-blog-details-hero { padding: 260px 0 335px 0; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-blog-details-hero { padding: 150px 0 220px 0; } } @media (max-width: 575px) { .egx-blog-details-hero { padding: 150px 0 140px 0; } } .egx-blog-details-hero .breadcrumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; } .egx-blog-details-hero .breadcrumb .icon { font-size: 18px; color: #209753; transition: all 0.4s ease; } .egx-blog-details-hero .breadcrumb .text { font-family: var(--urbanist); font-weight: 600; font-size: 18px; line-height: 22px; letter-spacing: 0.02em; color: #fff; transition: all 0.4s ease; } .egx-blog-details-hero .breadcrumb:hover .icon { color: var(--egx-pr-1); } .egx-blog-details-hero .breadcrumb:hover .text { color: var(--egx-pr-1); } .egx-blog-details-hero .top-wrap { max-width: 1068px; margin: 100px auto 0; } @media (max-width: 575px) { .egx-blog-details-hero .top-wrap { margin: 60px auto 0; } } .egx-blog-details-hero .top-wrap .meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px 40px; margin-bottom: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-details-hero .top-wrap .meta { gap: 15px 20px; } } .egx-blog-details-hero .top-wrap .meta .item .icon { font-size: 18px; color: var(--egx-pr-1); } .egx-blog-details-hero .top-wrap .meta .item .text { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 20px; color: #fff; margin-left: 5px; display: inline-block; } .egx-blog-details-hero .top-wrap .hero-title { font-weight: 800; font-size: 70px; line-height: 80px; text-transform: capitalize; color: #fff; text-align: center; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-blog-details-hero .top-wrap .hero-title { font-size: 60px; line-height: 1.1; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-blog-details-hero .top-wrap .hero-title { font-size: 55px; line-height: 1.1; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-blog-details-hero .top-wrap .hero-title { font-size: 50px; line-height: 1.2; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-blog-details-hero .top-wrap .hero-title { font-size: 40px; line-height: 1.2; } } @media (max-width: 575px) { .egx-blog-details-hero .top-wrap .hero-title { font-size: 35px; line-height: 1.2; } } .egx-blog-details-area { padding-bottom: 120px; } .egx-blog-details-area .thumbails { margin-top: -245px; margin-bottom: 70px; position: relative; z-index: 2; border-radius: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-blog-details-area .thumbails { margin-top: -150px; } } @media (max-width: 575px) { .egx-blog-details-area .thumbails { margin-top: -80px; } } .egx-blog-details-area .blog-sub-details-wrap { max-width: 730px; margin: 0 auto; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap { padding: 28px 0; border-top: 1px solid #dfe1e5; border-bottom: 1px solid #dfe1e5; margin-top: 55px; display: flex; align-items: center; justify-content: space-between; gap: 25px 30px; flex-wrap: wrap; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .tag .title { font-size: 20px; line-height: 26px; color: #0d0d0d; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .tag .tag-items { margin-top: 15px; flex: 0 0 auto; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .tag .tag-items a { padding: 10px 18px; background: #f7f7f8; border-radius: 5px; display: inline-block; text-align: center; font-family: var(--urbanist); font-weight: 400; font-size: 14px; line-height: 20px; color: #717171; transition: all 0.4s ease; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .tag .tag-items a:hover { background-color: var(--egx-pr-1); color: #fff; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .share-wrap { flex: 0 0 auto; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .share-wrap .title { font-size: 20px; line-height: 26px; color: #0d0d0d; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .share-wrap .social-media { margin-top: 15px; display: flex; align-items: center; gap: 8px; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .share-wrap .social-media a { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: all 0.4s ease; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .share-wrap .social-media a:hover { transform: scale(0.9); } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .share-wrap .social-media .facebook { background-color: #3a5897; color: #fff; font-size: 20px; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .share-wrap .social-media .twitter { background-color: #000; color: #fff; font-size: 20px; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .share-wrap .social-media .wshatsapp { background-color: #29a71a; color: #fff; font-size: 22px; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .share-wrap .social-media .linkedin { background-color: #007bb5; color: #fff; font-size: 18px; } .egx-blog-details-area .blog-sub-details-wrap .tag-wrap .share-wrap .social-media .share { background-color: #dfe1e5; color: #000; font-size: 12px; } .egx-blog-details-area .blog-sub-details-wrap .comment-wrap { margin-top: 64px; padding: 32px; display: grid; grid-template-columns: 140px auto; align-items: center; gap: 28px; border-radius: 8px; overflow: hidden; background-image: url(../../../../../../../../themes/eergx/assets/img/bd-c-bg.png); } @media (max-width: 575px) { .egx-blog-details-area .blog-sub-details-wrap .comment-wrap { grid-template-columns: 1fr; padding: 30px 20px; } } .egx-blog-details-area .blog-sub-details-wrap .comment-wrap .user-img { width: 137px; height: 137px; border-radius: 50%; border: 3px solid #fff; overflow: hidden; } .comment-wrap .content .name { font-size: 22px; line-height: 26px; color: #0d0d0d; } .comment-wrap .content p { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 28px; color: #0d0d0d; margin: 12px 0 0 0; } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap { margin-top: 64px; border: 1px solid #dfe1e5; border-radius: 15px; padding: 40px; } @media (max-width: 575px) { .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap { padding: 30px 25px; } } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap .title { font-size: 32px; line-height: 26px; color: rgba(13, 13, 13, 0.88); } @media (max-width: 575px) { .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap .title { font-size: 28px; line-height: 38px; } } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap form { margin-top: 35px; display: flex; flex-direction: column; gap: 24px; } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap form .item { position: relative; } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap form .item:focus-within label { color: #209753; } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap form .item:focus-within::after { width: 100%; } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap form .item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 1px; background-color: #000; z-index: 2; transition: all 0.5s ease; } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap form .item label { font-family: var(--urbanist); font-weight: 400; font-size: 14px; line-height: 17px; color: rgba(13, 13, 13, 0.56); display: block; transition: color 0.3s ease; } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap form .item input { border: none; background-color: transparent; position: relative; outline: none; border-bottom: 1px solid #ced3ca; font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 19px; color: #0d0d0d; width: 100%; padding-bottom: 6px; } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap form .item input::placeholder { font-weight: 400; color: rgba(13, 13, 13, 0.8); } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap form .item textarea { border: none; background-color: transparent; position: relative; outline: none; border-bottom: 1px solid #ced3ca; font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 19px; color: #0d0d0d; width: 100%; margin-top: 10px; height: 74px; } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap form .item textarea::placeholder { font-weight: 400; color: rgba(13, 13, 13, 0.8); } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap form .item:nth-last-child(2)::after { bottom: 10px; } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap form .btn { align-self: self-start; box-shadow: none; border: none; outline: none; } .egx-blog-details-content .form-submit { display: none; } p.comment-form-cookies-consent { display: none; } .egx-blog-details-area .blog-sub-details-wrap .comment-form-wrap form .item.mesggage::after { bottom: 10px; } .egx-blog-details-content p { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 30px; color: #0d0d0d; margin-bottom: 25px; } .egx-blog-details-content .en_con p:nth-child(1)::first-letter { font-weight: 700; font-size: 48px; line-height: 30px; } .egx-blog-details-content h4 { font-family: var(--urbanist); font-weight: 700; font-size: 32px; line-height: 44px; color: #0d0d0d; margin-bottom: 30px; margin-top: 35px; } .egx-blog-details-content ul { display: flex; flex-direction: column; gap: 8px; } .egx-blog-details-content ul li { ont-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 28px; color: #313030; position: relative; padding-left: 28px; } .egx-blog-details-content ul li:after { content: url(../../../../../../../../themes/eergx/assets/img/pd-pin-icon.svg); position: absolute; left: 0; top: 3px; } .egx-blog-details-content blockquote { margin-top: 55px; border-radius: 8px; padding: 40px; position: relative; overflow: hidden; background-image: url(../../../../../../../../themes/eergx/assets/img/bd-c-bg.png); } .egx-blog-details-content blockquote p { margin: 0; } @media (max-width: 575px) { .egx-blog-details-content blockquote { padding: 35px 25px; } } .egx-blog-details-content .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-1.wp-block-columns-is-layout-flex { margin-left: -300px; margin-right: -300px; margin-top: 60px; } .egx-blog-details-content .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-1.wp-block-columns-is-layout-flex img { border-radius: 13px; width: 100%; } .egx-blog-details-content blockquote::after { content: ""; position: absolute; width: 5px; height: 100%; left: 0; top: 0; background: var(--egx-gd-2); } .egx-blog-details-content blockquote .icon { position: absolute; top: 24px; left: 32px; } .egx-blog-details-content blockquote blockquote { font-family: var(--urbanist); font-weight: 500; font-size: 20px; line-height: 30px; color: #0d0d0d; margin-bottom: 16px; } .egx-blog-details-content blockquote .name-wrap { display: flex; align-items: center; gap: 10px; } .egx-blog-details-content blockquote .name-wrap .line { width: 62px; height: 2px; background: var(--egx-gd-2); } @media (max-width: 575px) { .egx-blog-details-content blockquote .name-wrap .line { width: 40px; } } .egx-blog-details-content blockquote .name-wrap .name { font-size: 18px; line-height: 30px; text-transform: uppercase; color: #0d0d0d; } .egx-blog-details-feature { margin-top: 64px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-blog-details-feature { grid-template-columns: 1fr; } } .egx-blog-details-feature .item { overflow: hidden; border-radius: 12px; } .egx-blog-details-feature .item img { transition: all 0.6s ease; } .egx-blog-details-feature .item:hover img { transform: scale(1.08); } .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } .widget { margin: 0 0 1.5em; } .widget select { max-width: 100%; } .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } .custom-logo-link { display: inline-block; } .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } .gallery { margin-bottom: 1.5em; display: grid; grid-gap: 1.5em; } .gallery-item { display: inline-block; text-align: center; width: 100%; } .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); } .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); } .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); } .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); } .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); } .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); } .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); } .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); } .gallery-caption { display: block; } .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { display: none; } .infinity-end.neverending .site-footer { display: block; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } #primary[tabindex="-1"]:focus { outline: 0; } .alignleft { float: left; margin-right: 1.5em; margin-bottom: 1.5em; } .alignright { float: right; margin-left: 1.5em; margin-bottom: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } .egx-client-1-area { padding-bottom: 92px; } .egx-client-1-area:is(.client-4) { padding-top: 120px; } .egx-client-1-area .client-title { font-size: 30px; color: rgb(54, 53, 57); line-height: 42px; text-align: center; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-client-1-area .client-title { font-size: 26px; line-height: 38px; } } @media (max-width: 575px) { .egx-client-1-area .client-title { font-size: 24px; line-height: 35px; } } .egx-client-1-wrap { margin: 0 auto 0; max-width: 1080px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-client-1-wrap { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575px) { .egx-client-1-wrap { grid-template-columns: repeat(2, 1fr); } } .egx-client-1-wrap .client-item-wrap { display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 20px; padding: 10px 10px; min-height: 90px; overflow: hidden; } .egx-client-1-wrap .client-item-wrap .client-item { transition: all 0.5s ease; } .egx-client-1-wrap .client-item-wrap .client-item:nth-child(1) { transform: translatey(50%) scaley(2); opacity: 0; filter: blur(10px); } .egx-client-1-wrap .client-item-wrap .client-item:nth-child(2) { position: absolute; } .egx-client-1-wrap .client-item-wrap:hover .client-item:nth-child(1) { transform: translatey(0) scalex(1); opacity: 1; filter: blur(0); } .egx-client-1-wrap .client-item-wrap:hover .client-item:nth-child(2) { transform: translatey(-50%) scalex(2); opacity: 0; filter: blur(10px); } .egx-client-2-area { padding: 125px 0 135px 0; } .egx-client-2-area .section-title-wrap { max-width: 785px; margin: 0 auto; text-align: center; } .egx-client-2-area .section-title-wrap .disc { margin-top: 20px; color: rgb(113, 113, 113); } .egx-client-2-wrap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: center; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-client-2-wrap { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-client-2-wrap { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .egx-client-2-wrap { grid-template-columns: 1fr; max-width: 250px; margin: 45px auto 0; } } .egx-client-2-wrap .item { height: 155px; display: flex; align-items: center; justify-content: center; border: 1px solid rgb(170, 170, 170); border-radius: 78px; padding: 30px 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-client-2-wrap .item { height: 120px; } } .egx-client-2-wrap .item:hover img { animation: bounceIn 1s ease; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-client-2-action { grid-template-columns: 1fr; } } .egx-client-2-action .action-item { border: 1px solid rgb(170, 170, 170); border-radius: 62px; padding: 38px 10px 34px 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; } @media (max-width: 575px) { .egx-client-2-action .action-item { padding: 30px 20px; border-radius: 30px; } } .egx-client-2-action .action-item .icon { width: 49px; height: 49px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--egx-gd-1); color: #fff; font-size: 18px; } .egx-client-2-action .action-item .icon:hover i { animation: egx_zigzag 0.4s ease; } .egx-client-2-action .action-item .title { font-size: 17px; font-family: var(--urbanist); font-weight: 600; line-height: 22px; color: rgb(14, 14, 14); max-width: 72px; } .egx-client-2-action .action-item .link { font-size: 38px; font-family: var(--urbanist); font-weight: 900; color: rgb(14, 14, 14); line-height: 1.2; text-align: center; transition: all 0.4s ease; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-client-2-action .action-item .link { font-size: 30px; } } @media (max-width: 575px) { .egx-client-2-action .action-item .link { font-size: 26px; } } .egx-client-2-action .action-item .link:hover { color: var(--egx-pr-1); } .egx-client-3-area .section-title-wrap { max-width: 800px; margin: 0 auto; text-align: center; } .egx-client-3-area .section-title-wrap .title { font-size: 20px; text-transform: uppercase; line-height: 1.3; font-weight: 900; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .egx-client-3-wrap { margin-top: 28px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-client-3-wrap { grid-template-columns: repeat(4, 1fr); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-client-3-wrap { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-client-3-wrap { grid-template-columns: repeat(2, 1fr); gap: 15px 20px; } } .egx-client-3-wrap .client-item { display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 53px; padding: 22px 10px; overflow: hidden; } @media (max-width: 575px) { .egx-client-3-wrap .client-item { padding: 18px 8px; } } .egx-client-3-wrap .client-item .img { transition: all 0.5s ease; } @media (max-width: 575px) { .egx-client-3-wrap .client-item .img { max-width: 100px; } } .egx-client-3-wrap .client-item .img:nth-child(1) { transform: translatey(50%) scaley(2); opacity: 0; filter: blur(10px); } .egx-client-3-wrap .client-item .img:nth-child(2) { position: absolute; } .egx-client-3-wrap .client-item:hover .img:nth-child(1) { transform: translatey(0) scalex(1); opacity: 1; filter: blur(0); } .egx-client-3-wrap .client-item:hover .img:nth-child(2) { transform: translatey(-50%) scalex(2); opacity: 0; filter: blur(10px); } .egx-client-4-area { padding: 120px 0; } .egx-client-4-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-client-4-wrap { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .egx-client-4-wrap { gap: 20px; } } .egx-client-4-wrap .client-item { height: 120px; border: 1px solid #f3f3f3; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 5px 8px; } @media (max-width: 575px) { .egx-client-4-wrap .client-item { height: 100px; } } .egx-client-4-wrap .client-item:hover img { animation: bounceIn 1.2s ease; } .egx-feature-2-area { padding: 193px 0 95px 0; } .egx-feature-2-area:is(.feature-2-area-inner) { padding: 120px 0; } .egx-feature-2-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 75px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-feature-2-wrap { gap: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-feature-2-wrap { grid-template-columns: repeat(2, 1fr); gap: 60px 50px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-feature-2-wrap { grid-template-columns: 1fr; gap: 40px; } } .egx-feature-2-item { display: flex; flex-direction: column; align-items: center; text-align: center; } .egx-feature-2-item .icon:hover img { animation: bounceIn 0.8s ease; } .egx-feature-2-item .title { font-size: 30px; color: rgb(2, 2, 2); font-weight: 800; line-height: 40px; margin-top: 17px; } .egx-feature-2-item .disc { margin-top: 15px; } .egx-feature-3-area { padding: 140px 0 125px 0; } .egx-feature-3-area .section-title-wrap { max-width: 965px; text-align: center; margin: 0 auto; } .egx-feature-3-area .section-title-wrap .title { font-size: 40px; color: rgb(12, 12, 12); font-weight: 800; line-height: 1.375; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-feature-3-area .section-title-wrap .title { font-size: 36px; line-height: 1.3; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-feature-3-area .section-title-wrap .title { font-size: 35px; line-height: 1.3; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-feature-3-area .section-title-wrap .title { font-size: 30px; line-height: 1.3; } } @media (max-width: 575px) { .egx-feature-3-area .section-title-wrap .title { font-size: 27px; line-height: 1.3; } } .egx-feature-3-wrap { margin-top: 60px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 35px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-feature-3-wrap { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-feature-3-wrap { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-feature-3-wrap { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .egx-feature-3-wrap { grid-template-columns: 1fr; } } .egx-feature-3-item { text-align: center; position: relative; } .egx-feature-3-item .main-img { height: 200px; } .egx-feature-3-item .icon { position: absolute; width: 45px; height: 45px; border-radius: 50%; background: var(--egx-gd-1); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; top: -10px; right: 40px; } .egx-feature-3-item .title { font-size: 22px; color: rgb(12, 12, 12); font-weight: 800; line-height: 38px; margin-top: 5px; } .egx-feature-3-item:hover .icon { animation: wobble-vertical 0.7s ease; } .egx-about-2-area:is(.active) .shape-1 { transform: translateX(0); } .egx-about-2-area .shape-1 { position: absolute; bottom: 80px; right: 9px; z-index: -1; transform: translateX(600px); transition: 1s var(--cube-1); } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-about-2-area .shape-1 { max-width: 450px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-about-2-area .shape-1 { max-width: 400px; bottom: 40px; } } @media (max-width: 575px) { .egx-about-2-area .shape-1 { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-about-2-area .shape-1 { max-width: 350px; bottom: 30px; } } .egx-about-2-wrap { display: grid; grid-template-columns: 1fr 1.164fr; gap: 57px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-2-wrap { grid-template-columns: 1fr; } } .egx-about-2-left { position: relative; display: flex; justify-content: end; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-about-2-left { justify-content: center; } } .egx-about-2-left .pop-wrap { position: absolute; left: 0; top: 72px; width: 234px; height: 150px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-about-2-left .pop-wrap { left: -20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-about-2-left .pop-wrap { left: 15px; } } @media (max-width: 575px) { .egx-about-2-left .pop-wrap { left: 50%; right: auto; top: -30px; transform: translateX(-50%); } } .egx-about-2-left .pop-wrap::before { content: ""; position: absolute; width: 77px; height: 77px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.29); } .egx-about-2-left .pop-wrap .popup-video { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--egx-gd-1); font-size: 16px; color: #fff; position: relative; transition: all 0.4s ease; } .egx-about-2-left .pop-wrap .popup-video:hover { transform: scale(0.9); } .egx-about-2-left .main-img { border-radius: 20px; overflow: hidden; } .egx-about-2-left .main-img img { border-radius: 20px; } .egx-about-2-right .disc { color: rgb(113, 113, 113); margin-top: 14px; } .egx-about-2-right .message { font-size: 22px; font-weight: 600; line-height: 30px; color: #000; margin: 0 0 0 20px; position: relative; } .egx-about-2-right .message::after { content: ""; background: var(--egx-gd-1); position: absolute; left: -20px; top: 0; width: 5px; height: 100%; border-radius: 5px; } .egx-about-2-right .call { margin-top: 35px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .egx-about-2-right .call .icon { flex: 0 0 auto; width: 60px; height: 60px; background-color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; } .egx-about-2-right .call .icon:hover i { animation: egx_zigzag 0.4s ease; } .egx-about-2-right .call .call-cont .call-text { display: block; font-size: 15px; font-family: var(--urbanist); font-weight: 500; color: #000; line-height: 1.3; } .egx-about-2-right .call .call-cont .call-link { font-size: 24px; font-family: var(--urbanist); font-weight: 800; color: #000; transition: all 0.4s ease; } .egx-about-2-right .call .call-cont .call-link:hover { color: var(--egx-pr-1); } .egx-about-2-right .btn-wrap { margin-top: 40px; } .egx-about-3-area { padding-bottom: 270px; } .egx-about-3-wrap { display: grid; grid-template-columns: 1fr 1.26fr; gap: 65px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-3-wrap { grid-template-columns: 1fr; gap: 50px; } } .egx-about-3-left { position: relative; } .egx-about-3-left .main-img { overflow: hidden; border-radius: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-3-left .main-img { display: flex; justify-content: center; } } .egx-about-3-left .img-2 { position: absolute; left: -150px; bottom: -250px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-about-3-left .img-2 { left: -50px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-about-3-left .img-2 { left: -30px; bottom: -100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-about-3-left .img-2 { left: 0; bottom: -80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-about-3-left .img-2 { left: auto; bottom: 0; position: relative; margin-top: -200px; max-width: 400px; } } @media (max-width: 575px) { .egx-about-3-left .img-2 { position: relative; margin-top: -100px; max-width: 400px; left: auto; bottom: 0; } } .egx-about-3-right { margin-top: 66px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-3-right { margin-top: 0; } } .egx-about-3-right .disc { color: rgb(113, 113, 113); margin-top: 12px; } .egx-about-3-right blockquote { background: var(--egx-gd-1); padding: 34px 30px 25px 30px; border-radius: 10px; font-size: 16px; font-family: var(--urbanist); color: rgb(255, 255, 255); font-style: italic; line-height: 1.75; margin: 20px 0 36px 0; } .egx-about-3-right ul { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .egx-about-3-right ul li { display: flex; align-items: baseline; gap: 10px; } .egx-about-3-right ul li .icon { font-size: 25px; color: var(--egx-pr-1); transform: translateY(3px); } .egx-about-3-right ul li .list-text { font-size: 20px; font-family: var(--urbanist); color: rgb(12, 12, 12); font-weight: 800; line-height: 1; } .egx-about-3-right .action { margin-top: 50px; display: flex; align-items: center; flex-wrap: wrap; gap: 35px; } .egx-about-3-right .action .call { display: grid; grid-template-columns: 69px auto; gap: 18px; } .egx-about-3-right .action .call .icon { width: 69px; height: 69px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgb(74, 73, 73); color: #fff; font-size: 26px; } .egx-about-3-right .action .call .icon:hover i { animation: egx_zigzag 0.4s ease; } .egx-about-3-right .action .call .call-cont .call-text { font-size: 16px; font-family: var(--urbanist); color: rgb(12, 12, 12); font-weight: 500; line-height: 1; display: block; margin-bottom: 5px; } .egx-about-3-right .action .call .call-cont .link { font-size: 32px; font-family: var(--urbanist); color: rgb(12, 12, 12); font-weight: 800; line-height: 1.3; transition: all 0.4s ease; } .egx-about-3-right .action .call .call-cont .link:hover { color: var(--egx-pr-1); } .egx-about-4-area { position: relative; display: flex; justify-content: center; padding: 140px 0 189px 0; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-4-area { padding: 120px 0; } } .egx-about-4-area .bg-img { position: absolute; top: 0; } .egx-about-4-wrap { position: relative; max-width: 980px; margin: 0 auto; text-align: center; } .egx-about-4-wrap .egx-subtitle-2 { justify-content: center; } .egx-about-4-wrap:is(.active) .img-1 { transform: translate(0, 0) scale(1); } .egx-about-4-wrap:is(.active) .img-2 { transform: translate(0, 0) scale(1); } .egx-about-4-wrap:is(.active) .img-3 { transform: translate(0, 0) scale(1); } .egx-about-4-wrap:is(.active) .img-4 { transform: translate(0, 0) scale(1); } .egx-about-4-wrap .img-1 { position: absolute; left: -200px; top: -42px; transform: translate(82px, 174px) scale(0.5); transition: 0.6s var(--cube-1); } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-about-4-wrap .img-1 { max-width: 120px; top: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-about-4-wrap .img-1 { max-width: 90px; left: -100px; top: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-about-4-wrap .img-1 { max-width: 90px; left: 50px; top: -80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-4-wrap .img-1 { display: none; } } .egx-about-4-wrap .img-1 img { border-radius: 12px; } .egx-about-4-wrap .img-2 { position: absolute; left: -90px; bottom: -49px; transform: translate(-180px, -245px) scale(1.3); transition: 0.6s var(--cube-1); transition-delay: 0.4s; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-about-4-wrap .img-2 { left: -5px; bottom: 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-about-4-wrap .img-2 { max-width: 80px; left: 85px; bottom: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-about-4-wrap .img-2 { max-width: 80px; left: 85px; bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-4-wrap .img-2 { display: none; } } .egx-about-4-wrap .img-2 img { border-radius: 8px; } .egx-about-4-wrap .img-3 { position: absolute; bottom: 48px; right: 125px; transform: translate(215px, -200px) scale(1.3); transition: 0.6s var(--cube-1); transition-delay: 0.4s; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-about-4-wrap .img-3 { bottom: 90px; right: 215px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-about-4-wrap .img-3 { bottom: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-4-wrap .img-3 { display: none; } } .egx-about-4-wrap .img-3 img { border-radius: 8px; } .egx-about-4-wrap .img-4 { position: absolute; right: -350px; top: 119px; transform: translate(-211px, 265px) scale(0.5); transition: 0.6s var(--cube-1); } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-about-4-wrap .img-4 { right: -295px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-about-4-wrap .img-4 { max-width: 140px; right: -200px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-about-4-wrap .img-4 { max-width: 90px; right: -100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-4-wrap .img-4 { display: none; } } .egx-about-4-wrap .img-4 img { border-radius: 8px; } .egx-about-4-wrap .title { font-size: 40px; line-height: 48px; color: #0d0d0d; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-about-4-wrap .title { font-size: 35px; line-height: 45px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-about-4-wrap .title { font-size: 32px; line-height: 44px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-4-wrap .title { font-size: 28px; line-height: 36px; } } .egx-about-4-wrap .line-wrap { display: flex; justify-content: center; flex-direction: column; align-items: center; margin: 28px 0; } .egx-about-4-wrap .line-wrap .line { width: 2px; height: 92px; background: linear-gradient(180deg, rgba(32, 151, 83, 0) 0%, #6eb53e 100%); } .egx-about-4-wrap .line-wrap .circle { width: 20px; height: 20px; background: linear-gradient(90deg, #209753 0%, #b9d32a 100%); border: 3px solid #fff; border-radius: 50%; } .egx-about-5-area { padding: 120px 0 229px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-5-area { padding: 120px 0 120px; } } .egx-about-5-wrap .about-left { position: relative; margin-bottom: -109px; padding-left: 24px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-5-wrap .about-left { margin-bottom: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-5-wrap .about-left { max-width: 600px; margin: 0 auto; } } .egx-about-5-wrap .about-left::after { content: ""; position: absolute; width: calc(100% - 24px); height: 100%; left: 0; top: 0; background: #f1f4f3; border-radius: 12px; z-index: -1; } .egx-about-5-wrap .about-left .main-img { transform: translateY(24px); overflow: hidden; border-radius: 12px; } .egx-about-5-wrap .about-content .title { font-size: 40px; line-height: 48px; color: #0d0d0d; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .egx-about-5-wrap .about-content .title { font-size: 35px; line-height: 44px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-about-5-wrap .about-content .title { font-size: 32px; line-height: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-about-5-wrap .about-content .title { font-size: 28px; line-height: 36px; } } @media (max-width: 575px) { .egx-about-5-wrap .about-content .title { font-size: 25px; line-height: 33px; } } .egx-about-5-wrap .about-content .divider { width: 100%; height: 1px; background: #003936; opacity: 0.2; margin: 50px 0 64px 0; } .egx-about-5-wrap .about-content .about-feature { display: grid; grid-template-columns: repeat(2, 1fr); gap: 42px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-about-5-wrap .about-content .about-feature { grid-template-columns: 1fr; } } .egx-about-5-wrap .about-content .about-feature .item .icon { display: inline-block; } .egx-about-5-wrap .about-content .about-feature .item .icon:hover img { animation: bounceIn 0.8s ease; } .egx-about-5-wrap .about-content .about-feature .item .item-title { font-weight: 600; font-size: 28px; line-height: 38px; color: #0d0d0d; margin-top: 24px; } .egx-about-5-wrap .about-content .about-feature .item .disc { color: #717171; margin-top: 20px; } .egx-process-2-area:is(.active) .shape-1 { transform: translateX(0); } .egx-process-2-area .shape-1 { position: absolute; right: 0; bottom: 0; z-index: -1; transform: translateX(350px); transition: 0.8s var(--cube-1); } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-process-2-area .shape-1 { max-width: 240px; bottom: 20px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-process-2-area .shape-1 { display: none; } } .egx-process-2-area .section-title-wrap { max-width: 690px; margin: 0 auto; text-align: center; } .egx-process-2-wrap { margin-top: 50px; } .egx-process-2-wrap .step-top { max-width: 750px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; position: relative; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-process-2-wrap .step-top { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .egx-process-2-wrap .step-top { grid-template-columns: 1fr; gap: 40px; } } .egx-process-2-wrap .step-top .item { display: flex; flex-direction: column; justify-content: center; text-align: center; } .egx-process-2-wrap .step-top .item .title { margin-top: 20px; font-size: 23px; font-weight: 900; } .egx-process-2-wrap .step-top .step-number { position: absolute; width: 100%; bottom: -40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-process-2-wrap .step-top .step-number { display: none; } } .egx-process-2-wrap .step-top .step-number .number { display: flex; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; position: relative; } .egx-process-2-wrap .step-top .step-number .number::after { content: ""; width: 5px; height: 45px; position: absolute; top: 30px; background: var(--egx-gd-1); z-index: -2; } .egx-process-2-wrap .step-top .step-number .number span { width: 30px; height: 30px; border-radius: 50%; background: var(--egx-gd-1); display: flex; align-items: center; justify-content: center; } .egx-process-2-wrap .step-progress { display: flex; align-items: center; justify-content: space-between; padding: 40px 0; position: relative; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-process-2-wrap .step-progress { display: none; } } .egx-process-2-wrap .step-progress::after { content: ""; position: absolute; width: 100%; height: 12px; background: var(--egx-gd-1); z-index: -1; } .egx-process-2-wrap .step-progress .start, .egx-process-2-wrap .step-progress .finish { width: 103px; height: 103px; border-radius: 50%; background: var(--egx-gd-1); display: flex; align-items: center; justify-content: center; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-process-2-wrap .step-progress .start, .egx-process-2-wrap .step-progress .finish { width: 80px; height: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-process-2-wrap .step-progress .start, .egx-process-2-wrap .step-progress .finish { opacity: 0; visibility: hidden; } } .egx-process-2-wrap .step-progress .start .title, .egx-process-2-wrap .step-progress .finish .title { font-size: 20px; line-height: 1; font-family: var(--urbanist); font-weight: 800; color: #fff; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-process-2-wrap .step-progress .start .title, .egx-process-2-wrap .step-progress .finish .title { font-size: 16px; } } .egx-process-2-wrap .step-bottom { max-width: 1015px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-process-2-wrap .step-bottom { gap: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-process-2-wrap .step-bottom { grid-template-columns: repeat(2, 1fr); margin-top: 50px; } } @media (max-width: 575px) { .egx-process-2-wrap .step-bottom { grid-template-columns: 1fr; margin-top: 40px; } } .egx-process-2-wrap .step-bottom .item { display: flex; flex-direction: column; justify-content: center; text-align: center; } .egx-process-2-wrap .step-bottom .item .title { margin-top: 20px; font-size: 23px; font-weight: 900; } .egx-process-2-wrap .step-bottom .step-number { position: absolute; width: 100%; top: -41px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-process-2-wrap .step-bottom .step-number { display: none; } } .egx-process-2-wrap .step-bottom .step-number .number { display: flex; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; position: relative; } .egx-process-2-wrap .step-bottom .step-number .number::after { content: ""; width: 5px; height: 45px; position: absolute; bottom: 30px; background: var(--egx-gd-1); z-index: -2; } .egx-process-2-wrap .step-bottom .step-number .number span { width: 30px; height: 30px; border-radius: 50%; background: var(--egx-gd-1); display: flex; align-items: center; justify-content: center; } .egx-design-2-area { padding: 135px 0 105px 0; } .egx-design-2-wrap { display: grid; grid-template-columns: 1.202fr 1fr; gap: 80px; align-items: center; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-design-2-wrap { grid-template-columns: 1fr; } } .egx-design-2-left { display: grid; grid-template-columns: repeat(2, 1fr); gap: 35px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-design-2-left { grid-template-columns: 1fr; } } .egx-design-2-card { border-radius: 30px; background: #fff; padding: 34px 40px 45px 55px; position: relative; z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-design-2-card { padding: 34px 40px 40px 40px; } } .egx-design-2-card .icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; font-size: 35px; background: var(--egx-gd-1); border-radius: 50%; color: #fff; } .egx-design-2-card .title { font-size: 22px; line-height: 25px; font-weight: 900; color: rgb(35, 34, 28); margin-top: 15px; } .egx-design-2-card .disc { font-size: 17px; color: rgb(153, 153, 153); line-height: 24px; margin-top: 10px; } .egx-design-2-card .card-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; } .egx-design-2-card .card-btn .btn-text { font-size: 18px; font-family: var(--urbanist); color: rgb(35, 34, 28); font-weight: 700; line-height: 1; text-transform: capitalize; transition: all 0.4s ease; } .egx-design-2-card .card-btn .btn-icon { color: rgb(35, 34, 28); font-size: 15px; transition: all 0.4s ease; } .egx-design-2-card .card-btn:hover .btn-text { color: var(--egx-pr-1); } .egx-design-2-card .card-btn:hover .btn-icon { color: var(--egx-pr-1); transform: rotate(180deg); } .egx-design-2-right .disc { margin-top: 12px; color: rgb(34, 34, 34); } .egx-design-2-right .btn-wrap { margin-top: 45px; position: relative; z-index: 2; } .egx-marque-2-area { background: var(--egx-gd-1); padding: 40px 0 35px 0; overflow: hidden; } .egx-marque-2-area .marque-wrapper { display: flex; align-items: center; gap: 45px; } .egx-marque-2-area .marque-wrapper .item { display: flex; align-items: center; gap: 45px; flex: 0 0 auto; } .egx-marque-2-area .marque-wrapper .item .title { font-size: 40px; color: #fff; font-weight: 800; } @media (max-width: 575px) { .egx-marque-2-area .marque-wrapper .item .title { font-size: 26px; } } .egx-team-3-area { padding: 105px 0 125px 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-team-3-area { padding: 105px 0 155px 0; } } .egx-team-3-area .section-title-wrap { max-width: 685px; margin: 0 auto; text-align: center; } .egx-team-3-wrap { margin-top: 50px; position: relative; } .egx-team-3-left { max-width: 455px; border-radius: 30px; background: var(--egx-gd-1); padding: 4px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-team-3-left { width: 420px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-team-3-left { position: static; margin: 0 auto; } } .egx-team-3-left .left-wrap { background-color: #fff; border-radius: 30px; padding: 60px 40px; } @media (max-width: 575px) { .egx-team-3-left .left-wrap { padding: 50px 20px; } } .egx-team-3-left .left-wrap .experience { display: grid; grid-template-columns: repeat(2, 1fr); gap: 65px 70px; position: relative; justify-content: center; } .egx-team-3-left .left-wrap .experience::after { content: ""; position: absolute; left: 50%; top: 5px; height: 96%; width: 1px; background: var(--egx-gd-1); transform: translateX(-50%); } .egx-team-3-left .left-wrap .experience::before { content: ""; position: absolute; left: 0; top: 50%; height: 1px; width: 100%; background: var(--egx-gd-1); transform: translateY(-50%); } .egx-team-3-left .left-wrap .experience .item:nth-child(2) .number { -webkit-text-stroke-width: 1px; stroke-width: 1px; -webkit-text-stroke-color: #262524; stroke: #262524; color: #fff; } .egx-team-3-left .left-wrap .experience .item:nth-child(3) .number { -webkit-text-stroke-width: 1px; stroke-width: 1px; -webkit-text-stroke-color: #262524; stroke: #262524; color: #fff; } .egx-team-3-left .left-wrap .experience .item .number { font-size: 66px; font-family: var(--urbanist); color: rgb(38, 37, 36); text-transform: uppercase; line-height: 1; font-weight: 900; margin-bottom: 15px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-team-3-left .left-wrap .experience .item .number { font-size: 58px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-team-3-left .left-wrap .experience .item .number { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-team-3-left .left-wrap .experience .item .number { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-team-3-left .left-wrap .experience .item .number { font-size: 42px; } } @media (max-width: 575px) { .egx-team-3-left .left-wrap .experience .item .number { font-size: 38px; } } .egx-team-3-left .left-wrap .experience .item .title { font-size: 16px; line-height: 22px; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .egx-team-3-left .left-wrap .disc { margin-top: 45px; color: rgb(38, 37, 36); font-weight: 600; line-height: 28px; } .egx-team-3-right { max-width: 720px; margin-left: auto; position: relative; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-team-3-right { width: 640px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-team-3-right { margin: 80px auto 0; } } .egx-team-3-right .navigator { position: absolute; top: 30%; width: 100%; display: flex; align-items: center; justify-content: space-between; } .egx-team-3-right .navigator .egx-team-3-prev, .egx-team-3-right .navigator .egx-team-3-next { width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #fff; color: #000; font-size: 20px; position: relative; z-index: 2; box-shadow: 0 5px 29px 0 rgba(0, 0, 0, 0.12); transition: all 0.5s ease; } @media (max-width: 575px) { .egx-team-3-right .navigator .egx-team-3-prev, .egx-team-3-right .navigator .egx-team-3-next { width: 50px; height: 50px; } } .egx-team-3-right .navigator .egx-team-3-prev::after, .egx-team-3-right .navigator .egx-team-3-next::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: var(--egx-gd-1); transform: scale(0); transition: all 0.5s ease; } .egx-team-3-right .navigator .egx-team-3-prev i, .egx-team-3-right .navigator .egx-team-3-next i { position: relative; z-index: 3; } .egx-team-3-right .navigator .egx-team-3-prev:hover, .egx-team-3-right .navigator .egx-team-3-next:hover { color: #fff; } .egx-team-3-right .navigator .egx-team-3-prev:hover::after, .egx-team-3-right .navigator .egx-team-3-next:hover::after { transform: scale(1); } .egx-team-3-right .navigator .egx-team-3-prev { left: -35px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-team-3-right .navigator .egx-team-3-prev { left: -8px; } } .egx-team-3-right .navigator .egx-team-3-next { right: -35px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-team-3-right .navigator .egx-team-3-next { right: -8px; } } .egx-team-3-right .egx_team_3_active { overflow: hidden; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-team-3-item { max-width: 350px; margin: 0 auto; } } .egx-team-3-item .team-top { border-radius: 172px; position: relative; display: flex; justify-content: center; position: relative; overflow: hidden; } .egx-team-3-item .team-top::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--egx-gd-1); border-radius: 172px; mask: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0) 58%, #000 0); -webkit-mask: radial-gradient( circle at 50% 40%, rgba(0, 0, 0, 0) 58%, #000 0 ); transform: translateY(100px); transition: all 0.8s ease; } .egx-team-3-item .team-top .team-img img { border-radius: 172px; } .egx-team-3-item .team-top .plus-icon { position: absolute; bottom: 15px; width: 44px; height: 44px; border-radius: 20px; background: #fff; display: flex; align-items: center; justify-content: center; color: rgb(14, 25, 30); font-size: 18px; transition: all 0.6s ease; } .egx-team-3-item .team-top .social-media { position: absolute; bottom: 24px; display: flex; align-items: center; gap: 6px; z-index: 2; transform: translateY(100px); transition: all 0.8s ease; transition-delay: 0.2s; } .egx-team-3-item .team-top .social-media .social-link { width: 44px; height: 44px; border-radius: 50%; background: var(--egx-gd-1); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; transition: all 0.4s ease; } .egx-team-3-item .team-top .social-media .social-link:hover { color: #000; } .egx-team-3-item .team-top:hover::after { transform: translateY(0); } .egx-team-3-item .team-top:hover .social-media { transform: translateY(0); } .egx-team-3-item .team-top:hover .plus-icon { transform: translateY(100px); } .egx-team-3-item .content { text-align: center; margin-top: 28px; } .egx-team-3-item .content .name { font-size: 28px; color: rgb(18, 18, 18); font-weight: 800; line-height: 1.25; } .egx-team-3-item .content .designation { font-size: 16px; line-height: 1.3; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .egx-team-4-area .section-title-wrap { max-width: 680px; } .egx-team-4-area .section-title-wrap:is(.has-about) { max-width: 580px; } .egx-team-4-area .team-bottom { padding: 35px 20px; text-align: center; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; margin-top: 80px; } .egx-team-4-area .team-bottom .disc { font-size: 18px; line-height: 28px; color: rgba(13, 13, 13, 0.88); } .egx-team-4-area .team-bottom .link { background: var(--egx-gd-2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--urbanist); font-weight: 600; font-size: 18px; line-height: 28px; position: relative; } .egx-team-4-area .team-bottom .link::after { content: ""; position: absolute; left: 0; width: 100%; height: 100%; background-image: linear-gradient(#209753, #b9d32a); background-position: 0% 105%; background-repeat: no-repeat; background-size: 100% 1.6px; transition: all 0.6s ease; } .egx-team-4-area .team-bottom .link::before { content: ""; position: absolute; left: 0; width: 100%; height: 100%; background-image: linear-gradient(#000000, #000000); background-position: 0% 105%; background-repeat: no-repeat; background-size: 0% 1.6px; transition: all 0.6s ease; z-index: 2; } .egx-team-4-area .team-bottom .link:hover::before { background-size: 100% 1.6px; } .egx-team-4-wrap { margin-top: 55px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-team-4-wrap { grid-template-columns: repeat(3, 1fr); gap: 35px 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-team-4-wrap { grid-template-columns: repeat(2, 1fr); gap: 35px 25px; } } @media (max-width: 575px) { .egx-team-4-wrap { grid-template-columns: 1fr; gap: 35px 25px; } } .egx-team-4-card:nth-child(2) { margin-top: 92px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-team-4-card:nth-child(2) { margin-top: 0; } } .egx-team-4-card:nth-child(4) { margin-top: 92px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-team-4-card:nth-child(4) { margin-top: 0; } } .egx-team-4-card:nth-child(5) { margin-top: -92px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-team-4-card:nth-child(5) { margin-top: 0; } } .egx-team-4-card:nth-child(7) { margin-top: -92px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-team-4-card:nth-child(7) { margin-top: 0; } } .egx-team-4-card .card-img { border-radius: 12px; display: flex; align-items: end; justify-content: center; } .egx-team-4-card .card-img img { filter: grayscale(2); --webkit-filter: grayscale(2); transition: all 0.4s ease; } .egx-team-4-card .card-content { margin-top: 22px; } .egx-team-4-card .card-content .name { font-weight: 600; font-size: 23px; line-height: 28px; color: #0d0d0d; } .egx-team-4-card .card-content .designation { font-weight: 500; font-size: 16px; line-height: 19px; color: #209753; } .egx-team-4-card:hover .card-img img { --webkit-filter: grayscale(0); filter: grayscale(0); } .egx-team-details-area { padding: 260px 0 120px 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-team-details-area { padding: 150px 0 120px 0; } } .egx-team-details-area .team-details-top .breadcrumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; } .egx-team-details-area .team-details-top .breadcrumb .icon { font-size: 18px; color: #209753; transition: all 0.4s ease; } .egx-team-details-area .team-details-top .breadcrumb .text { font-family: var(--urbanist); font-weight: 600; font-size: 18px; line-height: 22px; letter-spacing: 0.02em; color: #209753; transition: all 0.4s ease; } .egx-team-details-area .team-details-top .breadcrumb:hover .icon { color: var(--egx-pr-1); } .egx-team-details-area .team-details-top .breadcrumb:hover .text { color: var(--egx-pr-1); } .egx-team-details-area .team-details-top .title-wrap { max-width: 600px; margin: 96px auto 0; text-align: center; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-team-details-area .team-details-top .title-wrap { margin-top: 50px; } } @media (max-width: 575px) { .egx-team-details-area .team-details-top .title-wrap { margin-top: 40px; } } .egx-team-details-area .team-details-top .title-wrap .hero-title { font-weight: 800; font-size: 70px; line-height: 82px; text-transform: capitalize; color: #0d0d0d; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-team-details-area .team-details-top .title-wrap .hero-title { font-size: 60px; line-height: 1.1; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-team-details-area .team-details-top .title-wrap .hero-title { font-size: 55px; line-height: 1.1; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-team-details-area .team-details-top .title-wrap .hero-title { font-size: 50px; line-height: 1.2; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-team-details-area .team-details-top .title-wrap .hero-title { font-size: 40px; line-height: 1.2; } } @media (max-width: 575px) { .egx-team-details-area .team-details-top .title-wrap .hero-title { font-size: 35px; line-height: 1.2; } } .egx-team-details-area .team-details-top .title-wrap .subtitle { font-family: var(--urbanist); font-weight: 500; font-size: 24px; line-height: 29px; color: #209753; margin-top: 15px; } .egx-team-details-wrap .team-left .main-img { display: flex; justify-content: center; } .egx-team-details-wrap .team-left .social-media { margin: 40px auto 0; display: flex; flex-direction: column; align-items: center; } .egx-team-details-wrap .team-left .social-media .title { font-weight: 600; font-size: 22px; line-height: 30px; text-align: center; color: #0d0d0d; } .egx-team-details-wrap .team-left .social-media .social-links { display: inline-flex; align-items: center; justify-content: center; gap: 0; background: #fff; border: 1px solid #eee; border-radius: 8px; margin-top: 18px; } .egx-team-details-wrap .team-left .social-media .social-links a { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: #0d0d0d; transition: all 0.4s ease; } .egx-team-details-wrap .team-left .social-media .social-links a:not(:last-child) { border-right: 1px solid #eee; } .egx-team-details-wrap .team-left .social-media .social-links a:hover { color: #209753; } .egx-team-details-wrap .team-right h3 { font-family: var(--urbanist); font-weight: 700; font-size: 40px; line-height: 52px; color: #0d0d0d; margin-top: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-team-details-wrap .team-right h3 { font-size: 35px; line-height: 42px; } } @media (max-width: 575px) { .egx-team-details-wrap .team-right h3 { font-size: 30px; line-height: 38px; } } .egx-team-details-wrap .team-right p { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 30px; color: #0d0d0d; margin-bottom: 0; } .egx-team-details-wrap .feature { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-team-details-wrap .feature { grid-template-columns: 1fr; } } .egx-team-details-wrap .feature .item { background: #fff; border: 1px solid rgba(113, 113, 113, 0.12); border-radius: 8px; padding: 24px; } .egx-team-details-wrap .feature .item .top { display: flex; align-items: center; gap: 16px; } .egx-team-details-wrap .feature .item .top .icon { width: 48px; height: 48px; background: rgba(0, 57, 54, 0.12); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 24px; color: #003936; } .egx-team-details-wrap .feature .item .top .title { font-weight: 600; font-size: 20px; line-height: 30px; color: #0d0d0d; } .egx-team-details-wrap .feature .item .disc { color: #717171; margin-top: 14px; } .egx-team-details-wrap .feature .item:hover .top .icon i { animation: bounceIn 0.8s ease; } .egx-team-details-wrap .team-right .skill .title { font-size: 40px; line-height: 52px; color: #0d0d0d; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-team-details-wrap .team-right .skill .title { font-size: 35px; line-height: 42px; } } @media (max-width: 575px) { .egx-team-details-wrap .team-right .skill .title { font-size: 30px; line-height: 38px; } } .egx-team-details-wrap .team-right .skill .disc { color: #0d0d0d; margin-top: 32px; } .egx-team-details-wrap .team-right .skill .skill-progress { margin-top: 30px; display: flex; flex-direction: column; gap: 20px; max-width: 572px; } .egx-team-details-wrap .team-right .skill .skill-progress .progress-item .progress-title { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 30px; color: #0d0d0d; } .egx-team-details-wrap .team-right .skill .skill-progress .progress-item .progress { height: 20px; border-radius: 25px; position: relative; z-index: 2; overflow: visible; display: flex; align-items: center; background-color: transparent; } .egx-team-details-wrap .team-right .skill .skill-progress .progress-item .progress::after { content: ""; position: absolute; width: 100%; height: 10px; background: linear-gradient( 90deg, rgba(32, 151, 83, 0.12) 0%, rgba(185, 211, 42, 0.12) 100% ); left: 0; border-radius: 25px; } .egx-team-details-wrap .team-right .skill .skill-progress .progress-item .progress .progress-bar { background-color: transparent; height: 20px; width: 0; border-radius: 25px 0 0 25px; position: relative; -webkit-transition: 1s all ease-in-out; transition: 1s all ease-in-out; } .egx-team-details-wrap .team-right .skill .skill-progress .progress-item .progress .progress-bar::after { content: ""; position: absolute; width: 8px; height: 20px; background: linear-gradient(90deg, #209753 0%, #b9d32a 100%); border-radius: 30px; right: 0; z-index: 3; } .egx-team-details-wrap .team-right .skill .skill-progress .progress-item .progress .progress-bar::before { content: ""; position: absolute; width: 100%; height: 10px; background: var(--egx-gd-2); border-radius: 25px 0 0 25px; } .egx-team-details-wrap .team-right .skill .skill-progress .progress-item .progress span { font-size: 18px; font-family: var(--urbanist); font-weight: 500; line-height: 30px; position: absolute; right: 0; top: -26px; background: var(--egx-gd-2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .egx-team-details-wrap .team-right .contact-wrap { max-width: 572px; margin-top: 65px; } .egx-team-details-wrap .team-right .contact-wrap .title { font-size: 44px; line-height: 48px; letter-spacing: -1px; color: #0d0d0d; } @media (max-width: 575px) { .egx-team-details-wrap .team-right .contact-wrap .title { font-size: 30px; line-height: 38px; } } .egx-team-details-wrap .team-right .contact-wrap form { margin-top: 55px; display: flex; flex-direction: column; gap: 24px; } .egx-team-details-wrap .team-right .contact-wrap form .item { position: relative; } .egx-team-details-wrap .team-right .contact-wrap form .item:focus-within label { color: #209753; } .egx-team-details-wrap .team-right .contact-wrap form .item:focus-within::after { width: 100%; } .egx-team-details-wrap .team-right .contact-wrap form .item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 1px; background-color: #000; z-index: 2; transition: all 0.5s ease; } .egx-team-details-wrap .team-right .contact-wrap form .item label { font-family: var(--urbanist); font-weight: 400; font-size: 14px; line-height: 17px; color: rgba(13, 13, 13, 0.56); display: block; transition: color 0.3s ease; } .egx-team-details-wrap .team-right .contact-wrap form .item input { border: none; background-color: transparent; position: relative; outline: none; border-bottom: 1px solid #ced3ca; font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 19px; color: #0d0d0d; width: 100%; padding-bottom: 6px; } .egx-team-details-wrap .team-right .contact-wrap form .item input::placeholder { font-weight: 400; color: rgba(13, 13, 13, 0.8); } .egx-team-details-wrap .team-right .contact-wrap form .item textarea { border: none; background-color: transparent; position: relative; outline: none; border-bottom: 1px solid #ced3ca; font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 19px; color: #0d0d0d; width: 100%; margin-top: 10px; height: 74px; } .egx-team-details-wrap .team-right .contact-wrap form .item textarea::placeholder { font-weight: 400; color: rgba(13, 13, 13, 0.8); } .egx-team-details-wrap .team-right .contact-wrap form .item:nth-last-child(2)::after { bottom: 10px; } .egx-team-details-wrap .team-right .contact-wrap form .btn { align-self: self-start; box-shadow: none; border: none; outline: none; } .egx-explore-3-area { padding: 230px 0 140px 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-explore-3-area { padding: 120px 0; } } .egx-explore-3-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px 0; align-items: end; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-explore-3-wrap { grid-template-columns: 1fr; } } .egx-explore-3-left { position: relative; } .egx-explore-3-left .left-img { position: absolute; bottom: -20px; right: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-explore-3-left .left-img { right: 0; } } @media (max-width: 575px) { .egx-explore-3-left .left-img { display: none; } } .egx-explore-3-left .disc { color: rgb(113, 113, 113); margin-top: 15px; max-width: 605px; } .egx-explore-3-left .message { padding-left: 35px; position: relative; max-width: 340px; } .egx-explore-3-left .message::after { content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: var(--egx-gd-1); } .egx-explore-3-left .message .subtitle { font-size: 18px; font-family: "Urbanist"; line-height: 1.2; background: var(--egx-gd-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .egx-explore-3-left .message .title { font-size: 32px; color: rgb(0, 0, 0); line-height: 1.25; font-weight: 900; margin-top: 5px; } .egx-explore-3-left ul { margin-top: 30px; display: flex; flex-direction: column; gap: 8px; } .egx-explore-3-left ul li { display: flex; align-items: baseline; gap: 8px; } .egx-explore-3-left ul li .icon { font-size: 20px; color: var(--egx-pr-1); transform: translateY(1.2px); } .egx-explore-3-left ul li .list-text { font-size: 20px; font-family: var(--urbanist); color: rgb(0, 0, 0); font-weight: 700; line-height: 1.2; } .egx-explore-3-left .btn-wrap { margin-top: 35px; } .egx-explore-3-right { position: relative; } @media (max-width: 575px) { .egx-explore-3-right .right-img { display: none; } } .egx-explore-3-right .goal { position: absolute; bottom: -10px; left: -20px; max-width: 310px; border-radius: 30px; box-shadow: 0 0 59px 0 rgba(0, 0, 0, 0.13); background-color: #fff; padding: 20px 30px 20px 40px; } @media (max-width: 575px) { .egx-explore-3-right .goal { position: static; padding: 25px 20px; } } .egx-explore-3-right .goal .title { font-size: 27px; color: rgb(20, 21, 21); line-height: 1.2; font-weight: 900; } .egx-explore-3-right .goal .goal-wrap { margin-top: 26px; display: flex; flex-direction: column; gap: 45px; } .egx-explore-3-right .goal .goal-wrap .item { display: flex; flex-wrap: wrap; gap: 20px; } .egx-explore-3-right .goal .goal-wrap .item .icon { width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--egx-gd-1); color: #fff; font-size: 30px; } .egx-explore-3-right .goal .goal-wrap .item .number { font-size: 30px; color: rgb(20, 21, 21); line-height: 1; font-weight: 900; } .egx-explore-3-right .goal .goal-wrap .item .item-title { font-size: 20px; color: rgb(82, 82, 82); font-weight: 700; line-height: 1.2; font-weight: 600; } .egx-power-3-area .section-wrap { transform: translateY(82px); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-power-3-area .section-wrap { transform: translateY(0); } } .egx-power-3-area .section-title-wrap { max-width: 750px; margin: 0 auto; text-align: center; } .egx-power-3-wrap { max-width: 1220px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px 20px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-power-3-wrap { grid-template-columns: 1fr; } } .egx-power-3-card { border-radius: 10px; overflow: hidden; background-color: rgb(255, 255, 255); } .egx-power-3-card .card-top { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px 0; height: 170px; } @media (max-width: 575px) { .egx-power-3-card .card-top { height: 130px; } } .egx-power-3-card .card-top .capacitye { background: rgb(33, 151, 72); display: flex; flex-direction: column; justify-content: center; padding: 0 30px 0 58px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-power-3-card .card-top .capacitye { padding: 0 30px; } } @media (max-width: 575px) { .egx-power-3-card .card-top .capacitye { padding: 0 20px; } } .egx-power-3-card .card-top .capacitye .title { font-size: 20px; color: rgb(255, 255, 255); font-weight: 800; text-transform: uppercase; } .egx-power-3-card .card-top .capacitye .number { color: rgb(255, 255, 255); font-size: 80px; font-weight: 800; line-height: 1; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-power-3-card .card-top .capacitye .number { font-size: 60px; } } @media (max-width: 575px) { .egx-power-3-card .card-top .capacitye .number { font-size: 50px; } } .egx-power-3-card .card-top .capacitye .number .type { font-size: 18px; font-weight: 700; transform: translate(4px, -40px); display: inline-block; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-power-3-card .card-top .capacitye .number .type { transform: translate(4px, -20px); } } @media (max-width: 575px) { .egx-power-3-card .card-top .capacitye .number .type { transform: translate(4px, -20px); } } .egx-power-3-card .card-top .card-img { background-color: rgb(239, 242, 247); display: flex; align-items: center; justify-content: center; } .egx-power-3-card .disc { color: rgb(80, 78, 78); line-height: 28px; padding: 30px 35px 20px 60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-power-3-card .disc { padding: 30px; } } @media (max-width: 575px) { .egx-power-3-card .disc { padding: 20px; } } .egx-power-3-card .card-content { padding: 45px 35px 35px 60px; border: 2px solid rgb(237, 239, 238); border-radius: 0 0 10px 10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-power-3-card .card-content { padding: 40px 30px 35px 30px; } } @media (max-width: 575px) { .egx-power-3-card .card-content { padding: 40px 20px 35px 20px; } } .egx-power-3-card .card-content ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-power-3-card .card-content ul { grid-template-columns: 1fr; } } .egx-power-3-card .card-content ul li { display: flex; align-items: baseline; gap: 5px; } .egx-power-3-card .card-content ul li .icon { font-size: 18px; } .egx-power-3-card .card-content ul li .list-text { font-size: 20px; font-family: var(--urbanist); color: rgb(20, 21, 21); font-weight: 700; line-height: 1.3; } .egx-power-3-card .card-content .btn-wrap { margin-top: 35px; } .egx-testimonial-3-area .egx_testimonial_3_active { overflow: hidden; } .egx-testimonial-3-area .navigator { width: 310px; display: flex; align-items: center; justify-content: center; gap: 8px; transform: translate(28px, -44px); position: relative; z-index: 2; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-testimonial-3-area .navigator { transform: translate(28px, -55px); } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-testimonial-3-area .navigator { position: absolute; right: 0; transform: translate(0, -55px); width: 150px; } } @media (max-width: 575px) { .egx-testimonial-3-area .navigator { position: absolute; right: 0; transform: translate(0, 0); width: 150px; } } .egx-testimonial-3-area .navigator .egx-test-3-prev, .egx-testimonial-3-area .navigator .egx-test-3-next { width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgb(36, 36, 36); color: rgb(36, 36, 36); position: relative; transition: all 0.4s ease; } .egx-testimonial-3-area .navigator .egx-test-3-prev::after, .egx-testimonial-3-area .navigator .egx-test-3-next::after { content: ""; position: absolute; width: 55px; height: 55px; border-radius: 50%; background: var(--egx-gd-1); transform: scale(0); transition: all 0.4s ease; } .egx-testimonial-3-area .navigator .egx-test-3-prev i, .egx-testimonial-3-area .navigator .egx-test-3-next i { position: relative; z-index: 2; } .egx-testimonial-3-area .navigator .egx-test-3-prev:hover, .egx-testimonial-3-area .navigator .egx-test-3-next:hover { border-color: #fff; color: #fff; } .egx-testimonial-3-area .navigator .egx-test-3-prev:hover::after, .egx-testimonial-3-area .navigator .egx-test-3-next:hover::after { transform: scale(1); } .egx-testimonial-3-area .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .egx-testimonial-3-item .item-left .main-img img { transform: scale(1); } .egx-testimonial-3-item { display: grid; grid-template-columns: 338px auto; gap: 80px; padding-top: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-testimonial-3-item { display: flex; flex-direction: column; align-items: center; gap: 50px; } } .egx-testimonial-3-item .item-left { position: relative; display: flex; justify-content: end; } .egx-testimonial-3-item .item-left .quote { position: absolute; top: -30px; left: 0; } .egx-testimonial-3-item .item-left .main-img { width: 310px; height: 310px; border-radius: 50%; margin-top: 10px; overflow: hidden; } @media (max-width: 575px) { .egx-testimonial-3-item .item-left .main-img { width: 290px; height: 290px; } } .egx-testimonial-3-item .item-left .main-img img { border-radius: 50%; transform: scale(0); transition: all 1s ease; } .egx-testimonial-3-item .item-right .subtitle { font-size: 17px; font-family: var(--urbanist); color: rgb(38, 37, 36); font-weight: 700; text-transform: uppercase; line-height: 1.2; } .egx-testimonial-3-item .item-right blockquote { font-size: 43px; color: rgb(38, 37, 36); font-weight: 800; line-height: 1.5; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-testimonial-3-item .item-right blockquote { font-size: 34px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-testimonial-3-item .item-right blockquote { font-size: 28px; } } @media (max-width: 575px) { .egx-testimonial-3-item .item-right blockquote { font-size: 24px; } } .egx-testimonial-3-item .item-right .user { margin-top: 35px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .egx-testimonial-3-item .item-right .user .user-img img { border-radius: 50%; } .egx-testimonial-3-item .item-right .user .name { font-size: 27px; font-weight: 800; color: rgb(13, 13, 13); line-height: 1.2; } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-testimonial-3-item .item-right .user .name { font-size: 24px; } } @media (max-width: 575px) { .egx-testimonial-3-item .item-right .user .name { font-size: 22px; } } .egx-testimonial-3-item .item-right .user .rating { display: flex; align-items: center; gap: 5px; margin-top: 5px; } .egx-testimonial-3-item .item-right .user .rating i { color: rgb(234, 144, 52); font-size: 19px; } .egx-testimonial-4-wrap { position: relative; } .egx-testimonial-4-wrap .testimonial-left { max-width: 474px; display: flex; flex-direction: column; justify-content: space-between; gap: 62px; } .egx-testimonial-4-wrap .testimonial-right { max-width: 778px; position: absolute; right: 0; top: 39px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-testimonial-4-wrap .testimonial-right { position: static; margin-top: 60px; } } .egx-testimonial-4-wrap .testimonial-right .egx_testimonial_4_active .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .egx-testimonial-4-item .main-img-wrap .main-img { transform: translateY(0); } .egx-testimonial-4-wrap .testimonial-right .egx_testimonial_4_active .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .egx-testimonial-4-item .content blockquote { transform: translateX(0); } .egx-testimonial-4-wrap .testimonial-right .egx_testimonial_4_active .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .egx-testimonial-4-item .content .divider::after { transform: translateX(0); } .egx-testimonial-4-preview .preview-item { border-radius: 8px; cursor: pointer; } .egx-testimonial-4-preview .egx-t4-pargination { font-family: var(--urbanist); font-weight: 500; font-size: 20px; line-height: 34px; color: #717171; margin-bottom: 40px; } .egx-testimonial-4-preview .egx-t4-pargination .swiper-pagination-current { font-weight: 700; font-size: 40px; color: #209753; } .egx-testimonial-4-item { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-testimonial-4-item { grid-template-columns: 1fr; gap: 35px; } } .egx-testimonial-4-item .main-img-wrap { position: relative; border-radius: 12px; max-width: 320px; } .egx-testimonial-4-item .main-img-wrap .main-img { transform: translateY(450px); transition: all 0.8s ease; } .egx-testimonial-4-item .main-img-wrap .quote { position: absolute; top: 12px; right: 12px; } .egx-testimonial-4-item .content { overflow: hidden; } .egx-testimonial-4-item .content .rating { display: flex; align-items: center; gap: 6px; font-size: 20px; color: #efae06; } .egx-testimonial-4-item .content blockquote { font-family: var(--urbanist); font-weight: 500; font-size: 20px; line-height: 30px; color: #0d0d0d; margin: 28px 0 36px 0; transform: translateX(200px); transition: all 0.6s ease; } .egx-testimonial-4-item .content blockquote span { background: linear-gradient(90deg, #209753 0%, #b9d32a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .egx-testimonial-4-item .content .divider { width: 100%; height: 1px; background: rgba(0, 57, 54, 0.12); display: flex; align-items: center; position: relative; margin-bottom: 38px; } .egx-testimonial-4-item .content .divider::after { content: ""; position: absolute; left: 0; width: 40px; height: 2px; background: #209753; transform: translateX(500px); transition: all 0.7s ease; } .egx-testimonial-4-item .content .name { font-weight: 600; font-size: 24px; line-height: 32px; color: #0d0d0d; } .egx-testimonial-4-item .content .designation { font-family: var(--urbanist); font-weight: 400; font-size: 16px; line-height: 26px; color: #717171; } .egx-testimonial-5-area .section-title-wrap { max-width: 620px; } .egx-testimonial-5-area .egx_t5_slider_active { margin-top: 60px; padding-bottom: 120px; } .egx-testimonial-5-area .egx_t5_slider_active .egx-t5-pargination { display: flex; align-items: center; justify-content: center; margin-top: 40px; padding: 12px 0; position: relative; z-index: 2; } .egx-testimonial-5-area .egx_t5_slider_active .egx-t5-pargination span { display: flex; align-items: center; justify-content: center; transition: all 0.5s ease; } .egx-testimonial-5-area .egx_t5_slider_active .egx-t5-pargination .swiper-pagination-bullet-active { position: relative; margin: 0 10px; background-color: #209753; } .egx-testimonial-5-area .egx_t5_slider_active .egx-t5-pargination .swiper-pagination-bullet-active::after { content: ""; position: absolute; width: 24px; height: 24px; border: 1px solid #209753; border-radius: 50%; } .egx-testimonial-5-area .pagination-wrap { padding-top: 16px; } .egx-testimonial-5-item { display: flex; align-items: center; justify-content: center; position: relative; border-radius: 12px; overflow: hidden; } .egx-testimonial-5-item .img-wrap { width: 100%; height: 100%; overflow: hidden; } .egx-testimonial-5-item .img-wrap img { transition: transform 500ms; transform: perspective(0) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1); transform-origin: center center; } .egx-testimonial-5-item .popup-video { position: absolute; width: 72px; height: 72px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .egx-testimonial-5-item .popup-video::before { content: ""; width: 100%; height: 100%; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; opacity: 0.2; animation: egx-plybtn-1 2s linear infinite; } .egx-testimonial-5-item .popup-video::after { content: ""; width: 100%; height: 100%; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; opacity: 0.4; animation: egx-plybtn-1 4s linear infinite; } .egx-testimonial-5-item .popup-video .icon { color: #209753; font-size: 12px; position: relative; z-index: 2; transition: all 0.4s ease; } .egx-testimonial-5-item .popup-video:hover .icon { color: var(--egx-pr-1); } .egx-testimonial-5-item:hover .img-wrap img { transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.1) scaleY(1.1); } .egx-testimonial-5-wrap { display: flex; flex-direction: column; gap: 52px; } .egx-testimonial-5-card { display: grid; grid-template-columns: 320px auto; gap: 64px; align-items: center; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-testimonial-5-card { grid-template-columns: 1fr; gap: 40px; } } .egx-testimonial-5-card .card-img { border-radius: 7px; overflow: hidden; max-width: 320px; } .egx-testimonial-5-card .card-img img { -webkit-filter: grayscale(3); filter: grayscale(3); transition: all 0.4s ease; } .egx-testimonial-5-card .card-img:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); transform: scale(1.1); } .egx-testimonial-5-card .card-content blockquote { font-family: var(--urbanist); font-weight: 400; font-size: 24px; line-height: 34px; color: #0d0d0d; } .egx-testimonial-5-card .card-content .dot-wrap { margin: 35px 0; display: flex; align-items: center; gap: 10px; } .egx-testimonial-5-card .card-content .dot-wrap span { display: block; width: 6px; height: 6px; background: #209753; border-radius: 50%; } .egx-testimonial-5-card .card-content .name { font-family: var(--urbanist); font-weight: 500; font-size: 22px; line-height: 26px; color: #0d0d0d; } .egx-testimonial-5-card .card-content .designation { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 22px; color: rgba(13, 13, 13, 0.64); display: inline-block; margin-top: 5px; } @keyframes egx-plybtn-1 { 0% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(1.6); } } .egx-testimonial-6-area { padding: 120px 0; } .egx-testimonial-6-area .section-title-wrap { max-width: 875px; } .egx-testimonial-6-card { max-width: 1167px; margin: 55px auto 0; background: #fff; border-radius: 12px; display: grid; grid-template-columns: 408px auto; gap: 40px; align-items: center; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-testimonial-6-card { grid-template-columns: 1fr; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-testimonial-6-card .main-img { display: flex; justify-content: center; } } .egx-testimonial-6-card .content { padding: 20px 60px 20px 0; display: flex; flex-direction: column; gap: 20px 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-testimonial-6-card .content { padding: 0 40px 40px 40px; } } @media (max-width: 575px) { .egx-testimonial-6-card .content { padding: 0 20px 40px 20px; } } .egx-testimonial-6-card .content blockquote { font-family: var(--urbanist); font-weight: 400; font-size: 28px; line-height: 40px; color: #0d0d0d; margin-bottom: 5px; } @media (max-width: 575px) { .egx-testimonial-6-card .content blockquote { font-size: 23px; line-height: 36px; } } .egx-testimonial-6-card .content .author { display: flex; align-items: center; gap: 5px 30px; justify-content: space-between; flex-wrap: wrap; position: relative; } .egx-testimonial-6-card .content .author .name { font-size: 22px; line-height: 30px; text-transform: uppercase; color: #0d0d0d; position: relative; z-index: 2; } .egx-testimonial-6-card .content .author .designation { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 30px; color: #313030; position: relative; z-index: 2; } .egx-testimonial-6-card .content .author .quote-icon { position: absolute; right: 0; } @media (max-width: 575px) { .egx-testimonial-6-card .content .author .quote-icon { max-width: 80px; } } .egx-choose-4-area { position: relative; overflow: hidden; } .egx-choose-4-area .tarbain-img { position: absolute; top: 86px; right: 0; overflow: hidden; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-choose-4-area .tarbain-img { display: none; } } .egx-choose-4-area .tarbain-img img { transform: translateY(500px); transition: 1.2s var(--cube-1); } .egx-choose-4-area .tarbain-img:is(.active) img { transform: translateY(0); } .egx-choose-4-wrap .choose-img { display: grid; grid-template-columns: 1fr 2.76fr; gap: 40px; position: relative; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-choose-4-wrap { transform: translateX(0); } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-choose-4-wrap { grid-template-columns: 1fr; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-choose-4-wrap .choose-img { gap: 25px; } } @media (max-width: 575px) { .egx-choose-4-wrap .choose-img { display: block; } } .egx-choose-4-wrap .choose-img .img-1 { position: relative; z-index: 2; } .egx-choose-4-wrap .choose-img .img-1 img { border-radius: 12px; } @media (max-width: 575px) { .egx-choose-4-wrap .choose-img .img-1 { display: none; } } .egx-choose-4-wrap .choose-img .img-2 { overflow: hidden; border-radius: 12px; } .egx-choose-4-wrap .choose-img .img-3 { position: absolute; left: 20px; bottom: -35px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .egx-choose-4-wrap .choose-img .img-3 { max-width: 300px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-choose-4-wrap .choose-img .img-3 { max-width: 250px; } } @media (max-width: 575px) { .egx-choose-4-wrap .choose-img .img-3 { max-width: 240px; bottom: -80px; } } .egx-choose-4-wrap .choose-content .disc { color: #717171; margin-top: 30px; } .feature__four { display: flex; flex-direction: column; gap: 35px; } @media (max-width: 575px) { .feature__four { gap: 30px; } } .feature__four .item { display: grid; grid-template-columns: 88px auto; gap: 16px 28px; align-items: center; } @media (max-width: 575px) { .feature__four .item { grid-template-columns: 1fr; } } .feature__four .item .title { font-size: 22px; line-height: 36px; color: #0d0d0d; margin-bottom: 10px; } .feature__four .item .feature-disc { line-height: 28px; color: #717171; } .feature__four .item .icon:hover img { animation: bounceIn 0.8s ease; } .egx-choose-5-area .choose-wrap { padding: 120px 0 66px 0; position: relative; max-width: 1920px; margin: 0 auto; overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-choose-5-area .choose-wrap { padding: 100px 0 0 0; } } .egx-choose-5-area .choose-wrap .bg-img { position: absolute; left: 0; top: 0; z-index: -1; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-choose-5-area .choose-wrap .bg-img { display: none; } } .egx-choose-5-area .choose-wrap .bg-img img { height: 100%; } .egx-choose-5-wrap { max-width: 714px; margin-left: auto; } .egx-choose-5-wrap .section-title-wrap { margin-bottom: 55px; } .egx-choose-5-wrap .section-title-wrap .disc { color: #717171; margin-top: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-choose-5-wrap .section-title-wrap .disc { color: #0d0d0d; } } .egx-choose-5-card { padding: 32px; background: #fff; border-radius: 8px; max-width: 520px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-choose-5-card { box-shadow: 0 0 5px 0 rgba(134, 134, 134, 0.123); } } .egx-choose-5-card:not(:last-child) { margin-bottom: 32px; } .egx-choose-5-card:nth-child(3) { margin-left: 137px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-choose-5-card:nth-child(3) { margin-left: 0; } } .egx-choose-5-card:nth-child(4) { margin-left: 75px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-choose-5-card:nth-child(4) { margin-left: 0; } } .egx-choose-5-card .title { font-weight: 600; font-size: 24px; line-height: 36px; color: #0d0d0d; } .egx-choose-5-card .card-disc { font-weight: 400; font-size: 16px; line-height: 26px; color: #717171; } .egx-contact-4-area { height: 985px; position: relative; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-contact-4-area { height: 785px; } } .egx-contact-4-area::after { content: ""; position: absolute; width: 100%; height: 303px; left: 0; bottom: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%); } .egx-contact-4-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .egx-contact-4-bg img { object-fit: cover; width: 100%; height: 100%; } .egx-contact-4-form { max-width: 404px; padding: 52px 40px 40px 40px; border-radius: 12px; } @media (max-width: 575px) { .egx-contact-4-form { padding: 50px 25px 40px 25px; } } .egx-contact-4-form .title { font-weight: 700; font-size: 32px; line-height: 36px; color: #003936; } @media (max-width: 575px) { .egx-contact-4-form .title { font-size: 28px; } } .egx-contact-4-form .divider { width: 100%; height: 1px; background: rgba(26, 45, 78, 0.2); margin: 38px 0 35px 0; position: relative; display: flex; align-items: center; } .egx-contact-4-form .divider::after { content: ""; position: absolute; width: 40px; height: 3px; background: #209753; left: 24px; animation: line-slide 6s linear infinite alternate; } @media (max-width: 575px) { .egx-contact-4-form .divider::after { animation: line-slide-2 6s linear infinite alternate; } } .egx-contact-4-form form { display: flex; flex-direction: column; gap: 24px; } .egx-contact-4-form form label { font-family: var(--urbanist); font-weight: 500; font-size: 14px; line-height: 17px; color: rgba(0, 57, 54, 0.72); display: block; margin-bottom: 8px; } .egx-contact-4-form form input { height: 49px; width: 100%; padding: 16px 20px; border: 1px solid rgba(0, 57, 54, 0.2); border-radius: 8px; outline: none; font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 19px; color: #003936; } .egx-contact-4-form form .nice-select { height: 49px; width: 100%; border: 1px solid rgba(0, 57, 54, 0.2); border-radius: 8px; font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 19px; color: #003936; display: flex; align-items: center; } .egx-contact-4-form form .nice-select::after { width: 10px; height: 10px; border-bottom: 2px solid #209753; border-right: 2px solid #209753; margin-top: -6px; right: 18px; } .egx-contact-4-form form button { font-family: var(--urbanist); font-weight: 600; font-size: 16px; line-height: 30px; letter-spacing: -0.01em; text-transform: capitalize; color: #fff; width: 100%; padding: 9.5px 20px; border-radius: 8px; background: -webkit-linear-gradient(130deg, #209753 0%, #b9d32a 100%); position: relative; } .egx-contact-4-form form button::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 8px; background: var(--egx-gd-2); transition: all 0.4s ease; } .egx-contact-4-form form button span { position: relative; z-index: 2; } .egx-contact-4-form form button:hover::after { opacity: 0; } @keyframes line-slide { 0% { transform: translateX(0%); } 100% { transform: translateX(600%); } } @keyframes line-slide-2 { 0% { transform: translateX(0%); } 100% { transform: translateX(400%); } } .egx-contact-5-area { padding-top: 120px; overflow: hidden; } .egx-contact-5-area .map { width: 100%; height: 680px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .egx-contact-5-area .map { height: 500px; } } @media (max-width: 575px) { .egx-contact-5-area .map { height: 350px; } } .egx-contact-5-area .map iframe { width: 100%; height: 100%; } .egx-contact-5-wrap { padding-bottom: 180px; position: relative; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-contact-5-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; padding-bottom: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-contact-5-wrap { display: grid; grid-template-columns: 1fr; gap: 60px; padding-bottom: 100px; } } .egx-contact-5-content { max-width: 572px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-contact-5-content { max-width: 500px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-contact-5-content { max-width: 100%; } } .egx-contact-5-content { display: flex; flex-direction: column; gap: 24px; } .egx-contact-5-content .item { position: relative; } .egx-contact-5-content .item:focus-within label { color: #209753; } .egx-contact-5-content .item:focus-within::after { width: 100%; } .egx-contact-5-content .item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 1px; background-color: #000; z-index: 2; transition: all 0.5s ease; } .egx-contact-5-content .item label { font-family: var(--urbanist); font-weight: 400; font-size: 14px; line-height: 17px; color: rgba(13, 13, 13, 0.56); display: block; transition: color 0.3s ease; } .egx-contact-5-content .item input { border: none; background-color: transparent; position: relative; outline: none; border-bottom: 1px solid #ced3ca; font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 19px; color: #0d0d0d; width: 100%; padding-bottom: 6px; } .egx-contact-5-content .item input::placeholder { font-weight: 400; color: rgba(13, 13, 13, 0.8); } .egx-contact-5-content .item textarea { border: none; background-color: transparent; position: relative; outline: none; border-bottom: 1px solid #ced3ca; font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 19px; color: #0d0d0d; width: 100%; margin-top: 10px; height: 74px; } .egx-contact-5-content .item textarea::placeholder { font-weight: 400; color: rgba(13, 13, 13, 0.8); } .egx-contact-5-content .item:nth-last-child(2)::after { bottom: 10px; } .egx-contact-5-content .btn { align-self: self-start; box-shadow: none; border: none; outline: none; } .egx-contact-5-imgs { max-width: 712px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; align-items: center; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .egx-contact-5-imgs { right: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-contact-5-imgs { position: static; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-contact-5-imgs { margin: 0 auto; } } @media (max-width: 575px) { .egx-contact-5-imgs { grid-template-columns: 1fr; } } .egx-contact-5-imgs::after { content: ""; position: absolute; bottom: -109px; width: 460px; height: 755px; background: rgba(185, 211, 42, 0.08); z-index: -1; transform: translateX(-50%); left: 50%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-contact-5-imgs::after { display: none; } } .egx-contact-5-imgs .right-img-wrap { display: flex; flex-direction: column; gap: 32px; } .egx-our_history-1-area { padding: 120px 0; overflow: hidden; } .egx-our_history-1-area .section-title-wrap { max-width: 944px; margin: 0 auto; text-align: center; } .egx-our_history-1-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 41px; position: relative; align-items: center; justify-items: center; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-our_history-1-wrap { grid-template-columns: repeat(3, 1fr); align-items: start; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-our_history-1-wrap { grid-template-columns: repeat(2, 1fr); align-items: start; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-our_history-1-wrap { grid-template-columns: repeat(2, 1fr); align-items: start; } } @media (max-width: 575px) { .egx-our_history-1-wrap { grid-template-columns: 1fr; align-items: start; } } .egx-our_history-1-wrap::after { content: ""; position: absolute; width: 1920px; height: 1px; background: var(--egx-gd-2); opacity: 0.72; z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-our_history-1-wrap::after { display: none; } } .egx-our_history-1-card { position: relative; } .egx-our_history-1-card::after { content: ""; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--egx-gd-2); border: 3px solid #fff; left: 0; top: 44.9%; transform: translateY(50%); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-our_history-1-card::after { top: 44.5%; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-our_history-1-card::after { display: none; } } .egx-our_history-1-card .main-img { filter: grayscale(3); --webkit-filter: grayscale(3); transition: all 0.4s ease; } .egx-our_history-1-card .content { margin-top: 95px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-our_history-1-card .content { margin-top: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-our_history-1-card .content { margin-top: 30px; } } .egx-our_history-1-card .content .title { font-size: 26px; line-height: 38px; color: #0d0d0d; } .egx-our_history-1-card .content .disc { margin-top: 15px; color: #717171; } .egx-our_history-1-card:hover .main-img { filter: grayscale(0); --webkit-filter: grayscale(0); } .egx-story-1-area { padding: 16px; position: relative; overflow: hidden; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-story-1-area { padding: 60px 16px; } } .egx-story-1-area:is(.active) .tarbain { transform: translateY(0); } .egx-story-1-area .tarbain { position: absolute; right: 0; bottom: 0; transform: translateY(750px); transition: all 2.5s ease; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .egx-story-1-area .tarbain { max-width: 350px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-story-1-area .tarbain { max-width: 320px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-story-1-area .tarbain { display: none; } } .egx-story-1-wrap { display: grid; grid-template-columns: 1fr 1.12fr; gap: 60px 72px; align-items: center; position: relative; z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-story-1-wrap { grid-template-columns: 1fr; } } .egx-story-1-wrap .main-img { overflow: hidden; border-radius: 0 16px 16px 0; } .egx-story-1-wrap .story-content .story-title-2 { margin-left: 60px; } @media (max-width: 575px) { .egx-story-1-wrap .story-content .story-title-2 { margin-left: 0; } } .egx-story-1-wrap .story-content .line-wrap { max-width: 580px; display: flex; flex-direction: column; align-items: center; margin-top: 50px; } .egx-story-1-wrap .story-content .line-wrap .line { width: 2px; height: 92px; background: linear-gradient(180deg, rgba(32, 151, 83, 0) 0%, #6eb53e 100%); } .egx-story-1-wrap .story-content .line-wrap .circle { width: 20px; height: 20px; background: var(--egx-gd-2); border: 3px solid #fff; border-radius: 50%; } .egx-story-1-wrap .story-content .disc { max-width: 468px; margin-left: 60px; margin-top: 50px; color: #717171; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-story-1-wrap .story-content .disc { margin-left: 0; } } .egx-story-1-wrap .story-content .btn-wrap { margin-top: 44px; margin-left: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-story-1-wrap .story-content .btn-wrap { margin-left: 0; } } .egx-gallery-1-area { padding: 0 0 120px 0; } .egx-gallery-1-area .wrapper { max-width: 1920px; margin: 0 auto; overflow: hidden; } .egx-gallery-1-wrap { display: flex; gap: 32px; align-items: start; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-gallery-1-wrap { flex-wrap: wrap; padding: 0 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-gallery-1-wrap { flex-direction: column; align-items: center; padding: 0 20px; } } .egx-gallery-1-wrap .item { flex: 0 0 auto; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-gallery-1-wrap .item { max-width: 400px; } } .egx-gallery-1-wrap .item:nth-child(even) img { border-radius: 8px; } .egx-gallery-1-wrap .item img { border-radius: 12px; --webkit-filter: grayscale(3); filter: grayscale(3); transition: all 0.4s ease; } .egx-gallery-1-wrap .item:hover img { --webkit-filter: grayscale(0); filter: grayscale(0); } .egx-work-1-area { padding: 120px 0; overflow: hidden; } .egx-work-1-area .thumbnail { margin-top: 55px; overflow: hidden; border-radius: 12px; } .egx-work-1-wrap { max-width: 1058px; margin: 0 auto; } .egx-work-1-item-wrap { margin-top: 120px; display: flex; flex-direction: column; gap: 64px; } .egx-work-1-item:nth-child(even) .point { transform: translateX(-424px); } .egx-work-1-item:nth-child(even) .point .line { width: 1645px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .egx-work-1-item:nth-child(even) .point .line { width: 1420px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-work-1-item:nth-child(even) .point .line { width: 1298px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-work-1-item:nth-child(even) .point .line { width: 1060px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-work-1-item:nth-child(even) .point .line { width: 870px; } } @media (max-width: 575px) { .egx-work-1-item:nth-child(even) .point .line { width: 660px; } } .egx-work-1-item:nth-child(even) .item-content { transform: translateX(220px); } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-work-1-item:nth-child(even) .item-content { transform: translateX(0); } } .egx-work-1-item:nth-child(even) .item-content:nth-child(even) { grid-template-columns: 1.04fr 1fr; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-work-1-item:nth-child(even) .item-content:nth-child(even) { flex-direction: column-reverse; } } .egx-work-1-item:nth-child(even) .item-content:nth-child(even) .item-right { margin-left: auto; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-work-1-item:nth-child(even) .item-content:nth-child(even) .item-right { margin-left: 0; } } .egx-work-1-item .point { display: flex; align-items: center; gap: 0; } .egx-work-1-item .point .number { display: flex; justify-content: center; align-items: center; padding: 8px; width: 59px; height: 54px; background: #dfe1e5; border-radius: 4px; flex: 0 0 auto; } .egx-work-1-item .point .line { width: 1598px; height: 1px; background: #dfe1e5; flex: 0 0 auto; } .egx-work-1-item .item-content { display: grid; grid-template-columns: 1fr 1.04fr; gap: 62px; margin-top: 52px; align-items: center; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-work-1-item .item-content { display: flex; flex-direction: column; gap: 30px; } } .egx-work-1-item .item-content .item-img { overflow: hidden; border-radius: 12px; } .egx-work-1-item .item-content .item-img img { transition: all 0.6s ease; } .egx-work-1-item .item-content .item-img:hover img { transform: scale(1.1); } .egx-work-1-item .item-content .item-right { max-width: 465px; } .egx-work-1-item .item-content .item-right .title { font-size: 32px; line-height: 46px; color: #0d0d0d; } .egx-work-1-item .item-content .item-right .disc { line-height: 28px; color: #717171; margin-top: 30px; } .egx-work-1-item .item-content .item-right .btn-wrap { margin-top: 40px; } .egx-career-details-area { padding: 120px 0; } .egx-career-details-wrap { display: grid; grid-template-columns: 1.8fr 1fr; gap: 60px 140px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .egx-career-details-wrap { gap: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .egx-career-details-wrap { grid-template-columns: 1fr; } } .egx-career-details-wrap .career-left-content h3 { font-family: var(--urbanist); font-weight: 700; font-size: 40px; line-height: 45px; color: #0d0d0d; margin-bottom: 28px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .egx-career-details-wrap .career-left-content h3 { font-size: 35px; line-height: 42px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .egx-career-details-wrap .career-left-content h3 { font-size: 32px; line-height: 40px; } } @media (max-width: 575px) { .egx-career-details-wrap .career-left-content h3 { font-size: 28px; line-height: 36px; } } .egx-career-details-wrap .career-left-content h3:not(:first-child) { margin-top: 55px; } .egx-career-details-wrap .career-left-content p { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 30px; color: #0d0d0d; margin-bottom: 0; } .egx-career-details-wrap .career-left-content ul { display: flex; flex-direction: column; gap: 16px; } .egx-career-details-wrap .career-left-content ul li { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 28px; color: #0d0d0d; } .egx-career-details-wrap .career-left-content ul li img { transform: translateY(2px); } .egx-career-details-wrap .career-right-content { display: flex; flex-direction: column; gap: 48px; } .egx-career-details-wrap .career-right-content .job-info { background: #f7f7f8; border-radius: 8px; padding: 40px; } .egx-career-details-wrap .career-right-content .job-info .item { display: flex; flex-wrap: wrap; gap: 10px 15px; justify-content: space-between; align-items: center; border-bottom: 1px solid #e9e9e9; padding: 20px 0; } .egx-career-details-wrap .career-right-content .job-info .item:nth-child(1) { padding-top: 0; } .egx-career-details-wrap .career-right-content .job-info .item .title { font-family: var(--urbanist); font-weight: 400; font-size: 18px; line-height: 28px; color: #0d0d0d; margin-bottom: 0; } .egx-career-details-wrap .career-right-content .job-info .item .title img { margin-right: 10px; transform: translateY(-2px); } .egx-career-details-wrap .career-right-content .job-form { background: linear-gradient( 90deg, rgba(32, 151, 83, 0.12) 0%, rgba(185, 211, 42, 0.12) 100% ), #ffffff; border-radius: 12px; padding: 48px 36px 40px 36px; } .egx-career-details-wrap .career-right-content .job-form .icon-1 { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 10px; width: 92px; height: 92px; background: linear-gradient( 90deg, rgba(32, 151, 83, 0.16) 0%, rgba(185, 211, 42, 0.16) 100% ); border-radius: 46px; margin: 0 auto; } .egx-career-details-wrap .career-right-content .job-form .icon-1:hover img { animation: bounceIn 0.8s ease; } .egx-career-details-wrap .career-right-content .job-form form { margin-top: 35px; display: flex; flex-direction: column; gap: 24px; } .egx-career-details-wrap .career-right-content .job-form form .item { position: relative; } .egx-career-details-wrap .career-right-content .job-form form .item:focus-within label { color: #209753; } .egx-career-details-wrap .career-right-content .job-form form .item:focus-within::after { width: 100%; } .egx-career-details-wrap .career-right-content .job-form form .item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 1px; background-color: #000; z-index: 2; transition: all 0.5s ease; } .egx-career-details-wrap .career-right-content .job-form form .item label { font-family: var(--urbanist); font-weight: 400; font-size: 14px; line-height: 17px; color: rgba(13, 13, 13, 0.56); display: block; transition: color 0.3s ease; } .egx-career-details-wrap .career-right-content .job-form form .item input { border: none; background-color: transparent; position: relative; outline: none; border-bottom: 1px solid #ced3ca; font-family: var(--urbanist); font-weight: 500; font-size: 16px; line-height: 19px; color: #0d0d0d; width: 100%; padding-bottom: 6px; } .egx-career-details-wrap .career-right-content .job-form form .item input::placeholder { font-weight: 400; color: rgba(13, 13, 13, 0.8); } .egx-career-details-wrap .career-right-content .job-form form .btn { margin-top: 12px; box-shadow: none; border: none; outline: none; justify-content: center; } .egx-career-details-wrap .career-right-content .job-form form .btn .btn-text { text-transform: uppercase; }