/** about-section **/ .about-section{ position: relative; } .image_block_one .image-box{ position: relative; display: block; } .image_block_one .image-box .image{ border-radius: 20px; } .image_block_one .image-box .image img{ width: 100%; border-radius: 20px; } .image_block_one .image-box .rotate-box{ position: absolute; display: flex; align-items: center; justify-content: center; top: 50%; right: 0px; margin-top: -93px; width: 186px; height: 186px; line-height: 186px; background: #fff; border-radius: 50%; box-shadow: 0px 10px 70px 0px rgba(0, 0, 0, 0.08); } .image_block_one .image-box .rotate-box .curved-circle{ position: absolute; left: 93px; top: 7px; font-size: 14px; line-height: 20px; font-weight: 800; text-transform: uppercase; color: var(--title-color); } .image_block_one .image-box .rotate-box .icon-box img{ display: inline-block; width: auto; } .content_block_one .content-box{ position: relative; display: block; } .content_block_one .content-box .tabs-box .tab-btn-box{ position: relative; max-width: 510px; margin-bottom: 33px; } .content_block_one .content-box .tabs-box .tab-btns{ position: relative; display: flex; align-items: center; justify-content: space-between; border: 1px solid #E4E4E4; border-radius: 10px; } .content_block_one .content-box .tabs-box .tab-btns .tab-btn{ position: relative; display: inline-block; width: 170px; text-align: center; font-size: 14px; line-height: 20px; font-weight: 600; text-transform: uppercase; padding: 15px 15px; cursor: pointer; color: var(--title-color); border-radius: 10px; z-index: 1; transition: all 500ms ease; } .content_block_one .content-box .tabs-box .tab-btns .tab-btn.active-btn{ color: #fff; } .content_block_one .content-box .tabs-box .tab-btns .tab-btn:before{ position: absolute; content: ''; width: calc(100% + 2px); height: calc(100% + 2px); left: 0px; top: 0px; border-radius: 10px; z-index: -1; opacity: 0; transition: all 500ms ease; } .content_block_one .content-box .tabs-box .tab-btns .tab-btn.active-btn:before{ opacity: 1; } .content_block_one .content-box .tabs-content .inner-box p{ margin-bottom: 32px; } .content_block_one .content-box .tabs-content .list-style-one li{ float: left; width: 50%; } .about-section .image-layer{ position: absolute; right: 66px; bottom: 120px; -webkit-animation: service_hexagon_2 15s infinite linear; -moz-animation: service_hexagon_2 15s infinite linear; -o-animation: service_hexagon_2 15s infinite linear; animation: service_hexagon_2 15s infinite linear; } /** about-style-two **/ .about-style-two{ position: relative; background: #F7F7F7; } .image_block_three .image-box{ position: relative; display: block; } .image_block_three .image-box .image{ position: relative; display: block; border: 10px solid #fff; border-radius: 8px; box-shadow: 0px 0px 54px 0px rgba(0, 0, 0, 0.10); } .image_block_three .image-box .image img{ width: 100%; } .image_block_three .image-box .funfact-inner{ position: absolute; bottom: 70px; width: 440px; background: #fff; box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.10); border-radius: 8px 75px 75px 8px; overflow: hidden; z-index: 1; } .image_block_three .image-box .funfact-inner .funfact-block{ position: relative; display: block; float: left; width: 50%; padding: 34px 20px 34px 30px; } .image_block_three .image-box .funfact-inner .funfact-block .count-outer{ position: relative; display: flex; align-items: center; font-size: 50px; line-height: 50px; font-family: var(--title-font); color: var(--title-color); font-weight: 600; margin-bottom: -4px; overflow: hidden; } .image_block_three .image-box .funfact-inner .funfact-block p{ font-size: 18px; line-height: 26px; } .image_block_three .image-box .funfact-inner .funfact-block .count-outer .symble{ position: relative; top: -9px; } .image_block_three .image-box .funfact-inner .funfact-block:first-child{ } .image_block_three .image-box .funfact-inner .funfact-block:first-child .count-outer, .image_block_three .image-box .funfact-inner .funfact-block:first-child p{ color: #fff; } .content_block_three .content-box{ position: relative; display: block; } .content_block_three .content-box .inner-box .single-item{ position: relative; display: flex; background: #fff; border-radius: 140px; padding: 25px 30px; align-items: center; gap: 20px; margin-bottom: 20px; } .content_block_three .content-box .inner-box .single-item:last-child{ margin-bottom: 0px; } .content_block_three .content-box .inner-box .single-item .icon-box{ position: relative; display: inline-block; width: 80px; height: 80px; line-height: 80px; min-width: 80px; text-align: center; border-radius: 50%; font-size: 40px; color: #fff; } .content_block_three .content-box .inner-box .single-item h3{ display: block; font-size: 24px; line-height: 30px; font-weight: 600; margin-bottom: 8px; } .content_block_three .content-box .inner-box .single-item p{ font-size: 15px; line-height: 26px; } .about-style-two .rotate-box{ position: absolute; display: flex; align-items: center; justify-content: center; top: 100px; right: 100px; width: 186px; height: 186px; line-height: 186px; background: #fff; border-radius: 50%; box-shadow: 0px 10px 70px 0px rgba(0, 0, 0, 0.08); } .about-style-two .rotate-box .curved-circle{ position: absolute; left: 93px; top: 7px; font-size: 14px; line-height: 20px; font-weight: 800; text-transform: uppercase; color: var(--secondary-color); } .about-style-two .rotate-box .curved-circle .char25, .about-style-two .rotate-box .curved-circle .char26{ } .about-style-two .rotate-box .icon-box img{ display: inline-block; width: auto; } /** about-style-three **/ .about-style-three{ position: relative; } .content_block_four .content-box{ position: relative; display: block; } .content_block_four .content-box .list-style-one li:before{ background: rgba(206, 24, 16, 0.20); } .image_block_four .image-box{ position: relative; display: block; max-width: 590px; } .image_block_four .image-box .image-1{ position: relative; border-radius: 255px 255px 10px 255px; } .image_block_four .image-box .image-1 img{ width: 100%; border-radius: 255px 255px 10px 255px; } .image_block_four .image-box .image-2{ position: absolute; left: 0px; bottom: 0px; border-radius: 150px 150px 150px 10px; z-index: 1; } .image_block_four .image-box .image-2:before{ position: absolute; content: ''; background: #fff; width: 100%; height: 100%; left: 10px; bottom: 10px; border-radius: 150px 150px 150px 10px; z-index: -1; } .image_block_four .image-box .image-2 img{ width: 100%; border-radius: 150px 150px 150px 10px; } .image_block_four .image-box .rotate-box{ position: absolute; display: flex; align-items: center; justify-content: center; left: 60px; top: 70px; width: 186px; height: 186px; line-height: 186px; background: #fff; border-radius: 50%; box-shadow: 0px 10px 70px 0px rgba(0, 0, 0, 0.08); z-index: 2; } .image_block_four .image-box .rotate-box .curved-circle{ position: absolute; left: 93px; top: 7px; font-size: 14px; line-height: 20px; font-weight: 800; text-transform: uppercase; color: var(--title-color); } .image_block_four .image-box .rotate-box .icon-box img{ display: inline-block; width: auto; } .about-style-three .pattern-layer{ position: absolute; left: 0px; bottom: 0px; width: 100%; height: 100%; background-position: bottom right; background-repeat: no-repeat; } /** about-style-four **/ .about-style-four{ position: relative; } .about-style-four .content_block_one .content-box .list-style-one li{ float: left; width: 50%; } .content_block_five .content-box .form-inner{ position: relative; display: block; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0px 20px 60px 0px rgba(0, 0, 0, 0.05); border-bottom: solid; border-width: 5px; border-color: #7B0000; margin-top: -70px; } .content_block_five .content-box .form-inner h3{ position: relative; display: block; font-size: 24px; line-height: 30px; background: #FEC33D; padding: 20px 30px; text-align: center; } .content_block_five .content-box .form-inner form{ position: relative; padding: 40px; } .content_block_five .content-box .form-inner .form-group{ position: relative; margin-bottom: 24px; border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 4px; padding-left: 60px; } .content_block_five .content-box .form-inner .form-group .icon-box{ position: absolute; left: 0px; top: 0px; width: 58px; height: 58px; line-height: 58px; text-align: center; border-right: 1px solid rgba(0, 0, 0, 0.10); background: #FAFAFA; border-radius: 4px 0px 0px 4px; } .content_block_five .content-box .form-inner .form-group input[type='text'], .content_block_five .content-box .form-inner .form-group .nice-select{ position: relative; display: block; width: 100%; height: 58px; padding: 10px 20px; font-size: 14px; color: var(--title-color); text-transform: uppercase; } .content_block_five .content-box .form-inner .form-group .nice-select{ padding: 0px 20px; line-height: 58px; } .content_block_five .content-box .form-inner .theme-btn{ width: 100%; } .content_block_five .content-box{ position: relative; display: block; } .about-style-four .pattern-layer{ position: absolute; left: 0px; top: -300px; right: -200px; width: 1274px; height: 1478px; background-repeat: no-repeat; background-position: center; margin: 0 auto; z-index: -1; opacity: 0.5; } .about-style-two .pattern-layer{ position: absolute; right: -200px; bottom: 0px; width: 100%; height: 100%; background-position: bottom right; background-repeat: no-repeat; opacity: 0.5; } /** rtl-css **/ .rtl .content_block_one .content-box{ margin-left: 0px; margin-right: 50px; } .rtl .about-style-two .rotate-box{ right: inherit; left: 100px; } .rtl .image_block_three .image-box{ margin-right: 0px; margin-left: 40px; } .rtl .content_block_five .content-box{ margin-left: 0px; margin-right: 190px; } /** responsive-css **/ @media only screen and (max-width: 1600px){ .about-style-two .rotate-box{ top: 50px; right: 50px; } .rtl .about-style-two .rotate-box{ left: 50px; } } @media only screen and (max-width: 1200px){ .about-section .image-layer, .about-style-two .rotate-box{ display: none; } .about-style-three{ padding-left: 0px; padding-right: 0px; } } @media only screen and (max-width: 991px){ .content_block_one .content-box{ margin-left: 0px; margin-top: 40px; } .rtl .content_block_one .content-box{ margin-right: 0px; } .image_block_three .image-box{ margin-right: 0px; margin-bottom: 40px; } .rtl .image_block_three .image-box{ margin-left: 0px; } .content_block_four .content-box{ margin-bottom: 40px; } .content_block_five .content-box .form-inner{ margin-top: 0px; } .content_block_five .content-box{ margin-left: 0px; } .rtl .content_block_five .content-box{ margin-right: 0px; } .about-style-four{ padding-bottom: 120px; } .about-style-four .content_block_one .content-box{ margin-right: 0px; } .about-style-four .content_block_one .content-box{ margin-top: 0px; } } @media only screen and (max-width: 767px){ .about-section{ padding: 40px 0px 52px 0px; } .content_block_one .content-box .tabs-content .list-style-one li{ width: 100%; } .about-style-two, .about-style-three{ padding: 70px 0px; } .about-style-four{ padding-bottom: 70px; } .about-style-four .content_block_one .content-box{ padding-top: 70px; padding-bottom: 40px; } } @media only screen and (max-width: 599px){ .about-style-four .content_block_one .content-box .list-style-one li{ float: none; width: 100%; } } @media only screen and (max-width: 499px){ .image_block_three .image-box .funfact-inner{ position: relative; width: 100%; border-radius: 10px; margin-top: 30px; bottom: 0px; } .image_block_three .image-box{ padding: 0px; } .image_block_three .image-box .funfact-inner .funfact-block{ float: none; width: 100%; text-align: center; } .image_block_three .image-box .funfact-inner .funfact-block .count-outer{ justify-content: center; } .content_block_three .content-box .inner-box .single-item{ display: block; border-radius: 10px; } .content_block_three .content-box .inner-box .single-item .icon-box{ margin-bottom: 20px; } .image_block_four .image-box{ padding: 0px; } .image_block_four .image-box .image-2{ position: relative; margin-top: 30px; } .content_block_five .content-box .form-inner form{ padding-left: 30px; padding-right: 30px; } }