/*----------------------------------------------------------------------------------- Template Name: Unsprt Author: www.onepservice.gr Author URI: https://www.onepservice.gr/ ----------------------------------------------------------------------------------- CSS INDEX =================== 01. Theme default CSS 02. Header CSS 2.1. Header Top CSS 2.2 Offcanvas Menu CSS 03. Hero CSS 04. Service CSS 05. About CSS 06. Counter CSS 07. Video CSS 08. Brand CSS 09. Digital Marketing CSS 10. Team CSS 11. FAQ CSS 12. Testimonial CSS 13. Blog CSS 14. CTA CSS 15. Work CSS 16. Project CSS 17. Skill CSS 18. Features CSS 19. Innovative CSS 20. Page Banner CSS 21. Service Single CSS 22. Blog Standard CSS 23. Blog Details CSS 24. Login Register CSS 25. Contact CSS 26. Footer CSS 26.1. Footer Widget CSS -----------------------------------------------------------------------------------*/ /*----------------------------------------*/ /* 01. Theme default CSS /*----------------------------------------*/ /*-- Google Font --*/ @import url("https://fonts.googleapis.com/css2?family=Jura:wght@400;500;600;700&family=Open+Sans:wght@300;400;500&display=swap"); /*-- Common Style --*/ *, *::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } body { font-size: 15px; line-height: 1.75; font-weight: 400; font-family: "Open Sans", sans-serif; color: #707070; outline: none; visibility: visible; overflow-X: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: ""; } body[dir="rtl"] { text-align: right; } h1, h2, h3, h4, h5, h6 { font-family: "Jura", sans-serif; color: #072f60; font-weight: 700; margin-top: 0; line-height: 1.5; margin-bottom: 0; } h1 { font-size: 36px; } @media only screen and (max-width: 767px) { h1 { font-size: 30px; } } h2 { font-size: 30px; } @media only screen and (max-width: 767px) { h2 { font-size: 24px; } } h3 { font-size: 24px; } @media only screen and (max-width: 767px) { h3 { font-size: 20px; } } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; } p { margin-bottom: 0; } a, button { color: inherit; display: inline-block; line-height: inherit; text-decoration: none; cursor: pointer; } a, button, img, input { transition: all 0.3s linear; outline: 0; } a:focus, button:focus, img:focus, input:focus { outline: 0; } a:focus { color: none; outline: none; text-decoration: none; } a:hover { text-decoration: none; color: #ffa800; } ul, ol { padding: 0; list-style: none; margin: 0; } button, input[type="submit"] { cursor: pointer; } img { max-width: 100%; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { opacity: 1; } input:-moz-placeholder, textarea:-moz-placeholder { opacity: 1; } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 1; } /*-- Common Classes --*/ .section, .main-wrapper { float: left; width: 100%; } /*--Section Spacing--*/ .section-padding { padding-top: 60px; padding-bottom: 60px; } @media only screen and (max-width: 1199px) { .section-padding { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (max-width: 991px) { .section-padding { padding-top: 80px; padding-bottom: 80px; } } @media only screen and (max-width: 767px) { .section-padding { padding-top: 60px; padding-bottom: 60px; } } .section-padding-02 { padding-top: 120px; } @media only screen and (max-width: 1199px) { .section-padding-02 { padding-top: 100px; } } @media only screen and (max-width: 991px) { .section-padding-02 { padding-top: 80px; } } @media only screen and (max-width: 767px) { .section-padding-02 { padding-top: 60px; } } .section-padding-03 { padding-top: 140px; padding-bottom: 140px; } @media only screen and (max-width: 1199px) { .section-padding-03 { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (max-width: 991px) { .section-padding-03 { padding-top: 80px; padding-bottom: 80px; } } @media only screen and (max-width: 767px) { .section-padding-03 { padding-top: 60px; padding-bottom: 60px; } } .section-padding-04 { padding-top: 140px; } @media only screen and (max-width: 1199px) { .section-padding-04 { padding-top: 100px; } } @media only screen and (max-width: 991px) { .section-padding-04 { padding-top: 80px; } } @media only screen and (max-width: 767px) { .section-padding-04 { padding-top: 60px; } } /*--Section Title--*/ .section-title .title { font-size: 30px; line-height: 80px; font-family: "Jura", sans-serif; font-weight: 700; text-transform: uppercase1; 1text-shadow: 5px 11px 1px #d4d4d4; color: #0a0c1c; } @media only screen and (max-width: 1199px) { .section-title .title { font-size: 42px; line-height: 60px; } } @media only screen and (max-width: 767px) { .section-title .title { font-size: 18px; line-height: 45px; } } .section-title .sub-title { font-size: 24px; line-height: 30px; font-family: "Jura", sans-serif; font-weight: 700; text-transform: uppercase1; color: #ffa800; margin-bottom: 100px; } .section-title .sub-title1 { font-size: 20px; line-height: 30px; font-family: "Jura", sans-serif; font-weight: 700; text-transform: uppercase1; color: #ffa800; margin-bottom: 50px; } .section-title .sub-title.text-color-02 { color: #f82c47; } .section-title .sub-title.text-color-03 { color: #fc653c; } @media only screen and (max-width: 767px) { .section-title .sub-title { font-size: 27px; } } .text-white { color: #ffffff; } /*--Swiper Pagination--*/ .swiper-pagination .swiper-pagination-bullet { border-radius: 50%; background-color: #e1e1e1; width: 12px; height: 12px; transition: all 0.3s linear; opacity: 1; } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #ffa800; } /*-- Preloader Styles --*/ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffffff; z-index: 999999; } #preloader .preloader { width: 50px; height: 50px; display: inline-block; padding: 0px; text-align: left; box-sizing: border-box; position: absolute; top: 50%; left: 50%; } #preloader .preloader span { position: absolute; display: inline-block; width: 50px; height: 50px; border-radius: 50%; background-color: #ffa800; -webkit-animation: preloader 1.3s linear infinite; animation: preloader 1.3s linear infinite; } #preloader .preloader span:last-child { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } #preloader .preloader-02 span { background-color: #f82c47; } #preloader .preloader-03 span { background-color: #fc653c; } @-webkit-keyframes preloader { 0% { transform: scale(0, 0); opacity: 0.5; } 100% { transform: scale(1, 1); opacity: 0; } } @keyframes preloader { 0% { transform: scale(0, 0); opacity: 0.5; } 100% { transform: scale(1, 1); opacity: 0; } } /*----------------------------------------*/ /* 02. Elements CSS /*----------------------------------------*/ /*-- /* 2.4 - Form CSS /*----------------------------------------*/ label { display: block; line-height: 1; margin-bottom: 10px; font-weight: 400; text-transform: capitalize; } /*Input Field & Select*/ input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea { border: 1px solid #ebebeb; box-shadow: none; color: #415674; border-radius: 4px; background-color: #ffffff; margin-bottom: 0; padding: 10px 25px; max-width: 100%; width: 100%; font-size: 14px; line-height: 30px; font-weight: 700; transition: all 0.3s linear; } input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, textarea:focus { outline: none; border-color: #ffa800; } input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])::-webkit-input-placeholder, textarea::-webkit-input-placeholder { opacity: 0.95; font-size: 13px; color: #898c94; font-weight: 600; } input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):-moz-placeholder, textarea:-moz-placeholder { opacity: 0.95; font-size: 13px; color: #898c94; font-weight: 600; } input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])::-moz-placeholder, textarea::-moz-placeholder { opacity: 0.95; font-size: 13px; color: #898c94; font-weight: 600; } input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 0.95; font-size: 13px; color: #898c94; font-weight: 600; } /*-- /* 2.3 - Button CSS /*----------------------------------------*/ .btn-margin { margin-top: 40px; } .btn-wrap { display: flex; flex-wrap: wrap; margin: -5px; } .btn-wrap .btn { margin: 5px; } .btn { display: inline-block; position: relative; overflow: hidden; z-index: 1; background-color: #ffa800; border-color: transparent; color: #0a0c1c; border-radius: 0; font-size: 16px; font-family: "Jura", sans-serif; font-weight: 700; height: 60px; line-height: 56px; padding: 0px 40px; border-style: solid; box-shadow: none; transition: all 0.3s ease 0s; cursor: pointer; z-index: 1; } .btn:focus, .btn:focus:active { box-shadow: none; } .btn:hover { box-shadow: none; color: #ffa800; background: #ffffff; } .btn .btn-icon { margin-left: 5px; } .btn-2 { height: 50px; line-height: 45px; font-size: 14px; padding: 0 45px; } .btn-3 { background: #ffa800; border: 2px solid #ffa800; } .btn-3:hover { color: #ffa800; } .link-btn { font-size: 16px; font-family: "Jura", sans-serif; font-weight: 700; text-transform: uppercase1; color: #0a0c1c; } .link-btn .link-icon { width: 25px; height: 25px; line-height: 25px; text-align: center; border-radius: 50%; background: #ffa800; display: inline-block; margin-left: 5px; } .btn-round { border-radius: 100px; } .btn-square { border-radius: 0; } [class*="btn-icon-"] i { position: absolute; top: 0; width: 60px; height: 60px; line-height: 28px; text-align: center; padding: 15px; background-color: rgba(0, 0, 0, 0.1); } .btn-icon-left { padding-left: 69px; } .btn-icon-left i { left: 0; right: auto; } .btn-icon-right { padding-right: 69px; } .btn-icon-right i { left: auto; right: 0; } .btn-primary { background-color: #ffa800; border-color: #ffa800; color: #ffffff; } .btn-primary:hover { background-color: #ffa800; border-color: #ffa800; } .btn-secondary { background-color: #0a0c1c; border-color: #0a0c1c; color: #ffffff; } .btn-secondary:hover { background-color: #0a0c1c; border-color: #0a0c1c; } .btn-white { background-color: #ffffff; border-color: #ffffff; box-shadow: 11px 5px 20px 0 rgba(46, 63, 99, 0.15); } /*----------------------------------------*/ /* 02. Header CSS /*----------------------------------------*/ /*-- /* 2.1 - Header Top CSS /*----------------------------------------*/ .header { background: #0a0c1c; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; } @media only screen and (max-width: 991px), only screen and (max-width: 767px) { .header { padding: 15px 0; } } .header-wrapper { display: flex; align-items: left ; justify-content: space-between; position: relative; } .header-menu .main-menu { display: flex; } .header-menu .main-menu > li { position: relative; padding: 30px 8px; padding-right: 20px; } @media only screen and (max-width: 1199px) { .header-menu .main-menu > li { padding: 30px 15px; margin-top:0px; } } .header-menu .main-menu > li a { font-size: 14.5px; font-family: "Jura", sans-serif; font-weight: 700; color: #ffffff; text-transform: uppercase1; } .header-menu .main-menu > li a::before { content: ""; position: absolute; left: 40%; bottom: 0; width: 2px; height: 0px; background: #ffa800; top: auto; transition: all 0.3s linear; } .header-menu .main-menu > li .menu-icon::after { content: '\f16c'; font-family: "flaticon"; font-size: 8px; color: #ffffff; margin-left: 0px; transition: all 0.3s linear; } .header-menu .main-menu > li.active-menu > .menu-icon::after { color: #ffa800; } .header-menu .main-menu > li.active-menu > a { color: #ffa800; } .header-menu .main-menu > li.active-menu > a::before { height: 30px; top: 65%; bottom: auto; } .header-menu .main-menu > li:hover > .menu-icon::after { color: #ffa800; } .header-menu .main-menu > li:hover > a { color: #ffa800; } .header-menu .main-menu > li:hover > a::before { height: 30px; top: 65%; bottom: auto; } .header-menu .main-menu > li:hover > .sub-menu { opacity: 1; visibility: visible; top: 100%; } .header-menu .main-menu > li .sub-menu { position: absolute; left: 0; top: 110%; width: 270px; background: #ffffff; box-shadow: 0 2px 29px rgba(0, 0, 0, 0.05); padding: 20px 0; border-bottom: 3px solid #ffa800; opacity: 0; z-index: 99; visibility: hidden; transition: all 0.3s linear; } .header-menu .main-menu > li .sub-menu li { padding: 0; } .header-menu .main-menu > li .sub-menu li a { padding: 5px 25px; font-size: 15px; font-family: "Jura", sans-serif; font-weight: 600; color: #0a0c1c; display: block; position: relative; z-index: 1; } .header-menu .main-menu > li .sub-menu li.active > a { color: #ffa800; } .header-menu .main-menu > li .sub-menu li:hover > a { color: #ffa800; } .header-middle { display: flex; align-items: center; margin-right:0px; margin-top:0px; } @media only screen and (max-width: 991px) { .header-cart { margin-right: 25px; } } .header-cart .cart-btn { width: 40px; height: 40px; line-height: 38px; font-size: 16px; border-radius: 50%; text-align: center; background: none; color: #ffffff; border: 0; position: relative; transition: all 0.3s linear; } .header-cart .cart-btn:hover { color: #ffa800; } .header-cart .cart-btn .count { width: 15px; height: 15px; line-height: 14px; text-align: center; background: #ffa800; border-radius: 50%; font-size: 10px; font-family: "Open Sans", sans-serif; font-weight: 400; display: inline-block; color: #0a0c1c; position: absolute; top: 6px; right: 5px; } .dropdown-cart { width: 370px; padding: 30px; border-radius: 10px; box-shadow: 11px 10px 38px 0 rgba(46, 63, 99, 0.15); border: 0; transform: translateX(-50%) !important; left: 50% !important; top: 63px !important; } @media only screen and (max-width: 1399px) { .dropdown-cart { left: 0 !important; transform: translateX(-85%) !important; } } @media only screen and (max-width: 991px) { .dropdown-cart { top: 56px !important; } } @media only screen and (max-width: 449px) { .dropdown-cart { left: 0 !important; transform: translateX(-72%) !important; } } .dropdown-cart .cart-items { height: 280px; overflow-y: auto; } .dropdown-cart .cart-items .single-cart-item { display: flex; align-items: center; position: relative; } .dropdown-cart .cart-items .single-cart-item + .single-cart-item { margin-top: 30px; } .dropdown-cart .cart-items .single-cart-item .item-image img { border-radius: 50%; } .dropdown-cart .cart-items .single-cart-item .item-content { flex: 1; padding-right: 25px; padding-left: 20px; } .dropdown-cart .cart-items .single-cart-item .item-content .title { font-size: 16px; font-weight: 700; color: #000000; line-height: 1.3; } .dropdown-cart .cart-items .single-cart-item .item-content .quantity { font-size: 14px; color: #ffa800; line-height: 1.75; display: block; } .dropdown-cart .cart-items .single-cart-item .btn-close { position: absolute; width: 5px; height: 5px; top: 0; right: 5px; } .dropdown-cart .cart-total { display: flex; justify-content: space-between; margin-top: 25px; } .dropdown-cart .cart-total .label { font-size: 18px; font-weight: 700; line-height: 1.75; display: block; color: #000000; } .dropdown-cart .cart-total .value { font-size: 18px; font-weight: 700; line-height: 1.75; display: block; color: #ffa800; } .dropdown-cart .cart-btns { margin-top: 25px; display: flex; justify-content: space-between; } .dropdown-cart .cart-btns .btn { height: 50px; line-height: 46px; font-size: 16px; padding: 0 35px; width: 48%; } .dropdown-cart .cart-btns .btn:hover { background: #0a0c1c; color: #ffa800; } .dropdown-cart .cart-btns .btn.btn-2 { background: #0a0c1c; color: #ffffff; border: 2px solid transparent; transition: all 0.3s linear; } .dropdown-cart .cart-btns .btn.btn-2:hover { background: #ffa800; color: #0a0c1c; } .header-meta .header-social ul li { display: inline-block; } .header-meta .header-social ul li + li { margin-left: 8px; } .header-meta .header-social ul li a { font-size: 14px; color: #ffffff; } .header-meta .header-social ul li a:hover { color: #ffa800; } .header-meta .header-btn { position: relative; margin-left: 30px; padding-left: 30px; } @media only screen and (max-width: 1199px) { .header-meta .header-btn { margin-left: 20px; padding-left: 20px; } } .header-meta .header-btn::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #5f606a; width: 1px; height: 40px; } .header-meta .header-btn .link-btn { font-size: 14px; font-family: "Jura", sans-serif; font-weight: 700; color: #ffffff; position: relative; } .header-meta .header-btn .link-btn::before { position: absolute; left: 0; bottom: 0px; height: 1px; width: 70%; content: ""; transform: scale(1); background-color: #ffa800; transition: all 0.3s linear; } .header-meta .header-btn .link-btn:hover::before { transform: scale(-1); } .header-toggle button { background: none; border: 0; padding-right: 60px; padding-top:20px; } .header-toggle button span { width: 25px; height: 2px; background: #ffa800; margin: 5px 0; display: block; } .header-toggle button span:last-child { margin-bottom: 0; } .header-toggle-02 button span { background: #f82c47; } .header-toggle-03 button span { background: #fc653c; } .header-02 { background: transparent; border-bottom: 1px solid #95a5b8; } .header-02.sticky { background: #0a0c1c; border-bottom: 0; } .sticky { position: fixed; top: 0; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.07); -webkit-animation: sticky 1s; animation: sticky 1s; } .header-03 { background: #ffffff; } .header-03 .header-menu .main-menu > li a { color: #0a0c1c; } .header-03 .header-menu .main-menu > li .menu-icon::after { color: #0a0c1c; } .header-03 .header-cart .cart-btn { color: #0a0c1c; } .header-03 .header-cart .cart-btn:hover { color: #ffa800; } .header-03 .header-meta .header-social ul li a { color: #0a0c1c; } .header-03 .header-meta .header-social ul li a:hover { color: #ffa800; } .header-03 .header-meta .header-btn::before { background: #9d9ea4; } .header-03 .header-meta .header-btn .link-btn { color: #0a0c1c; } .header-04 { border-bottom: 0; padding-top:10px; } .header-04 .header-menu .main-menu > li a::before { background: #f82c47; } .header-04 .header-menu .main-menu > li.active-menu > .menu-icon::after { color: #f82c47; } .header-04 .header-menu .main-menu > li.active-menu > a { color: #f82c47; } .header-04 .header-menu .main-menu > li:hover > .menu-icon::after { color: #f82c47; } .header-04 .header-menu .main-menu > li:hover > a { color: #f82c47; } .header-04 .header-menu .main-menu > li .sub-menu { border-bottom: 3px solid #f82c47; } .header-04 .header-menu .main-menu > li .sub-menu li.active > a { color: #f82c47; } .header-04 .header-menu .main-menu > li .sub-menu li:hover > a { color: #f82c47; } .header-04 .header-cart .cart-btn { color: #ffffff; } .header-04 .header-cart .cart-btn:hover { color: #f82c47; } .header-04 .header-cart .count { background: #f82c47; color: #ffffff; } .header-04 .dropdown-cart .cart-items .single-cart-item .item-content .title:hover a { color: #f82c47; } .header-04 .dropdown-cart .cart-items .single-cart-item .item-content .quantity { color: #f82c47; } .header-04 .dropdown-cart .cart-btns .btn { background: #f82c47; color: #ffffff; } .header-04 .dropdown-cart .cart-btns .btn:hover { background: #0a0c1c; color: #f82c47; } .header-04 .dropdown-cart .cart-btns .btn.btn-2 { background: #0a0c1c; color: #ffffff; } .header-04 .dropdown-cart .cart-btns .btn.btn-2:hover { background: #f82c47; color: #ffffff; } .header-04 .header-meta .header-social ul li a:hover { color: #f82c47; } .header-04 .header-info { display: flex; align-items: end; position: relative; margin-left: 30px; padding-left: 30px; } @media only screen and (max-width: 1199px) { .header-04 .header-info { margin-left: 13px; padding-left: 13px; } } .header-04 .header-info::before { content: ""; position: absolute; left: 0; top: 0%; transform: translateY(-50%); background: #ffffff; width: 1px; height: 122px; } .header-04 .header-info .info-text { margin-left: 12px; } .header-04 .header-info .info-text .title { font-size: 11px; line-height: 18px; font-family: "Jura", sans-serif; font-weight: 700; color: #ffffff; } .header-04 .header-info .info-text .number { font-size: 14px; line-height: 18px; font-family: "Jura", sans-serif; font-weight: 700; color: #ffffff; } @media only screen and (max-width: 991px) { .header-05 { background: #ffffff; } } .header-05.sticky { background: #ffffff; } .header-05.sticky .header-wrapper { margin-top: 0; background: none; } .header-05 .header-wrapper { background: #ffffff; padding-left: 0px; padding-right: 0px; margin-top: px; } @media only screen and (max-width: 991px) { .header-05 .header-wrapper { background: none; padding-left: 30px; padding-right: 0px; margin-top: 0px; } } .header-05 .header-menu .main-menu > li a { color: #1c1e27; } .header-05 .header-menu .main-menu > li a::before { background: #fc653c; } .header-05 .header-menu .main-menu > li .menu-icon::after { color: #1c1e27; } .header-05 .header-menu .main-menu > li.active-menu > .menu-icon::after { color: #fc653c; } .header-05 .header-menu .main-menu > li.active-menu > a { color: #fc653c; } .header-05 .header-menu .main-menu > li:hover > .menu-icon::after { color: #fc653c; } .header-05 .header-menu .main-menu > li:hover > a { color: #fc653c; } .header-05 .header-menu .main-menu > li .sub-menu { border-bottom: 3px solid #fc653c; } .header-05 .header-menu .main-menu > li .sub-menu li.active > a { color: #fc653c; } .header-05 .header-menu .main-menu > li .sub-menu li:hover > a { color: #fc653c; } .header-05 .header-cart .cart-btn { color: #1c1e27; } .header-05 .header-cart .cart-btn:hover { color: #fc653c; } .header-05 .header-cart .count { background: #fc653c; color: #ffffff; } .header-05 .dropdown-cart .cart-items .single-cart-item .item-content .title:hover a { color: #fc653c; } .header-05 .dropdown-cart .cart-items .single-cart-item .item-content .quantity { color: #fc653c; } .header-05 .dropdown-cart .cart-btns .btn { background: #fc653c; color: #ffffff; } .header-05 .dropdown-cart .cart-btns .btn:hover { background: #0a0c1c; color: #fc653c; } .header-05 .dropdown-cart .cart-btns .btn.btn-2 { background: #0a0c1c; color: #ffffff; } .header-05 .dropdown-cart .cart-btns .btn.btn-2:hover { background: #fc653c; color: #ffffff; } .header-05 .header-meta .header-search .search-btn { font-size: 18px; color: #1c1e27; position: relative; } .header-05 .header-meta .header-search .search-bar { position: absolute; right: 0; width: 300px; left: auto !important; padding: 15px; background: #ffffff; top: 100%; display: none; } .header-05 .header-meta .header-search .search-bar input { width: 100%; height: 50px; padding: 0 20px; border: 1px solid rgba(37, 38, 40, 0.25); border-radius: 0; color: #1c1e27; } .header-05 .header-meta .header-search .search-bar button { position: absolute; right: 40px; background: none; border: 0; top: 50%; transform: translateY(-50%); font-size: 14px; } .header-05 .header-meta .header-search .search-bar button i { color: #1c1e27; } .header-05 .header-info::before { background: #e8e9e9; } .header-05 .header-info .info-text { margin-left: 12px; } .header-05 .header-info .info-text .title { color: #989898; } .header-05 .header-info .info-text .number { color: #1c1e27; } .sticky { position: fixed; top: 0; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.07); -webkit-animation: sticky 1s; animation: sticky 1s; } @-webkit-keyframes sticky { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } } @keyframes sticky { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } } /*-- /* 2.2 - Header Top CSS /*----------------------------------------*/ .offcanvas { background: #0a0c1c; width: 320px; } @media only screen and (max-width: 575px) { .offcanvas { width: 280px; } } .offcanvas-header .close-btn { background: none; border: 0; font-size: 18px; color: #fc653c; transition: all 0.3s linear; } .offcanvas-header .close-btn:hover { transform: rotate(90deg); } .offcanvas-menu .main-menu li { position: relative; } .offcanvas-menu .main-menu li a { display: block; font-size: 15px; font-family: "Jura", sans-serif; font-weight: 600; text-transform: uppercase1; color: white; padding: 5px 0px; position: relative; } .offcanvas-menu .main-menu li .menu-expand { position: absolute; right: 20px; top: 8px; width: 30px; height: 30px; cursor: pointer; background: rgba(255, 255, 255, 0.1); border-radius: 3px; } .offcanvas-menu .main-menu li .menu-expand::before { position: absolute; content: ''; width: 16px; height: 2px; background-color: #fc653c; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s linear; } .offcanvas-menu .main-menu li .menu-expand::after { position: absolute; content: ''; width: 2px; height: 16px; background-color: #fc653c; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s linear; } .offcanvas-menu .main-menu li.active > .menu-expand::after { height: 0; } .offcanvas-menu .main-menu li ul { padding-left: 6%; display: none; } /*----------------------------------------*/ /* 4.1. Pages CSS (All Page Styles) /*----------------------------------------*/ /*-- /* 03 - Hero CSS /*----------------------------------------*/ .corpix-hero-section { height: 550px; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; background: #031f42; overflow: hidden; z-index: 1; padding-top: 78px; } .corpix-hero-section::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(17, 56, 100, 0.5); width: 100%; height: 100%; z-index: -1; } .corpix-hero-section .shape-1 { width: 250px; height: 250px; background: rgba(10, 12, 28, 0.4); border-radius: 50%; position: absolute; top: 260px; left: 100px; -webkit-animation: animationOne 15s infinite linear; animation: animationOne 15s infinite linear; z-index: -1; } .corpix-hero-section .shape-2 { width: 970px; height: 970px; border: 3px solid #ffa800; border-radius: 50%; position: absolute; top: -59%; right: -5%; z-index: -1; } .corpix-hero-section .shape-3 { width: 970px; height: 970px; border: 3px solid #ffa800; border-radius: 50%; position: absolute; top: -64%; right: -12%; z-index: -1; } .corpix-hero-section .shape-4 { width: 905px; height: 905px; background: #ffa800; border-radius: 50%; position: absolute; right: -14%; bottom: -35%; z-index: -1; } .corpix-hero-section .shape-5 { width: 900px; height: 900px; border: 3px solid #ffffff; border-radius: 50%; position: absolute; right: -12.5%; bottom: -27%; z-index: -1; } .corpix-hero-section .hero-content { padding-top: 50px; } .corpix-hero-section .hero-content .title { font-size: 19px; line-height: 150px; font-family: "Jura", sans-serif; font-weight: 500; text-transform: uppercase1; text-decoration: none; -webkit-text-decoration-color: #ffa800; text-decoration-color: #ffa1800; color: #ffffff; } .corpix-hero-section .hero-content .sub-title { font-size: 21px; line-height: 1.25; font-family: "Jura", sans-serif; font-weight: 700; color: #ffffff; margin-top:100px; } .corpix-hero-section .hero-content .btn { margin-top: 70px; } @media only screen and (max-width: 1399px) { .corpix-hero-section .hero-content .title { font-size: 35px; line-height: 75px; margin-top: 60px; } } @media only screen and (max-width: 1199px) { .corpix-hero-section { height: 800px; } .corpix-hero-section .shape-1 { width: 310px; height: 310px; } .corpix-hero-section .shape-2 { width: 590px; height: 590px; top: -47%; } .corpix-hero-section .shape-3 { width: 590px; height: 590px; top: -48%; } .corpix-hero-section .shape-4 { width: 590px; height: 590px; } .corpix-hero-section .shape-5 { width: 590px; height: 590px; } .corpix-hero-section .hero-content { padding-top: 105px; } .corpix-hero-section .hero-content .title { font-size: 35px; line-height: 100px; } } @media only screen and (max-width: 767px) { .corpix-hero-section .shape-1 { width: 250px; height: 250px; } .corpix-hero-section .shape-2 { width: 480px; height: 480px; top: -43%; } .corpix-hero-section .shape-3 { width: 480px; height: 480px; top: -44%; } .corpix-hero-section .shape-4 { width: 480px; height: 480px; } .corpix-hero-section .shape-5 { width: 480px; height: 480px; } .corpix-hero-section .hero-content { padding-top: 30px; } .corpix-hero-section .hero-content .title { font-size: 25px; line-height: 80px; } .corpix-hero-section .hero-content .sub-title { font-size: 25px; } .corpix-hero-section .hero-content .btn { margin-top: 70px; } } @media only screen and (max-width: 575px) { .corpix-hero-section .shape-2 { display: none; } .corpix-hero-section .shape-3 { display: none; } .corpix-hero-section .hero-content { max-width: 320px; padding-top: 20px; } .corpix-hero-section .hero-content .title { font-size: 18px; line-height: 70px; } .corpix-hero-section .hero-content .sub-title { font-size: 20px; } } @media only screen and (max-width: 449px) { .corpix-hero-section .shape-1 { width: 220px; height: 220px; } .corpix-hero-section .shape-4 { right: -44%; } .corpix-hero-section .shape-5 { right: -48.5%; bottom: -28%; } } @-webkit-keyframes animationOne { 0% { transform: translate(0px, 0px) rotate(0deg); } 20% { transform: translate(73px, -1px) rotate(36deg); } 40% { transform: translate(141px, 72px) rotate(72deg); } 60% { transform: translate(83px, 122px) rotate(108deg); } 80% { transform: translate(-40px, 72px) rotate(144deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } } @keyframes animationOne { 0% { transform: translate(0px, 0px) rotate(0deg); } 20% { transform: translate(73px, -1px) rotate(36deg); } 40% { transform: translate(141px, 72px) rotate(72deg); } 60% { transform: translate(83px, 122px) rotate(108deg); } 80% { transform: translate(-40px, 72px) rotate(144deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } } .corpix-hero-section-02 { height: 1120px; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; background: #031f42; overflow: hidden; z-index: 1; } .corpix-hero-section-02::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(17, 56, 100, 0.6); width: 100%; height: 100%; z-index: -1; } .corpix-hero-section-02 .shape-4 { position: absolute; left: -25%; bottom: -80%; } .corpix-hero-section-02 .shape-4 svg { width: 1879px; height: 1932px; fill: rgba(10, 12, 28, 0.4); } .corpix-hero-section-02 .shape-5 { position: absolute; top: -14%; right: -11%; } .corpix-hero-section-02 .shape-5 svg { width: 617px; height: 538px; fill: rgba(10, 12, 28, 0.5); } .corpix-hero-section-02 .hero-content { max-width: 710px; margin: 0 auto; margin-top: -60px; position: relative; z-index: 1; } .corpix-hero-section-02 .hero-content .shape-1 { position: absolute; top: -42%; left: -29%; z-index: -1; } .corpix-hero-section-02 .hero-content .shape-1 svg { width: 1111px; height: 920px; fill: #ffa800; } .corpix-hero-section-02 .hero-content .shape-2 { position: absolute; top: 13%; left: -40%; z-index: -1; } .corpix-hero-section-02 .hero-content .shape-2 svg { width: 308px; height: 204px; fill: #ffa800; } .corpix-hero-section-02 .hero-content .shape-3 { position: absolute; top: 63%; right: -34%; z-index: -1; } .corpix-hero-section-02 .hero-content .shape-3 svg { width: 246px; height: 158px; fill: #ffffff; } .corpix-hero-section-02 .hero-content .title { font-size: 130px; line-height: 150px; font-family: "Jura", sans-serif; font-weight: 700; text-transform: uppercase1; color: #ffffff; } .corpix-hero-section-02 .hero-content .sub-title { font-size: 30px; line-height: 1.25; font-family: "Jura", sans-serif; font-weight: 700; color: #ffffff; margin-bottom: 15px; } .corpix-hero-section-02 .hero-content .btn { background: #0a0c1c; color: #ffffff; margin-top: 40px; } .corpix-hero-section-02 .hero-content .btn:hover { color: #ffa800; } @media only screen and (max-width: 1199px) { .corpix-hero-section-02 { height: 780px; } .corpix-hero-section-02 .hero-content { margin-top: 0; } .corpix-hero-section-02 .hero-content .title { font-size: 80px; line-height: 100px; } } @media only screen and (max-width: 767px) { .corpix-hero-section-02 { height: 660px; } .corpix-hero-section-02 .hero-content { margin-top: 0; } .corpix-hero-section-02 .hero-content .title { font-size: 60px; line-height: 80px; } .corpix-hero-section-02 .hero-content .sub-title { font-size: 26px; } } @media only screen and (max-width: 575px) { .corpix-hero-section-02 { height: 610px; } .corpix-hero-section-02 .shape-4 { display: none; } .corpix-hero-section-02 .hero-content { max-width: 420px; } .corpix-hero-section-02 .hero-content .shape-1 { display: none; } .corpix-hero-section-02 .hero-content .title { font-size: 50px; line-height: 70px; } .corpix-hero-section-02 .hero-content .sub-title { font-size: 22px; } } .corpix-hero-section-03 { height: 1120px; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; background: #ffa800; overflow: hidden; z-index: 1; } .corpix-hero-section-03 .hero-img-3 { position: absolute; top: -1%; right: 0; } .corpix-hero-section-03 .shape-1 { position: absolute; top: 12%; left: -3%; -webkit-animation: animate-01 3s infinite; animation: animate-01 3s infinite; } .corpix-hero-section-03 .shape-2 { position: absolute; top: 37%; right: 14%; -webkit-animation: zoom-inout 3s infinite; animation: zoom-inout 3s infinite; } .corpix-hero-section-03 .shape-3 { position: absolute; top: 13%; left: 30%; width: 75px; height: 75px; border: 5px solid #ffc24d; border-radius: 50%; -webkit-animation: zoom-inout 3s infinite; animation: zoom-inout 3s infinite; } .corpix-hero-section-03 .shape-4 { position: absolute; left: -12%; bottom: -37%; z-index: -1; } .corpix-hero-section-03 .hero-content { max-width: 710px; margin: 0 auto; margin-top: -60px; position: relative; z-index: 1; } .corpix-hero-section-03 .hero-content .title { font-size: 100px; line-height: 130px; font-family: "Jura", sans-serif; font-weight: 700; text-transform: uppercase1; color: #ffffff; } @media only screen and (max-width: 1399px) { .corpix-hero-section-03 .hero-content .title { font-size: 85px; line-height: 115px; } } .corpix-hero-section-03 .hero-content .title .title-bg { background: #000000; display: inline-block; padding: 0 25px; margin-top: 10px; } .corpix-hero-section-03 .hero-content .title .title-bg .color-1 { color: #ffa800; } .corpix-hero-section-03 .hero-content .title .title-bg.color-2 { background: #ffffff; color: #0a0c1c; } .corpix-hero-section-03 .hero-content .sub-title { font-size: 30px; line-height: 1.25; font-family: "Jura", sans-serif; font-weight: 700; color: #ffffff; padding-bottom: 20px; } .corpix-hero-section-03 .hero-content .btn { background: #0a0c1c; color: #ffffff; margin-top: 40px; } .corpix-hero-section-03 .hero-content .btn:hover { color: #ffa800; } @-webkit-keyframes animate-01 { 0% { transform: rotate(10deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(10deg); } } @keyframes animate-01 { 0% { transform: rotate(10deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(10deg); } } @-webkit-keyframes zoom-inout { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } } @keyframes zoom-inout { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } } @media only screen and (max-width: 1199px) { .corpix-hero-section-03 { height: 790px; } .corpix-hero-section-03 .hero-img-3 { top: -10%; } .corpix-hero-section-03 .shape-1 { top: inherit; left: 70%; bottom: 5%; } .corpix-hero-section-03 .shape-1 img { width: 170px; } .corpix-hero-section-03 .shape-2 { top: 33%; right: 22%; } .corpix-hero-section-03 .shape-2 img { width: 120px; } .corpix-hero-section-03 .shape-4 { left: -32%; bottom: -53%; } .corpix-hero-section-03 .hero-content .title { font-size: 65px; line-height: 90px; } } @media only screen and (max-width: 991px) { .corpix-hero-section-03 { height: 790px; } .corpix-hero-section-03 .hero-img-3 { top: -1%; } } @media only screen and (max-width: 767px) { .corpix-hero-section-03 { height: 650px; } .corpix-hero-section-03 .shape-2 { right: 5%; } .corpix-hero-section-03 .shape-3 { width: 60px; height: 60px; } .corpix-hero-section-03 .hero-content .title { font-size: 52px; line-height: 80px; } .corpix-hero-section-03 .hero-content .sub-title { font-size: 24px; } } @media only screen and (max-width: 575px) { .corpix-hero-section-03 .hero-img-3 { display: none; } .corpix-hero-section-03 .shape-4 { left: -42%; bottom: -37%; } .corpix-hero-section-03 .hero-content .title { font-size: 42px; line-height: 70px; } .corpix-hero-section-03 .hero-content .sub-title { font-size: 24px; } } .corpix-hero-04 { height: auto; padding-top: 220px; padding-bottom: 250px; position: relative; z-index: 1; } .corpix-hero-04::before { background: rgba(38, 38, 38, 0.9); } .corpix-hero-04 .shape-1 { position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: -1; } .corpix-hero-04 .hero-img { position: relative; padding-right: 45px; z-index: 1; } .corpix-hero-04 .hero-img img { width: 100%; border-radius: 5px; } .corpix-hero-04 .hero-img::before { content: ""; position: absolute; right: 0; top: 90px; background: #f82c47; width: 300px; height: 595px; border-radius: 5px; z-index: -1; } .corpix-hero-04 .hero-img .shape-01 { position: absolute; top: -60px; left: -65px; border: 3px solid #ffffff; border-radius: 50%; width: 170px; height: 170px; z-index: -1; -webkit-animation: zoom-inout 3s infinite; animation: zoom-inout 3s infinite; } .corpix-hero-04 .hero-btn .btn { background: #f82c47; } .corpix-hero-04 .hero-btn .btn:hover { background: #0a0c1c; color: #f82c47; } @media only screen and (max-width: 1399px) { .corpix-hero-04 .hero-content .title { font-size: 115px; line-height: 135px; } .corpix-hero-04 .hero-img::before { top: 40px; } } @media only screen and (max-width: 1199px) { .corpix-hero-04 { padding-top: 140px; padding-bottom: 120px; } .corpix-hero-04 .hero-content .title { font-size: 80px; line-height: 100px; } .corpix-hero-04 .hero-img::before { top: 80px; height: 510px; } .corpix-hero-04 .hero-img .shape-01 { top: -35px; left: -60px; width: 120px; height: 120px; } } @media only screen and (max-width: 991px) { .corpix-hero-04 { padding-top: 140px; padding-bottom: 120px; } .corpix-hero-04 .hero-img { text-align: center; padding-right: 0px; margin-top: 90px; } .corpix-hero-04 .hero-img img { width: 410px; } .corpix-hero-04 .hero-img::before { right: 95px; top: 85px; height: 510px; } .corpix-hero-04 .hero-img .shape-01 { left: 80px; } } @media only screen and (max-width: 767px) { .corpix-hero-04 .hero-content .title { font-size: 65px; line-height: 85px; } .corpix-hero-04 .hero-img::before { right: 25px; top: 78px; } .corpix-hero-04 .hero-img .shape-01 { left: 15px; } } @media only screen and (max-width: 575px) { .corpix-hero-04 { padding-top: 120px; padding-bottom: 90px; } .corpix-hero-04 .hero-content .title { font-size: 55px; line-height: 75px; } .corpix-hero-04 .hero-img { margin-top: 60px; } .corpix-hero-04 .hero-img::before { display: none; } .corpix-hero-04 .hero-img .shape-01 { display: none; } } .corpix-hero-05 { position: relative; z-index: 1; } .corpix-hero-05::before { background: rgba(10, 12, 28, 0.5); } .corpix-hero-05 .hero-bg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: url(../images/shape/hero5-shape.png); background-repeat: no-repeat; z-index: -1; } .corpix-hero-05 .shape-1 { position: absolute; top: -84%; right: -7%; } .corpix-hero-05 .shape-1 svg { fill: #fc653c; } .corpix-hero-05 .shape-2 { position: absolute; top: -73%; right: -14%; } .corpix-hero-05 .shape-2 svg { fill: none; stroke-width: 1px; stroke: #fc653c; } .corpix-hero-05 .shape-3 { position: absolute; left: -16%; bottom: -38%; } .corpix-hero-05 .shape-3 svg { fill: #fc653c; } .corpix-hero-05 .shape-4 { position: absolute; left: -13%; top: 66%; } .corpix-hero-05 .shape-4 svg { fill: none; stroke-width: 1px; stroke: #fc653c; } .corpix-hero-05 .hero-btn .btn { background: #fc653c; border-radius: 5px; } .corpix-hero-05 .hero-btn .btn:hover { background: #ffffff; color: #fc653c; } @media only screen and (max-width: 1399px) { .corpix-hero-05 .hero-content .title { font-size: 115px; line-height: 135px; } } @media only screen and (max-width: 1199px) { .corpix-hero-05 .shape-1 { top: -120%; right: -29%; } .corpix-hero-05 .shape-2 { top: -112%; right: -33%; } .corpix-hero-05 .shape-3 { left: -19%; bottom: -88%; } .corpix-hero-05 .shape-4 { left: -15%; top: 74%; } .corpix-hero-05 .hero-content .title { font-size: 80px; line-height: 100px; } } @media only screen and (max-width: 991px) { .corpix-hero-05 .shape-1 { top: -125%; right: -59%; } .corpix-hero-05 .shape-2 { top: -115%; right: -59%; } .corpix-hero-05 .shape-3 { left: -43%; bottom: -90%; } .corpix-hero-05 .shape-4 { left: -33%; top: 77%; } } @media only screen and (max-width: 767px) { .corpix-hero-05 .hero-content .title { font-size: 65px; line-height: 85px; } } @media only screen and (max-width: 575px) { .corpix-hero-05 .shape-1 { display: none; } .corpix-hero-05 .shape-2 { display: none; } .corpix-hero-05 .shape-3 { display: none; } .corpix-hero-05 .shape-4 { display: none; } .corpix-hero-05 .hero-content .title { font-size: 55px; line-height: 75px; } } .corpix-hero-06 { height: inherit; padding-top: 220px; padding-bottom: 130px; background-repeat: no-repeat; background-position: center center; background-size: cover; } @media only screen and (max-width: 1199px) { .corpix-hero-06 { padding-top: 190px; padding-bottom: 110px; } } @media only screen and (max-width: 767px) { .corpix-hero-06 { padding-top: 140px; padding-bottom: 90px; } } .corpix-hero-06 .hero-content .btn { background: #ffa800; color: #0a0c1c; } .corpix-hero-06 .hero-content .btn:hover { background: #ffffff; color: #ffa800; } .hero-form { background: #ffffff; border-radius: 10px; overflow: hidden; max-width: 460px; } @media only screen and (max-width: 991px) { .hero-form { max-width: 100%; margin-top: 70px; } } .hero-form .hero-form-wrapper { padding: 45px; box-shadow: 0px 0px 40px 0px rgba(49, 48, 48, 0.81); } .hero-form .heading-wrapper { margin-bottom: 5px; } .hero-form .heading-wrapper .sub-title { font-size: 16px; font-family: "Open Sans", sans-serif; font-weight: 500; line-height: 1.88; color: #415674; } .hero-form .heading-wrapper .title { font-size: 30px; line-height: 1.34; font-weight: 700; color: #0a0c1c; margin-top: 5px; } .hero-form .single-form { margin-top: 20px; } .hero-form .single-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), .hero-form .single-form textarea { background: #f0f0f0; border: 0; padding-left: 15px; } .hero-form .single-form textarea { height: 90px; } .hero-form .form-btn { margin-top: 30px; } .hero-form .form-btn .btn { font-size: 15px; text-transform: uppercase1; font-family: "Jura", sans-serif; font-weight: 700; line-height: 50px; width: 100%; height: 50px; margin-bottom: 20px; transition: all 0.3s linear; } .hero-form .form-btn .btn:hover { background: #0a0c1c; } .corpix-hero-06 { height: inherit; padding-top: 220px; padding-bottom: 130px; background-repeat: no-repeat; background-position: center center; background-size: cover; } @media only screen and (max-width: 1199px) { .corpix-hero-06 { padding-top: 190px; padding-bottom: 110px; } } @media only screen and (max-width: 767px) { .corpix-hero-06 { padding-top: 140px; padding-bottom: 90px; } } .corpix-hero-06 .hero-content .btn { background: #ffa800; color: #0a0c1c; } .corpix-hero-06 .hero-content .btn:hover { background: #ffffff; color: #ffa800; } .hero-form { background: #ffffff; border-radius: 10px; overflow: hidden; max-width: 460px; } @media only screen and (max-width: 991px) { .hero-form { max-width: 100%; margin-top: 70px; } } .hero-form .hero-form-wrapper { padding: 45px; box-shadow: 0px 0px 40px 0px rgba(49, 48, 48, 0.81); } .hero-form .heading-wrapper { margin-bottom: 5px; } .hero-form .heading-wrapper .sub-title { font-size: 16px; font-family: "Open Sans", sans-serif; font-weight: 500; line-height: 1.88; color: #415674; } .hero-form .heading-wrapper .title { font-size: 30px; line-height: 1.34; font-weight: 700; color: #0a0c1c; margin-top: 5px; } .hero-form .single-form { margin-top: 20px; } .hero-form .single-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), .hero-form .single-form textarea { background: #f0f0f0; border: 0; padding-left: 15px; } .hero-form .single-form textarea { height: 90px; } .hero-form .form-btn { margin-top: 30px; } .hero-form .form-btn .btn { font-size: 15px; text-transform: uppercase1; font-family: "Jura", sans-serif; font-weight: 700; line-height: 48px; width: 100%; height: 50px; margin-bottom: 20px; transition: all 0.3s linear; } .hero-form .form-btn .btn:hover { background: #0a0c1c; } /*-- /* 04 - Service CSS /*----------------------------------------*/ .corpix-service-section { background: #f4f5f8; background-repeat: no-repeat; background-position: center center; background-size: cover; padding-bottom: 160px; } @media only screen and (max-width: 1199px) { .corpix-service-section { padding-bottom: 100px; } } @media only screen and (max-width: 767px) { .corpix-service-section { padding-bottom: 80px; } } .service-wrap { margin-top: -130px; position: relative; z-index: 1; } .service-item { background: #ffffff; box-shadow: 0px 0px 196px 0px rgba(0, 0, 0, 0.05); padding: 60px 47px; overflow: hidden; position: relative; margin-top: 30px; z-index: 1; transition: all 0.3s linear; } .service-item .shape-1 { width: 325px; height: 325px; border: 8px solid #ffa800; border-radius: 50%; position: absolute; top: -40%; right: -45%; z-index: -1; } @media only screen and (max-width: 1199px) { .service-item .shape-1 { right: -25%; } } @media only screen and (max-width: 575px) { .service-item .shape-1 { right: -65%; } } .service-item .service-icon { position: relative; z-index: 1; } .service-item .service-icon .icon-image { width: 92px; height: 92px; transition: all 0.3s linear; } .service-item .service-icon::before { content: ""; position: absolute; left: 25px; top: -35px; background-image: url(../../assets/images/ser-shape.png); background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; z-index: -1; } .service-item .service-content .title { font-size: 30px; line-height: 40px; text-transform: uppercase1; color: #0a0c1c; margin-top: 30px; } .service-item .service-content p { font-size: 16px; line-height: 30px; margin-top: 20px; transition: all 0.3s linear; } .service-item .service-content .link-btn { margin-top: 20px; } .service-item.service-style:hover { background: #0a0c1c; } .service-item.service-style:hover .service-icon .icon-image { filter: brightness(0) invert(1); } .service-item.service-style:hover .service-content .title { color: #ffffff; } .service-item.service-style:hover .service-content p { color: #ffffff; } .service-item.service-style:hover .service-content .link-btn { color: #ffffff; } .service-item.service-style:hover .service-content .link-btn:hover { color: #ffa800; } .service-bottom-text { margin-top: 50px; } .service-bottom-text p { font-size: 18px; line-height: 30px; font-family: "Jura", sans-serif; font-weight: 700; text-transform: uppercase1; color: #0a0c1c; } .service-bottom-text p a { color: blue; text-decoration: underline; -webkit-text-decoration-color: blue; text-decoration-color: blue; } .corpix-service-section-02 { background: #0a0c1c; } .corpix-service-section-02 .service-wrap-02 { margin-bottom: -290px; box-shadow: 0px 0px 136px 0px rgba(0, 0, 0, 0.16); } .corpix-service-section-02 .service-wrap-02 .section-title .title { text-shadow: none; } .corpix-service-section-02 .service-wrap-02 .service-content-wrap-02 { background: #ffffff; margin-top: 80px; } .corpix-service-section-02 .service-wrap-02 .service-content-wrap-02 .service-item { box-shadow: none; padding-top: 85px; margin-top: 0; position: relative; } .corpix-service-section-02 .service-wrap-02 .service-content-wrap-02 .service-item::before { content: ""; position: absolute; right: 0; top: 50%; background: #e1e1e1; transform: translateY(-50%); width: 1px; height: 375px; } .corpix-service-section-02 .service-wrap-02 .service-content-wrap-02 .service-item.service-item-03::before { display: none; } @media only screen and (max-width: 991px) { .corpix-service-section-02 .service-wrap-02 .service-content-wrap-02 .service-item::before { right: 23%; top: 100%; transform: translateY(-67%); width: 390px; height: 1px; } } @media only screen and (max-width: 767px) { .corpix-service-section-02 .service-wrap-02 .service-content-wrap-02 .service-item::before { right: 12%; } } @media only screen and (max-width: 575px) { .corpix-service-section-02 .service-wrap-02 .service-content-wrap-02 .service-item { padding: 80px 30px 60px; } .corpix-service-section-02 .service-wrap-02 .service-content-wrap-02 .service-item.service-item-1 { padding-bottom: 0; } .corpix-service-section-02 .service-wrap-02 .service-content-wrap-02 .service-item.service-item-2 { padding-bottom: 0; } .corpix-service-section-02 .service-wrap-02 .service-content-wrap-02 .service-item::before { display: none; } } .corpix-service-section-03 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .service-content-wrap-03 { padding-top: 0px; } .service-content-wrap-03 .single-item { display: flex; justify-content: space-between; background: #ffffff; position: relative; overflow: hidden; padding: 50px 50px 20px; padding-right: 75px; margin-top: 20px; z-index: 1; transition: all 0.3s linear; } @media only screen and (max-width: 575px) { .service-content-wrap-03 .single-item { padding: 40px 30px 35px; padding-right: 50px; } } .service-content-wrap-03 .single-item .shape-1 { width: 125px; height: 325px; border: 8px solid #ffc24d; border-radius: 50%; transform: scale(0.9); position: absolute; top: -82%; right: -27%; opacity: 0; visibility: hidden; z-index: -1; transition: all 0.3s linear; } .service-content-wrap-03 .single-item .service-content .title { font-size: 23px; line-height: 42px; text-transform: uppercase1; color: #0a0c1c; margin-bottom: 15px; transition: all 0.3s linear; } .service-content-wrap-03 .single-item .service-content .title3 { font-size: 16px; line-height: 42px; text-transform: uppercase1; color: #0a0c1c; margin-bottom: 15px; transition: all 0.3s linear; } @media only screen and (max-width: 1199px) { .service-content-wrap-03 .single-item .service-content .title { font-size: 28px; } } .service-content-wrap-03 .single-item .service-content .icon-link { transition: all 0.3s linear; } .service-content-wrap-03 .single-item .service-icon { width: 90px; position: relative; z-index: 1; } .service-content-wrap-03 .single-item .service-icon::before { content: ""; position: absolute; left: 40px; top: -20px; background-image: url(../../assets/images/ser-shape.png); background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; z-index: -1; } .service-content-wrap-03 .single-item:hover { background: #ffa800; } .service-content-wrap-03 .single-item:hover .shape-1 { transform: scale(1); opacity: 1; visibility: visible; } .service-content-wrap-03 .single-item:hover .service-content .title { color: #ffffff; } .service-content-wrap-03 .single-item:hover .service-content .icon-link { filter: brightness(0) invert(1); } .service-content-wrap-03 .single-item:hover .service-icon img { filter: brightness(0) invert(1); } .service-content-wrap-03 .service-bottom-text { margin-top: 50px; } .service-content-wrap-03 .service-bottom-text p a { text-decoration: none; } .corpix-service-section-04 .section-title .title { text-shadow: none; } .corpix-service-section-04 .service-wrap-04 { margin-bottom: -305px; position: relative; z-index: 5; } .corpix-service-section-04 .service-content-wrap-04 { padding-top: 40px; } .corpix-service-section-04 .service-content-wrap-04 .service-item { padding: 45px 40px 55px; } .corpix-service-section-04 .service-content-wrap-04 .service-item .shape-1 { border: 8px solid #fa6c7f; top: -42%; right: -64%; opacity: 0; visibility: hidden; transition: all 0.3s linear; } @media only screen and (max-width: 1199px) { .corpix-service-section-04 .service-content-wrap-04 .service-item .shape-1 { right: -25%; } } @media only screen and (max-width: 575px) { .corpix-service-section-04 .service-content-wrap-04 .service-item .shape-1 { right: -65%; } } .corpix-service-section-04 .service-content-wrap-04 .service-item .shape-2 { position: absolute; left: -30%; bottom: -25%; } .corpix-service-section-04 .service-content-wrap-04 .service-item .service-icon { position: relative; z-index: 1; } .corpix-service-section-04 .service-content-wrap-04 .service-item .service-icon .icon-image { width: 92px; height: 92px; transition: all 0.3s linear; } .corpix-service-section-04 .service-content-wrap-04 .service-item .service-icon::before { display: none; } .corpix-service-section-04 .service-content-wrap-04 .service-item .service-content .title a { color: #0a0c1c; } .corpix-service-section-04 .service-content-wrap-04 .service-item.service-style:hover { background: #f82c47; } .corpix-service-section-04 .service-content-wrap-04 .service-item.service-style:hover .shape-1 { opacity: 1; visibility: visible; } .corpix-service-section-04 .service-content-wrap-04 .service-item.service-style:hover .service-icon .icon { filter: brightness(0) invert(1); } .corpix-service-section-04 .service-content-wrap-04 .service-item.service-style:hover .service-content .title a { color: #ffffff; } .corpix-service-section-04 .service-content-wrap-04 .service-bottom-text p a { text-decoration: none; color: #f82c47; } @media only screen and (max-width: 1199px) { .corpix-service-section-04 .service-content-wrap-04 .service-item { padding: 45px 24px 50px; } } @media only screen and (max-width: 767px) { .corpix-service-section-04 .service-content-wrap-04 { padding-top: 20px; } } .corpix-service-section-05 .service-content-wrap-03 .single-item .shape-1 { border: 8px solid #fd9477; } .corpix-service-section-05 .service-content-wrap-03 .single-item .service-icon::before { background-image: url(../images/shape/ser-shape2.png); transition: all 0.3s linear; } .corpix-service-section-05 .service-content-wrap-03 .single-item:hover { background: #fc653c; } .corpix-service-section-05 .service-content-wrap-03 .single-item:hover .service-icon::before { filter: brightness(0) invert(1); } .corpix-service-section-05 .service-content-wrap-03 .service-bottom-text p a { color: #fc653c; text-decoration: none; } .corpix-service-section-06 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .corpix-service-section-06 .service-wrap-06 { margin-top: -30px; } .corpix-service-07 .service-content-wrap-03 { padding-top: 0; margin-top: -30px; } /*-- /* 05 - About CSS /*----------------------------------------*/ .corpix-about-section { padding-top: 200px; padding-bottom: 170px; } .corpix-about-section .about-img-wrap { position: relative; padding-right: 30px; } .corpix-about-section .about-img-wrap .shape-1 { position: absolute; top: -50px; left: -25px; z-index: -1; } .corpix-about-section .about-img-wrap .about-img { position: relative; z-index: 1; } .corpix-about-section .about-img-wrap .about-img .image { width: 100%; } .corpix-about-section .about-img-wrap .about-img::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(17, 56, 100, 0.5); width: 100%; height: 100%; } .corpix-about-section .about-img-wrap .about-img.image-1 { position: relative; overflow: hidden; } .corpix-about-section .about-img-wrap .about-img.image-1 .shape-2 { position: absolute; left: -50px; bottom: -190px; width: 330px; height: 330px; border: 3px solid #ffffff; border-radius: 50%; } .corpix-about-section .about-img-wrap .about-img.image-1 .shape-2::before { content: ""; position: absolute; width: 100%; height: 100%; border: 3px solid #ffffff; border-radius: 50%; transform: scale(0.85); } .corpix-about-section .about-img-wrap .about-img-right { margin-top: 35px; } .corpix-about-section .about-img-wrap .about-img-right .shape-2 { border: 12px solid #ffa800; margin-bottom: 20px; } .corpix-about-section .about-content { padding-left: 85px; } @media only screen and (max-width: 1399px) { .corpix-about-section .about-content { padding-left: 40px; } } .corpix-about-section .about-content .text { margin-top: 50px; padding-right: 45px; } .corpix-about-section .about-content .about-list { margin-top: 40px; } .corpix-about-section .about-content .about-list ul li { font-size: 18px; line-height: 36px; font-family: "Jura", sans-serif; font-weight: 700; color: #0a0c1c; } .corpix-about-section .about-content .about-list ul li i { font-size: 16px; color: #ffa800; margin-right: 15px; } @media only screen and (max-width: 1199px) { .corpix-about-section { padding-top: 140px; padding-bottom: 100px; } .corpix-about-section .about-img-wrap { padding-right: 0; } .corpix-about-section .about-content { padding-left: 40px; } .corpix-about-section .about-content .text { padding-right: 0; margin-top: 30px; } .corpix-about-section .about-content .about-list { margin-top: 30px; } } @media only screen and (max-width: 991px) { .corpix-about-section { padding-top: 120px; padding-bottom: 80px; } .corpix-about-section .about-img-wrap { padding-right: 0; } .corpix-about-section .about-content { padding-left: 0px; margin-top: 50px; } .corpix-about-section .about-content .about-list { margin-top: 30px; } } .corpix-about-02 { padding-top: 410px; padding-bottom: 0; } .corpix-about-02 .about-img-wrap-02 { position: relative; } .corpix-about-02 .about-img-wrap-02 .about-img-big { position: relative; } .corpix-about-02 .about-img-wrap-02 .about-img-big::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(17, 56, 100, 0.4); width: 100%; height: 100%; } .corpix-about-02 .about-img-wrap-02 .about-img-sm { margin-top: 15px; display: inline-block; position: relative; } .corpix-about-02 .about-img-wrap-02 .about-img-sm::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(17, 56, 100, 0.4); width: 100%; height: 100%; } .corpix-about-02 .about-img-wrap-02 .about-experience { background: #ffa800; width: 305px; padding: 40px 50px; margin-top: 15px; position: relative; left: -114px; } .corpix-about-02 .about-img-wrap-02 .about-experience .shape-1 { width: 240px; height: 240px; border: 2px solid #ffffff; border-radius: 50%; position: absolute; right: -120px; bottom: -105px; } .corpix-about-02 .about-img-wrap-02 .about-experience .shape-1::before { content: ""; position: absolute; border: 2px solid #ffffff; border-radius: 50%; transform: scale(0.8); width: 100%; height: 100%; } .corpix-about-02 .about-img-wrap-02 .about-experience .experience-content .number { font-size: 72px; line-height: 1; color: #0a0c1c; position: relative; padding-left: 20px; } .corpix-about-02 .about-img-wrap-02 .about-experience .experience-content .number::before { content: ""; position: absolute; left: 0; top: 6px; background: #ffffff; width: 10px; height: 67px; } .corpix-about-02 .about-img-wrap-02 .about-experience .experience-content span { font-size: 18px; line-height: 30px; font-family: "Jura", sans-serif; font-weight: 700; display: inline-block; color: #0a0c1c; margin-top: 15px; } .corpix-about-02 .about-content-02 { padding-left: 70px; } .skill-bar-wrap .skill-item { margin-top: 30px; } .skill-bar-wrap .skill-item .skill-header { position: relative; } .skill-bar-wrap .skill-item .skill-header .skill-title { font-size: 14px; line-height: 24px; font-weight: 700; text-transform: uppercase1; color: #0a0c1c; } .skill-bar-wrap .skill-item .bar-inner { width: 100%; height: 15px; background: #f4f5f6; margin-top: 10px; border-radius: 35px; position: relative; } .skill-bar-wrap .skill-item .bar-inner .progress-line { height: 15px; position: absolute; width: 0; top: 0; left: 0; border-radius: 35px; background: #ffa800; transition: 3s; transition-delay: 1s; } .skill-bar-wrap .skill-item .bar-inner .progress-line .skill-percentage { position: absolute; top: -33px; right: 0; color: #0a0c1c; } .skill-bar-wrap .skill-item .bar-inner .progress-line .skill-percentage span { font-size: 14px; line-height: 24px; font-family: "Jura", sans-serif; font-weight: 400; color: #0a0c1c; } @media only screen and (max-width: 1199px) { .corpix-about-02 .about-img-wrap-02 .about-img-big { position: relative; display: inline-block; left: 125px; } .corpix-about-02 .about-img-wrap-02 .about-img-sm { margin-top: 50px; } .corpix-about-02 .about-img-wrap-02 .about-experience { margin-top: 25px; } .corpix-about-02 .about-content-02 { padding-left: 0; margin-top: 50px; padding-right: 260px; } } @media only screen and (max-width: 991px) { .corpix-about-02 { padding-top: 380px; } .corpix-about-02 .about-img-wrap-02 .about-img-big { left: 5px; } .corpix-about-02 .about-content-02 { padding-right: 50px; } } @media only screen and (max-width: 767px) { .corpix-about-02 .about-img-wrap-02 .about-img-sm { margin-top: 30px; } .corpix-about-02 .about-img-wrap-02 .about-experience { margin-top: 20px; } .corpix-about-02 .about-content-02 { padding-right: 0px; } } @media only screen and (max-width: 575px) { .corpix-about-02 .about-img-wrap-02 .about-img-big { display: block; left: 0; } .corpix-about-02 .about-img-wrap-02 .about-img-big img { width: 100%; } .corpix-about-02 .about-img-wrap-02 .about-img-sm { display: none; } .corpix-about-02 .about-img-wrap-02 .about-experience { display: none; } .corpix-about-02 .about-content-02 { padding-right: 0px; } } .corpix-about-03 .about-img-wrap-03 { position: relative; } .corpix-about-03 .about-img-wrap-03 .about-img { position: relative; display: inline-block; } .corpix-about-03 .about-img-wrap-03 .about-img-big { position: relative; z-index: 1; } .corpix-about-03 .about-img-wrap-03 .about-img-big .shape-1 { width: 190px; height: 320px; background: #ffa800; position: absolute; right: -45px; top: -55px; z-index: -1; } .corpix-about-03 .about-img-wrap-03 .about-img-sm { position: absolute; right: 3%; bottom: -47%; border: 10px solid #ffffff; z-index: 2; } .corpix-about-03 .about-content-03 .about-list-item-wrap { display: flex; border-top: 1px solid #e1e1e1; margin-right: 55px; margin-top: 50px; padding-top: 35px; } .corpix-about-03 .about-content-03 .about-list-item-wrap .about-list-item { display: flex; align-items: center; position: relative; } .corpix-about-03 .about-content-03 .about-list-item-wrap .about-list-item .about-text { flex: 1; margin-left: 20px; } .corpix-about-03 .about-content-03 .about-list-item-wrap .about-list-item .about-text .title { font-size: 18px; line-height: 30px; color: #0a0c1c; } .corpix-about-03 .about-content-03 .about-list-item-wrap .about-list-item:last-child { padding-left: 50px; margin-left: 25px; } .corpix-about-03 .about-content-03 .about-list-item-wrap .about-list-item:last-child::before { content: ""; position: absolute; left: 0; top: 0; background: #e1e1e1; width: 1px; height: 65px; } @media only screen and (max-width: 1199px) { .corpix-about-03 .about-img-wrap-03 .about-img-sm { right: 22%; bottom: -42%; } .corpix-about-03 .about-content-03 { max-width: 490px; padding-left: 0; margin-top: 180px; } .corpix-about-03 .about-content-03 .about-list-item-wrap { margin-right: 0; } } @media only screen and (max-width: 575px) { .corpix-about-03 { padding-top: 80px; } .corpix-about-03 .about-img-wrap-03 .about-img { display: block; } .corpix-about-03 .about-img-wrap-03 .about-img img { width: 100%; } .corpix-about-03 .about-img-wrap-03 .about-img-big .shape-1 { display: none; } .corpix-about-03 .about-img-wrap-03 .about-img-sm { display: none; } .corpix-about-03 .about-content-03 { margin-top: 50px; } .corpix-about-03 .about-content-03 .about-list-item-wrap { margin-right: 0; flex-wrap: wrap; } .corpix-about-03 .about-content-03 .about-list-item-wrap .about-list-item:last-child { padding-left: 0px; margin-left: 0px; margin-top: 20px; } .corpix-about-03 .about-content-03 .about-list-item-wrap .about-list-item:last-child::before { display: none; } } .corpix-about-04 { padding-top: 150px; padding-bottom: 190px; } .corpix-about-04 .about-img-wrap-03 .about-img-sm { right: -2%; bottom: -20%; } .corpix-about-04 .about-img-wrap-03 .about-img-sm .shape-1 { position: absolute; width: 35px; height: 165px; background: #f82c47; top: -74%; left: 30%; } .corpix-about-04 .about-content .about-list ul li i { color: #f82c47; } @media only screen and (max-width: 1199px) { .corpix-about-04 { padding-top: 100px; padding-bottom: 100px; } .corpix-about-04 .about-img-wrap-03 .about-img-sm { right: 31%; } .corpix-about-04 .about-content { max-width: 550px; margin-top: 140px; padding-left: 0; } } @media only screen and (max-width: 991px) { .corpix-about-04 { padding-top: 80px; padding-bottom: 80px; } .corpix-about-04 .about-img-wrap-03 .about-img-sm { right: 6%; } } @media only screen and (max-width: 767px) { .corpix-about-04 .about-img-wrap-03 .about-img-sm { right: 6%; } .corpix-about-04 .about-img-wrap-03 .about-img-sm .shape-1 { display: none; } } @media only screen and (max-width: 575px) { .corpix-about-04 .about-content { margin-top: 50px; } } .corpix-about-section-05 .about-img { position: relative; padding-left: 55px; z-index: 1; } .corpix-about-section-05 .about-img::before { content: ""; position: absolute; left: 0; top: -30px; background: #fc653c; width: 245px; height: 600px; z-index: -1; } .corpix-about-section-05 .about-content { padding-left: 111px; } .corpix-about-section-05 .about-content .about-list ul li { display: flex; align-items: flex-start; margin-top: 40px; } .corpix-about-section-05 .about-content .about-list ul li .about-icon { width: 55px; height: 55px; line-height: 55px; text-align: center; background: #ffefeb; color: #fc653c; border-radius: 50%; } .corpix-about-section-05 .about-content .about-list ul li .about-text { flex: 1; margin-left: 30px; } .corpix-about-section-05 .about-content .about-list ul li .about-text .title { font-size: 20px; line-height: 30px; text-transform: uppercase1; color: #0a0c1c; } .corpix-about-section-05 .about-content .about-list ul li .about-text p { font-size: 16px; line-height: 24px; margin-top: 15px; } @media only screen and (max-width: 1399px) { .corpix-about-section-05 .about-content { padding-left: 41px; } } @media only screen and (max-width: 1199px) { .corpix-about-section-05 .about-img::before { top: -18px; height: 570px; } .corpix-about-section-05 .about-content { max-width: 550px; padding-left: 0; margin-top: 80px; } } @media only screen and (max-width: 767px) { .corpix-about-section-05 { padding-top: 80px; } .corpix-about-section-05 .about-img::before { height: 470px; } } @media only screen and (max-width: 575px) { .corpix-about-section-05 { padding-top: 60px; } .corpix-about-section-05 .about-img { padding-left: 0; } .corpix-about-section-05 .about-img::before { display: none; } .corpix-about-section-05 .about-content { margin-top: 50px; } } .corpix-about-06 { background-repeat: no-repeat; background-position: center center; background-size: cover; padding-top: 150px; padding-bottom: 150px; } .corpix-about-06 .about-content-03 { padding-left: 0; padding-right: 85px; } .corpix-about-06 .about-content-03 .about-list-item-wrap { border-top: 0; padding-top: 0; } .corpix-about-06 .corpix-marketing-tabs-menu li { background-color: #ffffff; } .corpix-about-06 .corpix-marketing-tabs-menu li::before { border-top: 30px solid #fc653c; } .corpix-about-06 .corpix-marketing-tabs-menu li.active { background-color: #fc653c; } .corpix-about-06 .about-img-wrap-06 { display: flex; align-items: center; margin-top: 40px; } .corpix-about-06 .about-img-wrap-06 .about-img { position: relative; } .corpix-about-06 .about-img-wrap-06 .about-text { flex: 1; margin-left: 35px; } .corpix-about-06 .about-img-wrap-06 .about-text .title { font-size: 22px; line-height: 36px; color: #0a0c1c; } @media only screen and (max-width: 1199px) { .corpix-about-06 { padding-top: 100px; padding-bottom: 100px; } .corpix-about-06 .about-content-03 { padding-left: 0; padding-right: 0px; margin-top: 0; } .corpix-about-06 .corpix-marketing-tabs { margin-top: 50px; padding-right: 220px; } .corpix-about-06 .about-img-wrap-06 { padding-right: 220px; } } @media only screen and (max-width: 991px) { .corpix-about-06 { padding-top: 80px; padding-bottom: 80px; } .corpix-about-06 .about-content-03 { padding-left: 0; padding-right: 0px; margin-top: 0; } .corpix-about-06 .corpix-marketing-tabs { padding-right: 0px; } .corpix-about-06 .about-img-wrap-06 { padding-right: 0px; } } @media only screen and (max-width: 575px) { .corpix-about-06 .about-img-wrap-06 { display: block; } .corpix-about-06 .about-img-wrap-06 .about-img img { width: 100%; } .corpix-about-06 .about-img-wrap-06 .about-text { margin-left: 0; margin-top: 20px; } } /*-- /* 06 - Counter CSS /*----------------------------------------*/ .corpix-counter-section { background: #0a0c1c; background-repeat: no-repeat; background-position: center center; background-size: cover; padding-top: 100px; padding-bottom: 150px; } @media only screen and (max-width: 1199px) { .corpix-counter-section { padding-bottom: 100px; } } @media only screen and (max-width: 991px) { .corpix-counter-section { padding-top: 80px; padding-bottom: 80px; } } .counter-wrap { margin-top: -40px; } .single-counter { margin-top: 40px; } .single-counter .counter-text { margin-top: 25px; } .single-counter .counter-text .count { font-size: 36px; line-height: 40px; font-family: "Jura", sans-serif; font-weight: 700; color: #ffffff; } .single-counter .counter-text p { font-size: 18px; line-height: 30px; font-family: "Jura", sans-serif; text-transform: uppercase1; font-weight: 700; color: #ffffff; } .corpix-counter-section-02 { overflow: hidden; } .corpix-counter-section-02 .single-counter { position: relative; } .corpix-counter-section-02 .single-counter::before { content: ""; position: absolute; right: 0; top: 50%; background: #383838; width: 1px; height: 445px; transform: translateY(-44%); } @media only screen and (max-width: 991px) { .corpix-counter-section-02 .single-counter::before { display: none; } } .corpix-counter-section-02 .single-counter.single-counter-4::before { display: none; } .corpix-counter-section-03 { background: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; padding-top: 0; padding-bottom: 0; } .corpix-counter-section-03 .counter-wrap { padding-top: 90px; padding-bottom: 150px; overflow: hidden; position: relative; z-index: 12; } .corpix-counter-section-04 { background: #f82c47; padding-top: 80px; padding-bottom: 150px; } .corpix-counter-section-04 .section-title { padding-right: 40px; } @media only screen and (max-width: 1399px) { .corpix-counter-section-04 .section-title { padding-right: 25px; } } .corpix-counter-section-04 .section-title .title { text-shadow: none; } .corpix-counter-section-04 .counter-content-wrap { display: flex; justify-content: space-between; margin-top: -30px; } .corpix-counter-section-04 .counter-content-wrap .single-counter { position: relative; } .corpix-counter-section-04 .counter-content-wrap .single-counter.counter-3::before { display: none; } .corpix-counter-section-04 .counter-content-wrap .single-counter::before { content: ""; position: absolute; right: -80px; top: 10px; background: #fa6c7f; width: 1px; height: 160px; } @media only screen and (max-width: 1199px) { .corpix-counter-section-04 { padding-bottom: 100px; } .corpix-counter-section-04 .counter-content-wrap .single-counter::before { right: -35px; } } @media only screen and (max-width: 991px) { .corpix-counter-section-04 { padding-bottom: 80px; } .corpix-counter-section-04 .section-title { text-align: center; padding-right: 0; } .corpix-counter-section-04 .counter-content-wrap { padding-top: 30px; } .corpix-counter-section-04 .counter-content-wrap .single-counter::before { right: -65px; } } @media only screen and (max-width: 767px) { .corpix-counter-section-04 { padding-top: 70px; padding-bottom: 70px; } .corpix-counter-section-04 .counter-content-wrap { display: block; } .corpix-counter-section-04 .counter-content-wrap .single-counter::before { display: none; } } /*-- /* 07 - Video CSS /*----------------------------------------*/ .corpix-video-section { background-repeat: no-repeat; background-position: center top; background-size: cover; padding-top: 250px; padding-bottom: 250px; overflow: hidden; position: relative; z-index: 1; } .corpix-video-section::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(17, 56, 100, 0.5); width: 100%; height: 100%; z-index: -1; } .corpix-video-section .shape-1 { width: 705px; height: 705px; border: 1px solid #ffa800; border-radius: 50%; position: absolute; top: -18.5%; left: -13.5%; z-index: -1; } .corpix-video-section .shape-2 { width: 705px; height: 705px; background: #ffa800; border-radius: 50%; position: absolute; right: -14%; bottom: -40%; z-index: -1; } .corpix-video-section .shape-3 { width: 705px; height: 705px; border: 1px solid #ffffff; border-radius: 50%; position: absolute; right: -13.5%; bottom: -34%; z-index: -1; } .corpix-video-section .video-content .title { font-size: 60px; line-height: 80px; text-transform: uppercase1; color: #ffffff; } .play-video { width: 95px; height: 95px; background: #ffa800; display: inline-block; line-height: 95px; text-align: center; font-size: 24px; color: #ffffff; border-radius: 50%; position: relative; z-index: 5; margin-top: 50px; transition: all 0.3s linear; } .play-video::before { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); z-index: -1; -webkit-animation: pulse 1500ms ease-out infinite; animation: pulse 1500ms ease-out infinite; } .play-video:hover { background: #ffffff; color: #ffa800; } @media only screen and (max-width: 1199px) { .corpix-video-section { padding-top: 110px; padding-bottom: 110px; } .corpix-video-section .shape-1 { width: 520px; height: 520px; top: -49.5%; left: -24.5%; } .corpix-video-section .shape-2 { width: 520px; height: 520px; right: -28%; bottom: -50%; } .corpix-video-section .shape-3 { width: 520px; height: 520px; right: -28%; bottom: -44%; } .corpix-video-section .video-content .title { font-size: 42px; line-height: 60px; } } @media only screen and (max-width: 767px) { .corpix-video-section { padding-top: 80px; padding-bottom: 80px; } .corpix-video-section .shape-1 { width: 410px; height: 410px; top: -49.5%; left: -24.5%; } .corpix-video-section .shape-2 { width: 390px; height: 390px; right: -28%; bottom: -50%; } .corpix-video-section .shape-3 { width: 390px; height: 390px; right: -28%; bottom: -44%; } .corpix-video-section .video-content .title { font-size: 35px; line-height: 55px; } .corpix-video-section .video-content .play-video { width: 80px; height: 80px; line-height: 80px; font-size: 20px; } } @media only screen and (max-width: 575px) { .corpix-video-section .shape-1 { width: 350px; height: 350px; top: -49.5%; left: -24.5%; } .corpix-video-section .shape-2 { width: 350px; height: 350px; right: -35%; bottom: -50%; } .corpix-video-section .shape-3 { width: 350px; height: 350px; right: -35%; bottom: -44%; } .corpix-video-section .video-content .title { font-size: 30px; line-height: 50px; } } @-webkit-keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 168, 0, 0.9); } 70% { box-shadow: 0 0 0 30px rgba(255, 168, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 168, 0, 0); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 168, 0, 0.9); } 70% { box-shadow: 0 0 0 30px rgba(255, 168, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 168, 0, 0); } } .corpix-video-section-02 .video-wrap-02 { background-repeat: no-repeat; background-size: cover; background-position: center center; padding-top: 200px; padding-bottom: 220px; margin-bottom: -400px; overflow: hidden; position: relative; z-index: 5; } .corpix-video-section-02 .video-wrap-02::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(17, 56, 100, 0.5); width: 100%; height: 100%; z-index: -1; } .corpix-video-section-02 .video-wrap-02 .shape-1 { position: absolute; top: -45%; left: -28%; z-index: -1; } .corpix-video-section-02 .video-wrap-02 .shape-1 svg { width: 670px; height: 630px; fill: none; stroke-width: 3px; stroke: #ffa800; } .corpix-video-section-02 .video-wrap-02 .shape-2 { position: absolute; right: -28%; bottom: -50%; z-index: -1; } .corpix-video-section-02 .video-wrap-02 .shape-2 svg { width: 665px; height: 625px; fill: #ffa800; } .corpix-video-section-02 .video-wrap-02 .shape-3 { position: absolute; right: -23%; bottom: -49%; z-index: -1; } .corpix-video-section-02 .video-wrap-02 .shape-3 svg { width: 670px; height: 630px; fill: none; stroke-width: 3px; stroke: #ffffff; } .corpix-video-section-02 .video-wrap-02 .video-content .title { font-size: 60px; line-height: 80px; color: #ffffff; } .corpix-video-section-02 .video-wrap-02 .video-content .play-video { margin-top: 40px; } @media only screen and (max-width: 1199px) { .corpix-video-section-02 .video-wrap-02 { padding-top: 120px; padding-bottom: 160px; } .corpix-video-section-02 .video-wrap-02 .shape-1 { top: -45%; left: -40%; } .corpix-video-section-02 .video-wrap-02 .shape-2 { right: -38%; bottom: -70%; } .corpix-video-section-02 .video-wrap-02 .shape-3 { position: absolute; right: -33%; bottom: -71%; } .corpix-video-section-02 .video-wrap-02 .video-content .title { font-size: 50px; line-height: 70px; } } @media only screen and (max-width: 767px) { .corpix-video-section-02 .video-wrap-02 .shape-1 { top: -69%; left: -80%; } .corpix-video-section-02 .video-wrap-02 .shape-2 { right: -75%; bottom: -70%; } .corpix-video-section-02 .video-wrap-02 .shape-3 { right: -68%; bottom: -71%; } .corpix-video-section-02 .video-wrap-02 .video-content .title { font-size: 42px; line-height: 70px; } } @media only screen and (max-width: 575px) { .corpix-video-section-02 .video-wrap-02 { padding-top: 90px; padding-bottom: 120px; } .corpix-video-section-02 .video-wrap-02 .shape-1 { top: -69%; left: -80%; } .corpix-video-section-02 .video-wrap-02 .shape-2 { display: none; } .corpix-video-section-02 .video-wrap-02 .shape-3 { display: none; } .corpix-video-section-02 .video-wrap-02 .video-content .title { font-size: 42px; line-height: 70px; } } .corpix-video-section-03 { padding-top: 220px; padding-bottom: 370px; } .corpix-video-section-03::before { background: rgba(17, 56, 100, 0.8); } .corpix-video-section-03 .video-content { padding-right: 80px; } @media only screen and (max-width: 1399px) { .corpix-video-section-03 .video-content { padding-right: 40px; } } .video-btn-03 .video-link { display: flex; align-items: center; } .video-btn-03 .video-link .play-video { margin-top: 0; } .video-btn-03 .video-link .play-btn-text { font-size: 24px; line-height: 36px; font-family: "Jura", sans-serif; font-weight: 700; color: #ffffff; margin-left: 25px; transition: all 0.3s linear; } .video-btn-03 .video-link .play-btn-text:hover { color: #ffa800; } @media only screen and (max-width: 991px) { .video-btn-03 { margin-top: 50px; } .video-btn-03 .video-link { justify-content: center; } .video-btn-03 .video-link .play-video { margin-top: 0; } } @media only screen and (max-width: 1199px) { .corpix-video-section-03 { padding-top: 130px; } } @media only screen and (max-width: 991px) { .corpix-video-section-03 { padding-top: 90px; padding-bottom: 350px; } .corpix-video-section-03 .video-content { text-align: center; padding-right: 0px; } } .corpix-video-section-04 { background: #f1f2f5; padding-top: 430px; padding-bottom: 170px; } .corpix-video-section-04::before { display: none; } .corpix-video-section-04 .video-wrap { background-repeat: no-repeat; background-position: center top; background-size: cover; padding-top: 150px; padding-bottom: 160px; } .corpix-video-section-04 .video-wrap .play-video { background: #f82c47; } .corpix-video-section-04 .video-wrap .play-video::before { -webkit-animation: pulse-02 1500ms ease-out infinite; animation: pulse-02 1500ms ease-out infinite; } .corpix-video-section-04 .video-wrap .play-video:hover { background: #ffffff; color: #f82c47; } @media only screen and (max-width: 1199px) { .corpix-video-section-04 { padding-top: 400px; padding-bottom: 100px; } } @media only screen and (max-width: 991px) { .corpix-video-section-04 { padding-top: 380px; padding-bottom: 80px; } } @-webkit-keyframes pulse-02 { 0% { box-shadow: 0 0 0 0 rgba(248, 44, 71, 0.9); } 70% { box-shadow: 0 0 0 30px rgba(248, 44, 71, 0); } 100% { box-shadow: 0 0 0 0 rgba(248, 44, 71, 0); } } @keyframes pulse-02 { 0% { box-shadow: 0 0 0 0 rgba(248, 44, 71, 0.9); } 70% { box-shadow: 0 0 0 30px rgba(248, 44, 71, 0); } 100% { box-shadow: 0 0 0 0 rgba(248, 44, 71, 0); } } .corpix-video-section-05 { padding-top: 225px; } .corpix-video-section-05::before { background: rgb(10 12 28 / 68%); } .corpix-video-section-05 .video-content { padding-right: 80px; } .corpix-video-section-05 .video-content .video-btn-03 { margin-top: 50px; } .corpix-video-section-05 .video-content .video-btn-03 .play-video { background: #fc653c; } .corpix-video-section-05 .video-content .video-btn-03 .play-video::before { -webkit-animation: pulse-03 1500ms ease-out infinite; animation: pulse-03 1500ms ease-out infinite; } .corpix-video-section-05 .video-content .video-btn-03 .play-video:hover { background: #ffffff; color: #fc653c; } .corpix-video-section-05 .video-content .video-btn-03 .video-link .play-btn-text:hover { color: #fc653c; } .corpix-video-section-05 .video-counter-wrap { display: flex; max-width: 520px; border-left: 3px solid #fc653c; background: #000; padding: 50px; } .corpix-video-section-05 .video-counter-wrap .single-counter { margin-top: 0; position: relative; } .corpix-video-section-05 .video-counter-wrap .single-counter:last-child { padding-left: 60px; margin-left: 110px; } .corpix-video-section-05 .video-counter-wrap .single-counter:last-child::before { content: ""; position: absolute; left: 0; top: 50%; background: #fc653c; width: 1px; height: 85px; transform: translateY(-50%); } .corpix-video-section-05 .video-counter-wrap .single-counter .counter-text { margin-top: 0; } .corpix-video-section-05 .video-counter-wrap .single-counter .counter-text .count { font-size: 48px; line-height: 60px; } @media only screen and (max-width: 1199px) { .corpix-video-section-05 { padding-top: 120px; } } @media only screen and (max-width: 991px) { .corpix-video-section-05 { padding-top: 100px; padding-bottom: 100px; } .corpix-video-section-05 .video-content { padding-right: 0px; text-align: center; } .corpix-video-section-05 .video-counter-wrap { display: flex; margin: 0 auto; margin-top: 50px; } } @media only screen and (max-width: 767px) { .corpix-video-section-05 { padding-top: 80px; padding-bottom: 80px; } .corpix-video-section-05 .video-content .video-btn-03 { margin-top: 35px; } .corpix-video-section-05 .video-counter-wrap { display: flex; margin: 0 auto; margin-top: 50px; } .corpix-video-section-05 .video-counter-wrap .single-counter .counter-text .count { font-size: 36px; line-height: 48px; } .corpix-video-section-05::before { background: black; } } @media only screen and (max-width: 449px) { .corpix-video-section-05 .video-counter-wrap { padding: 40px; } .corpix-video-section-05 .video-counter-wrap .single-counter:last-child { padding-left: 40px; margin-left: 40px; } } @-webkit-keyframes pulse-03 { 0% { box-shadow: 0 0 0 0 rgba(252, 101, 60, 0.9); } 70% { box-shadow: 0 0 0 30px rgba(252, 101, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(252, 101, 60, 0); } } @keyframes pulse-03 { 0% { box-shadow: 0 0 0 0 rgba(252, 101, 60, 0.9); } 70% { box-shadow: 0 0 0 30px rgba(252, 101, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(252, 101, 60, 0); } .corpix-video-section-05::before { background: black; } } /*-- /* 08 - Brand CSS /*----------------------------------------*/ .corpix-brand-section { padding-top: 140px; padding-bottom: 140px; } @media only screen and (max-width: 1199px) { .corpix-brand-section { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (max-width: 991px) { .corpix-brand-section { padding-top: 80px; padding-bottom: 80px; } } .corpix-brand-section .brand-title { font-size: 24px; line-height: 42px; text-transform: uppercase1; color: #0a0c1c; } .corpix-brand-section .brand-title span { color: #ffa800; } .corpix-brand-section .brand-active { margin-top: 50px; } .corpix-brand-section-02 { background: #0a0c1c; background-repeat: no-repeat; background-size: cover; background-position: center center; } .corpix-brand-section-04 { padding-top: 130px; padding-bottom: 130px; } @media only screen and (max-width: 1199px) { .corpix-brand-section-04 { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (max-width: 991px) { .corpix-brand-section-04 { padding-top: 80px; padding-bottom: 80px; } } .corpix-brand-section-04 .brand-title span { color: #f82c47; } .corpix-brand-section-05 { border-top: 1px solid #e1e1e1; } .corpix-brand-section-05 .brand-title span { color: #fc653c; } /*-- /* 09 - Digital Marketing CSS /*----------------------------------------*/ .corpix-marketing-section { position: relative; z-index: 1; } .corpix-marketing-section::before { content: ""; position: absolute; right: 0; top: 0; background: #eaebee; width: 42%; height: 100%; z-index: -1; } .corpix-marketing-section .marketing-content .section-title { padding-right: 35px; margin-bottom: 50px; } .corpix-marketing-section .marketing-image { margin-left: 70px; padding-top: 300px; padding-bottom: 300px; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; } .corpix-marketing-section .marketing-image::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(17, 56, 100, 0.4); width: 100%; height: 100%; } .corpix-marketing-section .marketing-image .experience-wrap { max-width: 410px; position: absolute; top: 65px; left: -40px; z-index: 1; } .corpix-marketing-section .marketing-image .experience-wrap .shape-1 { height: 90px; width: 350px; background: #ffa800; position: absolute; bottom: -10px; right: -10px; z-index: -1; } .corpix-marketing-section .marketing-image .experience-wrap .experience { display: flex; align-items: center; background: #ffffff; box-shadow: 0px 0px 98px 0px rgba(0, 0, 0, 0.22); padding: 30px 40px; } .corpix-marketing-section .marketing-image .experience-wrap .experience .experience-text { position: relative; padding-left: 35px; margin-left: 35px; margin-right: 50px; } .corpix-marketing-section .marketing-image .experience-wrap .experience .experience-text::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #e1e1e1; width: 1px; height: 75px; } .corpix-marketing-section .marketing-image .experience-wrap .experience .experience-text .title { font-size: 20px; line-height: 30px; text-transform: uppercase1; color: #0a0c1c; } .corpix-marketing-tabs-menu { display: flex; } @media only screen and (max-width: 767px) { .corpix-marketing-tabs-menu { flex-wrap: wrap; } } .corpix-marketing-tabs-menu li { background-color: #f4f5f8; position: relative; } .corpix-marketing-tabs-menu li::before { position: absolute; content: ""; border-top: 30px solid #ffa800; width: 0; height: 0; bottom: -25px; right: 0; border-left: 30px solid transparent; opacity: 0; visibility: hidden; z-index: 1; } .corpix-marketing-tabs-menu li:nth-child(2) { border-right: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; } @media only screen and (max-width: 449px) { .corpix-marketing-tabs-menu li:nth-child(2) { border-right: 0; border-left: 0; } } .corpix-marketing-tabs-menu li .corpix-marketing-title { width: 190px; text-align: center; border: 0; border-radius: 0; padding: 25px 0; cursor: pointer; } .corpix-marketing-tabs-menu li .corpix-marketing-title .title { font-size: 20px; line-height: 30px; text-transform: uppercase1; color: #0a0c1c; } .corpix-marketing-tabs-menu li.active { background-color: #ffa800; } .corpix-marketing-tabs-menu li.active::before { opacity: 1; visibility: visible; } .corpix-marketing-tabs-menu li.active .corpix-marketing-title .title { color: #ffffff; } .corpix-marketing-tab-pane { display: none; } .corpix-marketing-tab-pane.active { display: block; } .corpix-marketing-tab-content { margin-top: 40px; } .corpix-marketing-tab-content .corpix-marketing-tab-pane .corpix-marketing-item { padding-right: 130px; } @media only screen and (max-width: 1399px) { .corpix-marketing-tab-content .corpix-marketing-tab-pane .corpix-marketing-item { padding-right: 55px; } } @media only screen and (max-width: 1199px) { .corpix-marketing-tab-content .corpix-marketing-tab-pane .corpix-marketing-item { padding-right: 110px; } } @media only screen and (max-width: 767px) { .corpix-marketing-tab-content .corpix-marketing-tab-pane .corpix-marketing-item { padding-right: 0; } } .corpix-marketing-tab-content .corpix-marketing-tab-pane .corpix-marketing-item .title { font-size: 22px; line-height: 36px; color: #0a0c1c; } .corpix-marketing-tab-content .corpix-marketing-tab-pane .corpix-marketing-item p { margin-top: 25px; } @media only screen and (max-width: 1199px) { .corpix-marketing-section .marketing-image { margin-left: 0; margin-top: 50px; } } @media only screen and (max-width: 991px) { .corpix-marketing-section .marketing-image { padding-top: 250px; padding-bottom: 250px; } } @media only screen and (max-width: 767px) { .corpix-marketing-section .marketing-image { padding-top: 200px; padding-bottom: 200px; } } @media only screen and (max-width: 575px) { .corpix-marketing-section .marketing-image .experience-wrap .experience { padding: 30px 35px; } .corpix-marketing-section .marketing-image .experience-wrap .experience .experience-text { padding-left: 30px; margin-left: 30px; margin-right: 0px; } } .corpix-marketing-section-02 { background: #f4f5f8; background-repeat: no-repeat; background-size: cover; background-position: center center; padding-top: 530px; padding-bottom: 160px; } .corpix-marketing-section-02 .marketing-content { padding-right: 50px; } .corpix-marketing-section-02 .marketing-content p { padding-right: 80px; margin-top: 50px; } .corpix-marketing-section-02 .marketing-item-wrap { position: relative; padding-left: 100px; } .corpix-marketing-section-02 .marketing-item-wrap::before { content: ""; position: absolute; left: -20px; top: 0; background: #e1e1e1; width: 1px; height: 340px; } .corpix-marketing-section-02 .marketing-item-wrap .marketing-item { display: flex; align-items: center; border-bottom: 1px solid #e1e1e1; margin-bottom: 40px; padding-bottom: 40px; } .corpix-marketing-section-02 .marketing-item-wrap .marketing-item.marketing-item-2 { margin-bottom: 0; } .corpix-marketing-section-02 .marketing-item-wrap .marketing-item .marketing-icon { height: 75px; width: 75px; line-height: 72px; background: #ffffff; border-radius: 50%; text-align: center; } .corpix-marketing-section-02 .marketing-item-wrap .marketing-item .marketing-text { flex: 1; margin-left: 30px; } .corpix-marketing-section-02 .marketing-item-wrap .marketing-item .marketing-text .title { font-size: 18px; line-height: 30px; color: #0a0c1c; } .corpix-marketing-section-02 .marketing-item-wrap .marketing-item .marketing-text p { font-size: 16px; line-height: 30px; } @media only screen and (max-width: 1199px) { .corpix-marketing-section-02 { padding-top: 495px; padding-bottom: 100px; } .corpix-marketing-section-02 .marketing-content p { padding-right: 0px; } .corpix-marketing-section-02 .marketing-item-wrap { padding-left: 40px; } } @media only screen and (max-width: 991px) { .corpix-marketing-section-02 { padding-top: 480px; padding-bottom: 80px; } .corpix-marketing-section-02 .marketing-item-wrap { padding-left: 0px; margin-top: 40px; } .corpix-marketing-section-02 .marketing-item-wrap::before { display: none; } } @media only screen and (max-width: 767px) { .corpix-marketing-section-02 { padding-top: 470px; padding-bottom: 80px; } .corpix-marketing-section-02 .marketing-content { padding-right: 0; } } .corpix-marketing-section-03 .marketing-wrap { background: #ffffff; margin-top: -240px; position: relative; z-index: 5; } .corpix-marketing-section-03 .marketing-wrap .marketing-content { padding-left: 45px; padding-top: 60px; } .corpix-marketing-section-03 .marketing-wrap .marketing-content .corpix-marketing-tabs-menu li .corpix-marketing-title { width: 180px; } .corpix-marketing-section-03 .marketing-wrap .marketing-content .corpix-marketing-tab-content .corpix-marketing-tab-pane .corpix-marketing-item { padding-right: 110px; } .corpix-marketing-section-03 .marketing-wrap .marketing-image { position: relative; } .corpix-marketing-section-03 .marketing-wrap .marketing-image .image { width: 100%; } .corpix-marketing-section-03 .marketing-wrap .marketing-image .marketing-image-text { display: flex; align-items: center; max-width: 450px; background: #000; border-left: 5px solid #ffa800; padding: 30px; position: absolute; left: 0; bottom: 0; } .corpix-marketing-section-03 .marketing-wrap .marketing-image .marketing-image-text .text { flex: 1; margin-left: 20px; } .corpix-marketing-section-03 .marketing-wrap .marketing-image .marketing-image-text .text .title { font-size: 30px; line-height: 36px; text-transform: uppercase1; color: #ffffff; } @media only screen and (max-width: 1399px) { .corpix-marketing-section-03 .marketing-wrap .marketing-content { padding-left: 35px; } .corpix-marketing-section-03 .marketing-wrap .marketing-content .corpix-marketing-tabs-menu li .corpix-marketing-title { width: 165px; } .corpix-marketing-section-03 .marketing-wrap .marketing-content .corpix-marketing-tab-content .corpix-marketing-tab-pane .corpix-marketing-item { padding-right: 80px; } } @media only screen and (max-width: 1199px) { .corpix-marketing-section-03 .marketing-wrap .marketing-content .corpix-marketing-tabs-menu li .corpix-marketing-title { width: 180px; } .corpix-marketing-section-03 .marketing-wrap .marketing-content .corpix-marketing-tab-content .corpix-marketing-tab-pane .corpix-marketing-item { padding-right: 230px; } .corpix-marketing-section-03 .marketing-wrap .marketing-image { margin-top: 50px; } } @media only screen and (max-width: 991px) { .corpix-marketing-section-03 .marketing-wrap .marketing-content .corpix-marketing-tab-content .corpix-marketing-tab-pane .corpix-marketing-item { padding-right: 110px; } } @media only screen and (max-width: 767px) { .corpix-marketing-section-03 .marketing-wrap .marketing-content .corpix-marketing-tab-content .corpix-marketing-tab-pane .corpix-marketing-item { padding-right: 0px; } } @media only screen and (max-width: 575px) { .corpix-marketing-section-03 .marketing-wrap .marketing-image .marketing-image-text { padding: 25px; } .corpix-marketing-section-03 .marketing-wrap .marketing-image .marketing-image-text .text .title { font-size: 20px; line-height: 26px; } } .corpix-marketing-section-04 .corpix-marketing-tabs-menu li::before { border-top: 30px solid #f82c47; } .corpix-marketing-section-04 .corpix-marketing-tabs-menu li.active { background-color: #f82c47; } .corpix-marketing-section-04 .marketing-wrap .marketing-image .marketing-image-text { border-left: 5px solid #f82c47; } .corpix-marketing-05::before { width: 100%; } /*-- /* 10 - Team CSS /*----------------------------------------*/ .corpix-team-section { background: #0a0c1c; background-repeat: no-repeat; background-position: center center; background-size: cover; } .corpix-team-section .section-title .title { text-shadow: none; } .team-content-wrap { margin-top: 60px; } .single-team .team-img a { display: block; overflow: hidden; position: relative; } .single-team .team-img a::before { content: ""; position: absolute; left: -28%; bottom: -93%; background: rgba(16, 18, 34, 0.5); border-radius: 50%; width: 465px; height: 465px; transform: scale(0.8); opacity: 0; visibility: hidden; transition: all 0.3s linear; } @media only screen and (max-width: 991px) { .single-team .team-img a::before { left: -18%; bottom: -85%; } } @media only screen and (max-width: 767px) { .single-team .team-img a::before { width: 365px; height: 365px; } } @media only screen and (max-width: 575px) { .single-team .team-img a::before { width: 465px; height: 465px; left: 4%; bottom: -54%; } } @media only screen and (max-width: 449px) { .single-team .team-img a::before { width: 360px; height: 360px; left: 3%; bottom: -50%; } } .single-team .team-img a img { width: 100%; } .single-team .team-content { position: relative; margin-top: 15px; padding-left: 20px; transition: all 0.3s linear; } .single-team .team-content::before { content: ""; position: absolute; left: 0; top: 0; background: #ffa800; width: 3px; height: 100%; transition: all 0.3s linear; } .single-team .team-content .team-social { position: absolute; top: 0; left: 50%; transform: translate(-50%, -65px); text-align: center; opacity: 0; visibility: hidden; transition: all 0.3s linear; } .single-team .team-content .team-social .social li { display: inline-block; } .single-team .team-content .team-social .social li + li { margin-left: 15px; } @media only screen and (max-width: 1399px) { .single-team .team-content .team-social .social li + li { margin-left: 12px; } } .single-team .team-content .team-social .social li a { font-size: 20px; transform: translate3d(0, 0, 0); color: #ffffff; } .single-team .team-content .team-social .social li:hover a { transform: translateY(-5px); color: #ffa800; } .single-team .team-content .name { font-size: 18px; line-height: 30px; text-transform: uppercase1; color: #ffffff; } .single-team .team-content .designation { font-size: 14px; line-height: 24px; color: #ffffff; } .single-team:hover .team-img a::before { transform: scale(1); opacity: 1; visibility: visible; } .single-team:hover .team-content { padding-left: 65px; } .single-team:hover .team-content::before { width: 45px; } .single-team:hover .team-content .team-social { opacity: 1; visibility: visible; transform: translate(-50%, -80px); } .team-active .swiper-pagination { position: relative; margin-top: 55px; } .team-active .swiper-pagination .swiper-pagination-bullet { margin: 0 6px; } .corpix-team-02 { background: #ffffff; } .corpix-team-02 .section-title .title { text-shadow: 5px 11px 1px #d4d4d4; } .corpix-team-02 .single-team .team-content .name { color: #0a0c1c; } .corpix-team-02 .single-team .team-content .designation { color: #0a0c1c; } .our-team-section .our-ream-wrap { margin-top: -30px; } .our-team-section .our-ream-wrap .single-team { margin-top: 30px; } /*-- /* 11 - FAQ CSS /*----------------------------------------*/ .faq-left .text { padding-right: 130px; margin-top: 50px; } @media only screen and (max-width: 1199px) { .faq-left .text { padding-right: 60px; } } @media only screen and (max-width: 767px) { .faq-left .text { padding-right: 0px; } } .author-box { display: flex; align-items: center; margin-top: 40px; } .author-box .author-img img { border: 1px solid #ffa800; border-radius: 50%; padding: 10px; } .author-box .author-text { flex: 1; margin-left: 10px; } @media only screen and (max-width: 991px) { .corpix-faq-section .faq-accordion { margin-top: 50px; } } .corpix-faq-section .faq-accordion .accordion-item { border: 0; box-shadow: 0px 0px 161px 0px rgba(0, 0, 0, 0.2); margin-top: 35px; } .corpix-faq-section .faq-accordion .accordion-item:first-of-type { margin-top: 0; } .corpix-faq-section .faq-accordion .accordion-item:first-of-type .accordion-button { border-top-left-radius: 0; border-top-right-radius: 0; } .corpix-faq-section .faq-accordion .accordion-item .accordion-button { padding: 30px 50px; } @media only screen and (max-width: 575px) { .corpix-faq-section .faq-accordion .accordion-item .accordion-button { padding: 30px 42px; } } .corpix-faq-section .faq-accordion .accordion-item .accordion-button .title { font-size: 20px; color: #0a0c1c; font-family: "Jura", sans-serif; display: inline-block; font-weight: 700; text-transform: capitalize; position: relative; z-index: 1; } .corpix-faq-section .faq-accordion .accordion-item .accordion-button .title::before { content: ""; width: 25px; height: 25px; border-radius: 50%; background: #ffa800; position: absolute; left: -10px; top: -4px; z-index: -1; } .corpix-faq-section .faq-accordion .accordion-item .accordion-button::after { position: absolute; content: "+"; border: none; width: 30px; height: 30px; line-height: 20px; font-size: 45px; font-weight: 400; text-align: center; color: #ffa800; background: none; right: 35px; transition: all .3s ease-out 0s; } .corpix-faq-section .faq-accordion .accordion-item .accordion-body { font-size: 16px; padding: 30px 50px; padding-top: 0; } .corpix-faq-section .faq-accordion .accordion-item .accordion-button:focus { box-shadow: none; } .corpix-faq-section .faq-accordion .accordion-item .accordion-button:not(.collapsed) { background-color: #ffffff; border-top: 3px solid #ffa800; box-shadow: none; } .corpix-faq-section .faq-accordion .accordion-item .accordion-button:not(.collapsed)::after { position: absolute; content: "-"; border: none; width: 30px; height: 30px; line-height: 20px; text-align: center; background: none; transform: rotate(0); } .corpix-faq-section-02 .section-title .title { font-size: 40px; } @media only screen and (max-width: 767px) { .corpix-faq-section-02 .section-title .title { font-size: 35px; } } .corpix-faq-section-02 .faq-accordion-wrapper { display: flex; padding-top: 60px; } @media only screen and (max-width: 991px) { .corpix-faq-section-02 .faq-accordion-wrapper { display: block; } } .corpix-faq-section-02 .faq-accordion-wrapper .faq-col { width: 50%; } @media only screen and (max-width: 991px) { .corpix-faq-section-02 .faq-accordion-wrapper .faq-col { width: 100%; } } .corpix-faq-section-02 .faq-accordion-wrapper .faq-col:first-child { padding-right: 25px; } @media only screen and (max-width: 991px) { .corpix-faq-section-02 .faq-accordion-wrapper .faq-col:first-child { padding-right: 0px; } } .corpix-faq-section-02 .faq-accordion-wrapper .faq-col:last-child { padding-left: 25px; } @media only screen and (max-width: 991px) { .corpix-faq-section-02 .faq-accordion-wrapper .faq-col:last-child { padding-left: 0px; } } .corpix-faq-section-02 .faq-accordion .accordion-item { border: 0; margin-bottom: 10px; border-top: 1px solid #e5e5e5; } .corpix-faq-section-02 .faq-accordion .accordion-item:first-of-type { border-top-left-radius: 0; border-top-right-radius: 0; } .corpix-faq-section-02 .faq-accordion .accordion-item:first-of-type .accordion-button { border-top-left-radius: 0; border-top-right-radius: 0; } .corpix-faq-section-02 .faq-accordion .accordion-item .accordion-header { padding-top: 30px; padding-bottom: 30px; } .corpix-faq-section-02 .faq-accordion .accordion-item .accordion-header .accordion-button { padding: 0; font-size: 20px; line-height: 30px; font-family: "Jura", sans-serif; color: #0a0c1c; font-weight: 700; padding-right: 45px; position: relative; transition: all 0.3s linear; } .corpix-faq-section-02 .faq-accordion .accordion-item .accordion-header .accordion-button::after { display: none; } .corpix-faq-section-02 .faq-accordion .accordion-item .accordion-header .accordion-button .faq-button { position: absolute; right: 0; height: 32px; width: 32px; color: #ffa800; border: 1px solid #e5e5e5; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 50%; transform: rotate(90deg); transition: all 0.3s linear; } .corpix-faq-section-02 .faq-accordion .accordion-item .accordion-header .accordion-button .faq-button i { font-size: 15px; } .corpix-faq-section-02 .faq-accordion .accordion-item .accordion-header .accordion-button:focus { border: 0; box-shadow: none; } .corpix-faq-section-02 .faq-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) { color: #0a0c1c; background: #ffffff; box-shadow: none; } .corpix-faq-section-02 .faq-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .faq-button { position: absolute; right: 0; height: 32px; width: 32px; color: #ffa800; border: 1px solid #e5e5e5; text-align: center; border-radius: 50%; transform: rotate(-90deg); transition: all 0.3s linear; } .corpix-faq-section-02 .faq-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .faq-button i { font-size: 15px; } .corpix-faq-section-02 .faq-accordion .accordion-item .accordion-header .accordion-button:hover { color: #ffa800; } .corpix-faq-section-02 .faq-accordion .accordion-item .accordion-body { padding: 0; padding-bottom: 20px; } .corpix-faq-section-02 .faq-accordion .accordion-item .accordion-body p { font-size: 16px; line-height: 30px; } .corpix-faq-section-02 .faq-accordion .accordion-item:hover .accordion-button .faq-button { transform: rotate(-90deg); } /*-- /* 13 - Blog CSS /*----------------------------------------*/ .blog-content-wrap { padding-top: 30px; } .single-blog { background: #ffffff; box-shadow: 0px 0px 98px 0px rgba(0, 0, 0, 0.07); margin-top: 30px; } .single-blog .blog-img { overflow: hidden; } .single-blog .blog-img a { display: block; } .single-blog .blog-img a img { width: 100%; transition: all 0.3s linear; } .single-blog .blog-content { margin-top: -25px; padding: 0 20px 50px; } @media only screen and (max-width: 991px) { .single-blog .blog-content { padding: 0 25px 50px; } } @media only screen and (max-width: 449px) { .single-blog .blog-content { padding: 0 15px 50px; } } .single-blog .blog-content .blog-meta .date { width: 65px; height: 65px; text-align: center; background: #ffa800; color: #0a0c1c; font-size: 14px; font-family: "Jura", sans-serif; font-weight: 700; display: inline-block; text-align: center; position: relative; z-index: 1; padding: 12px; } .single-blog .blog-content .blog-meta .date span { font-size: 28px; font-weight: 500; line-height: 22px; display: block; } .single-blog .blog-content .blog-meta p { display: inline-block; font-size: 14px; font-family: "Jura", sans-serif; color: #999999; margin-left: 15px; } @media only screen and (max-width: 449px) { .single-blog .blog-content .blog-meta p { margin-left: 8px; } } .single-blog .blog-content .blog-meta p i { color: #ffa800; margin-right: 5px; } .single-blog .blog-content .title { font-size: 15px; line-height: 34px; color: #0a0c1c; margin-top: 20px; } .single-blog .blog-btn { border-top: 1px solid #ebebeb; padding: 15px 40px; } .single-blog .blog-btn .link-btn { text-transform: capitalize; } .single-blog:hover .blog-img a img { transform: scale(1.1); } .corpix-blog-section-04 { border-top: 1px solid #e1e1e1; } .corpix-blog-section-04 .single-blog .blog-content .blog-meta .date { background: #f82c47; color: #ffffff; } .corpix-blog-section-04 .single-blog .blog-content .blog-meta p i { color: #f82c47; } .corpix-blog-section-04 .single-blog .blog-content .title:hover a { color: #f82c47; } .corpix-blog-section-04 .single-blog .blog-btn .link-btn { text-transform: capitalize; } .corpix-blog-section-04 .single-blog .blog-btn .link-btn .link-icon { background: #f82c47; } .corpix-blog-section-04 .single-blog .blog-btn .link-btn .link-icon img { filter: brightness(0) invert(1); } .corpix-blog-section-04 .single-blog .blog-btn .link-btn:hover { color: #f82c47; } .corpix-blog-section-05 .single-blog .blog-content .blog-meta .date { background: #fc653c; color: #ffffff; } .corpix-blog-section-05 .single-blog .blog-content .blog-meta p i { color: #fc653c; } .corpix-blog-section-05 .single-blog .blog-content .title:hover a { color: #fc653c; } .corpix-blog-section-05 .single-blog .blog-btn .link-btn { text-transform: capitalize; } .corpix-blog-section-05 .single-blog .blog-btn .link-btn .link-icon { background: #fc653c; } .corpix-blog-section-05 .single-blog .blog-btn .link-btn .link-icon img { filter: brightness(0) invert(1); } .corpix-blog-section-05 .single-blog .blog-btn .link-btn:hover { color: #fc653c; } .blog-grid-wrap { margin-top: -30px; } /*-- /* 14 - CTA CSS /*----------------------------------------*/ .corpix-cta-section { background: #ffa800; padding-top: 90px; padding-bottom: 110px; overflow: hidden; position: relative; z-index: 1; } @media only screen and (max-width: 991px) { .corpix-cta-section { padding-top: 80px; padding-bottom: 80px; } } .corpix-cta-section .shape-1 { width: 575px; height: 575px; background: #e59703; border-radius: 50%; position: absolute; top: -96%; left: -6.5%; z-index: -1; } .corpix-cta-section .shape-2 { width: 575px; height: 575px; border: 3px solid #ffffff; border-radius: 50%; position: absolute; top: -111%; left: -5.5%; z-index: -1; } .corpix-cta-section .shape-3 { width: 60px; height: 60px; background: #feb933; border-radius: 50%; position: absolute; top: 15%; right: 38%; -webkit-animation: animationOne 15s infinite linear; animation: animationOne 15s infinite linear; z-index: -1; } .corpix-cta-section .shape-4 { width: 575px; height: 575px; background: #feb01a; border-radius: 50%; position: absolute; right: -5%; bottom: -105%; z-index: -1; } .corpix-cta-section .shape-5 { width: 575px; height: 575px; border: 3px solid #ffffff; border-radius: 50%; position: absolute; right: -6%; bottom: -93%; z-index: -1; } .corpix-cta-section .cta-content .title { font-size: 40px; line-height: 1.5; text-transform: uppercase1; color: #0a0c1c; } @media only screen and (max-width: 1199px) { .corpix-cta-section .cta-content .title { font-size: 36px; } } @media only screen and (max-width: 991px) { .corpix-cta-section .cta-content .title { font-size: 32px; } } @media only screen and (max-width: 575px) { .corpix-cta-section .cta-content .title { font-size: 30px; } } .corpix-cta-section .cta-btn { text-align: right; } @media only screen and (max-width: 767px) { .corpix-cta-section .cta-btn { text-align: left; margin-top: 40px; } } @media only screen and (max-width: 1199px) { .corpix-cta-section .shape-1 { width: 450px; height: 450px; } .corpix-cta-section .shape-2 { width: 450px; height: 450px; } .corpix-cta-section .shape-4 { width: 450px; height: 450px; } .corpix-cta-section .shape-5 { width: 450px; height: 450px; } } @media only screen and (max-width: 767px) { .corpix-cta-section .shape-1 { width: 350px; height: 350px; top: -60%; left: -8.5%; } .corpix-cta-section .shape-2 { width: 350px; height: 350px; top: -63%; left: -5.5%; } .corpix-cta-section .shape-4 { width: 350px; height: 350px; right: -5%; bottom: -75%; } .corpix-cta-section .shape-5 { width: 350px; height: 350px; right: -6%; bottom: -68%; } } .corpix-cta-section-02 .cta-wrap-02 { display: flex; background: #ffffff; box-shadow: 0px 0px 136px 0px rgba(0, 0, 0, 0.16); padding: 70px 58px; overflow: hidden; margin-bottom: -90px; position: relative; z-index: 5; } .corpix-cta-section-02 .cta-wrap-02 .cta-item { display: flex; align-items: center; width: 50%; } .corpix-cta-section-02 .cta-wrap-02 .cta-item.cta-item-2 { padding-left: 60px; position: relative; } .corpix-cta-section-02 .cta-wrap-02 .cta-item.cta-item-2::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #e1e1e1; width: 1px; height: 215px; } .corpix-cta-section-02 .cta-wrap-02 .cta-item .cta-text { flex: 1; margin-left: 25px; padding-right: 150px; } .corpix-cta-section-02 .cta-wrap-02 .cta-item .cta-text .title { font-size: 24px; line-height: 30px; color: #0a0c1c; position: relative; } .corpix-cta-section-02 .cta-wrap-02 .cta-item .cta-text .title .cta-link-icon { position: absolute; right: -55px; top: 15px; } @media only screen and (max-width: 1199px) { .corpix-cta-section-02 .cta-wrap-02 { padding: 60px 40px; } .corpix-cta-section-02 .cta-wrap-02 .cta-item .cta-text { margin-left: 15px; padding-right: 35px; } .corpix-cta-section-02 .cta-wrap-02 .cta-item .cta-text .title .cta-link-icon { right: -20px; } } @media only screen and (max-width: 991px) { .corpix-cta-section-02 .cta-wrap-02 { padding: 60px 35px; } .corpix-cta-section-02 .cta-wrap-02 .cta-item { display: block; } .corpix-cta-section-02 .cta-wrap-02 .cta-item .cta-text { margin-left: 0px; margin-top: 15px; padding-right: 30px; } .corpix-cta-section-02 .cta-wrap-02 .cta-item .cta-text .title { font-size: 22px; } } @media only screen and (max-width: 767px) { .corpix-cta-section-02 .cta-wrap-02 .cta-item.cta-item-2 { padding-left: 30px; } } @media only screen and (max-width: 575px) { .corpix-cta-section-02 .cta-wrap-02 { flex-direction: column; } .corpix-cta-section-02 .cta-wrap-02 .cta-item { width: 100%; } .corpix-cta-section-02 .cta-wrap-02 .cta-item.cta-item-2 { padding-left: 0px; padding-top: 30px; margin-top: 30px; } .corpix-cta-section-02 .cta-wrap-02 .cta-item.cta-item-2::before { left: 50%; top: 0; transform: translateX(-50%); width: 220px; height: 1px; } } .corpix-cta-section-04 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .corpix-cta-section-04 .cta-btn .btn:hover { color: #f82c47; } .corpix-cta-section-05 { background-repeat: no-repeat; background-position: center center; background-size: cover; padding-top: 150px; padding-bottom: 190px; } @media only screen and (max-width: 1199px) { .corpix-cta-section-05 { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (max-width: 991px) { .corpix-cta-section-05 { padding-top: 80px; padding-bottom: 80px; } } .corpix-cta-section-05 .cta-content { max-width: 570px; margin: 0 auto; } .corpix-cta-section-05 .cta-content .cta-btn-02 { margin-top: 40px; } .corpix-cta-section-05 .cta-content .cta-btn-02 .btn { background: #1c1e27; color: #ffffff; border-radius: 5px; } .corpix-cta-section-05 .cta-content .cta-btn-02 .btn:hover { background: #ffffff; color: #fc653c; } /*-- /* 12 - Testimonial CSS /*----------------------------------------*/ .corpix-testimonial-section { background-repeat: no-repeat; background-position: center center; background-size: cover; padding-top: 170px; padding-bottom: 170px; overflow: hidden; position: relative; z-index: 1; } .corpix-testimonial-section::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(17, 56, 100, 0.5); width: 100%; height: 100%; z-index: -1; } .corpix-testimonial-section .testimonial-quote { position: relative; } .corpix-testimonial-section .testimonial-quote .svg-shape { position: relative; z-index: 1; } .corpix-testimonial-section .testimonial-quote .svg-shape svg { width: 382px; height: 360px; fill: #ffa800; } .corpix-testimonial-section .testimonial-quote .svg-shape::after { content: ""; position: absolute; left: 30px; top: -15px; border: 2px solid #fff; border-radius: 45px; width: 380px; height: 355px; z-index: -1; } .corpix-testimonial-section .testimonial-quote .quote { position: absolute; top: 50%; left: 50%; z-index: 5; transform: translate(-60%, -65%); } .corpix-testimonial-section .single-testimonial .testimonial-content { padding-right: 120px; padding-left: 35px; } .corpix-testimonial-section .single-testimonial .testimonial-content .testimonial-text { font-size: 48px; line-height: 60px; font-family: "Jura", sans-serif; font-weight: 700; text-transform: uppercase1; color: #ffffff; } .corpix-testimonial-section .single-testimonial .testimonial-content .testimonial-text span { color: #ffa800; } .corpix-testimonial-section .single-testimonial .testimonial-content .name { font-size: 18px; line-height: 30px; font-family: "Jura", sans-serif; font-weight: 700; text-transform: uppercase1; color: #ffffff; margin-top: 35px; } .corpix-testimonial-section .single-testimonial .testimonial-content .designation { font-size: 14px; line-height: 24px; color: #ffffff; } @media only screen and (max-width: 1399px) { .corpix-testimonial-section .single-testimonial .testimonial-content { padding-right: 60px; padding-left: 65px; } } @media only screen and (max-width: 1199px) { .corpix-testimonial-section { padding-top: 120px; padding-bottom: 120px; } .corpix-testimonial-section .testimonial-quote .svg-shape { text-align: center; } .corpix-testimonial-section .testimonial-quote .svg-shape::after { left: 305px; } .corpix-testimonial-section .testimonial-quote .quote { transform: translate(-50%, -65%); } .corpix-testimonial-section .testimonial-slider-wrap { margin-top: 30px; } .corpix-testimonial-section .single-testimonial { text-align: center; } .corpix-testimonial-section .single-testimonial .testimonial-content { padding-right: 0; padding-left: 0; max-width: 720px; margin: 0 auto; } .corpix-testimonial-section .single-testimonial .testimonial-content .testimonial-text { font-size: 42px; line-height: 60px; } } @media only screen and (max-width: 991px) { .corpix-testimonial-section { padding-top: 100px; padding-bottom: 80px; } .corpix-testimonial-section .testimonial-quote .svg-shape::after { left: 185px; } } @media only screen and (max-width: 767px) { .corpix-testimonial-section .testimonial-quote .svg-shape { display: none; } .corpix-testimonial-section .testimonial-quote .quote { background: #ffa800; border-radius: 45px; margin-top: 130px; padding: 40px; } .corpix-testimonial-section .testimonial-slider-wrap { margin-top: 230px; } .corpix-testimonial-section .single-testimonial { text-align: center; } .corpix-testimonial-section .single-testimonial .testimonial-content { padding-right: 0; padding-left: 0; max-width: 720px; margin: 0 auto; } .corpix-testimonial-section .single-testimonial .testimonial-content .testimonial-text { font-size: 32px; line-height: 50px; } } @media only screen and (max-width: 449px) { .corpix-testimonial-section { padding-top: 60px; } } .testimonial-active .swiper-pagination { position: relative; text-align: left; margin-top: 45px; } @media only screen and (max-width: 1199px) { .testimonial-active .swiper-pagination { text-align: center; } } .testimonial-active .swiper-pagination.swiper-pagination-bullets { left: 35px; } @media only screen and (max-width: 1399px) { .testimonial-active .swiper-pagination.swiper-pagination-bullets { left: 65px; } } @media only screen and (max-width: 1199px) { .testimonial-active .swiper-pagination.swiper-pagination-bullets { left: 0px; } } .testimonial-active .swiper-pagination .swiper-pagination-bullet { left: 35px; margin: 0 6px; } .corpix-testimonial-section-02 .single-testimonial { max-width: 680px; margin: 0 auto; margin-top: 10px; } .corpix-testimonial-section-02 .single-testimonial .testimonial-quote .svg-shape-02 { position: relative; z-index: 1; display: inline-block; } .corpix-testimonial-section-02 .single-testimonial .testimonial-quote .svg-shape-02 svg { width: 155px; height: 147px; fill: #ffa800; } .corpix-testimonial-section-02 .single-testimonial .testimonial-quote .svg-shape-02::after { content: ""; position: absolute; left: 20px; top: -10px; border: 2px solid #fff; border-radius: 20px; width: 150px; height: 150px; z-index: -1; } .corpix-testimonial-section-02 .single-testimonial .testimonial-quote .quote { position: absolute; top: 50%; left: 50%; z-index: 5; transform: translate(-50%, -65%); } .corpix-testimonial-section-02 .single-testimonial .testimonial-content { padding-right: 0px; padding-left: 0px; margin-top: 30px; } @media only screen and (max-width: 1199px) { .corpix-testimonial-section-02 { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (max-width: 991px) { .corpix-testimonial-section-02 { padding-top: 80px; padding-bottom: 80px; } } @media only screen and (max-width: 767px) { .corpix-testimonial-section-02 .testimonial-quote .svg-shape { display: none; } .corpix-testimonial-section-02 .testimonial-quote .quote { background: none; border-radius: 0; margin-top: 0; padding: 0; } .corpix-testimonial-section-02 .testimonial-slider-wrap { margin-top: 0px; } } .testimonial-active-02 .swiper-pagination { text-align: center; } .testimonial-active-02 .swiper-pagination.swiper-pagination-bullets { left: 0px; } .corpix-testimonial-section-03 { position: relative; padding-top: 0; padding-bottom: 0; } .corpix-testimonial-section-03::after { content: ""; position: absolute; left: 10%; bottom: -10%; background-image: url(../images/quote3.png); background-repeat: no-repeat; background-position: center bottom; width: 100%; height: 100%; z-index: -1; } .corpix-testimonial-section-03::before { content: ""; position: absolute; left: auto; right: 0; top: 0; background: #1c1e27; width: 80%; height: 100%; } .corpix-testimonial-section-03 .single-testimonial .testimonial-content { padding-right: 150px; padding-left: 0; padding-top: 80px; } @media only screen and (max-width: 1399px) { .corpix-testimonial-section-03 .single-testimonial .testimonial-content { padding-right: 130px; padding-top: 53px; } } .corpix-testimonial-section-03 .single-testimonial .testimonial-content .testimonial-text span { color: #fc653c; } @media only screen and (max-width: 1199px) { .corpix-testimonial-section-03 { padding-top: 100px; padding-bottom: 100px; } .corpix-testimonial-section-03::after { left: -1%; bottom: 14%; } .corpix-testimonial-section-03::before { width: 100%; } .corpix-testimonial-section-03 .testimonial-img { text-align: center; } .corpix-testimonial-section-03 .single-testimonial .testimonial-content { padding-right: 0; padding-left: 0; padding-top: 0; } } @media only screen and (max-width: 767px) { .corpix-testimonial-section-03 { padding-top: 80px; padding-bottom: 80px; } .corpix-testimonial-section-03 .testimonial-slider-wrap { margin-top: 45px; } } .testimonial-active-03 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #fc653c; } .testimonial-active-03 .swiper-pagination.swiper-pagination-bullets { left: 0px; } .corpix-testimonial-04::before { display: none; } .corpix-testimonial-04 .single-testimonial .testimonial-content .testimonial-text { color: #0a0c1c; } .corpix-testimonial-04 .single-testimonial .testimonial-content .testimonial-text span { color: #ffa800; } .corpix-testimonial-04 .single-testimonial .testimonial-content .name { color: #0a0c1c; } .corpix-testimonial-04 .single-testimonial .testimonial-content .designation { color: #0a0c1c; } /*-- /* 15 - Work CSS /*----------------------------------------*/ .work-slider-wrap { margin-top: 60px; } .work-item .work-img { position: relative; overflow: hidden; } .work-item .work-img a { display: block; position: relative; } .work-item .work-img a::before { content: ""; position: absolute; right: -35%; bottom: -37%; background: rgba(16, 18, 34, 0.6); border-radius: 50%; width: 410px; height: 410px; opacity: 0; visibility: hidden; transition: all 0.3s linear; z-index: 0; } .work-item .work-img a::after { content: ""; position: absolute; right: -31%; bottom: -27%; border: 1px solid #ffa800; border-radius: 50%; width: 410px; height: 410px; opacity: 0; visibility: hidden; transition: all 0.3s linear; z-index: 0; } .work-item .work-img a img { width: 100%; } .work-item .work-img .work-content { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; transform: translateY(-25px); opacity: 0; visibility: hidden; transition: all 0.3s linear; } .work-item .work-img .work-content .title { font-size: 24px; background: #ffa800; display: inline-block; height: 50px; line-height: 45px; padding: 0 35px; color: #0a0c1c; } .work-item .work-img .work-content .sub-title { font-size: 18px; background: #0a0c1c; max-width: 145px; height: 35px; margin: 0 auto; line-height: 33px; text-transform: uppercase1; padding: 0 30px; color: #ffffff; margin-top: 7px; } .work-item .work-img:hover a::before { opacity: 1; visibility: visible; } .work-item .work-img:hover a::after { opacity: 1; visibility: visible; } .work-item .work-img:hover a img { width: 100%; } .work-item .work-img:hover .work-content { opacity: 1; visibility: visible; transform: translateY(-50px); } .work-active .swiper-pagination { position: relative; margin-top: 45px; } .work-active .swiper-pagination .swiper-pagination-bullet { margin: 0 6px; } @media only screen and (max-width: 1399px) { .work-item .work-img a::before { width: 350px; height: 350px; } .work-item .work-img a::after { width: 350px; height: 350px; } } @media only screen and (max-width: 1199px) { .work-item .work-img a::before { width: 450px; height: 450px; } .work-item .work-img a::after { width: 450px; height: 450px; } } .corpix-work-section-03 .work-content-wrap { padding-top: 35px; } .corpix-work-section-03 .work-content-wrap .work-item { margin-top: 30px; } .corpix-work-section-03 .work-content-wrap .work-item .work-img a::before { width: 380px; height: 410px; } .corpix-work-section-03 .work-content-wrap .work-item .work-img a::after { width: 380px; height: 380px; right: -28%; bottom: -20%; } .corpix-work-section-03 .work-content-wrap .work-btn .btn { border: 2px solid #ffa800; background: #ffffff; margin-top: 45px; } @media only screen and (max-width: 1199px) { .corpix-work-section-03 .work-content-wrap .work-item .work-img a::before { width: 330px; height: 330px; } .corpix-work-section-03 .work-content-wrap .work-item .work-img a::after { width: 330px; height: 330px; right: -31%; bottom: -28%; } } @media only screen and (max-width: 767px) { .corpix-work-section-03 .work-content-wrap .work-item .work-img a::before { width: 380px; height: 410px; } .corpix-work-section-03 .work-content-wrap .work-item .work-img a::after { width: 380px; height: 380px; right: -28%; bottom: -20%; } } @media only screen and (max-width: 449px) { .corpix-work-section-03 .work-content-wrap .work-item .work-img a::before { width: 330px; height: 330px; } .corpix-work-section-03 .work-content-wrap .work-item .work-img a::after { width: 330px; height: 330px; right: -31%; bottom: -28%; } } .corpix-work-section-04 .work-item .work-img { position: relative; } .corpix-work-section-04 .work-item .work-img .shape-1 { position: absolute; left: 0; top: 0; background: #f82c47; width: 100%; height: 100%; border-radius: 0; transform: scale(0.8); overflow: hidden; opacity: 0; visibility: hidden; transition: all 0.3s linear; z-index: 1; } .corpix-work-section-04 .work-item .work-img .shape-1::before { content: ""; width: 300px; height: 300px; background: #f9425a; border-radius: 50%; position: absolute; right: -80px; bottom: -80px; } .corpix-work-section-04 .work-item .work-img .shape-1::after { content: ""; width: 300px; height: 300px; border: 3px solid #fa7687; border-radius: 50%; position: absolute; right: -55px; bottom: -40px; } .corpix-work-section-04 .work-item .work-img a { position: relative; } .corpix-work-section-04 .work-item .work-img a::before { display: none; } .corpix-work-section-04 .work-item .work-img a::after { display: none; } .corpix-work-section-04 .work-item .work-img .work-content { z-index: 5; transform: translateY(-60px); } .corpix-work-section-04 .work-item .work-img .work-content .title { background: none; height: 0px; line-height: 0px; padding: 0 0px; } .corpix-work-section-04 .work-item .work-img .work-content .title a { color: #ffffff; } .corpix-work-section-04 .work-item .work-img .work-content .title:hover a { color: #0a0c1c; } .corpix-work-section-04 .work-item .work-img .work-content .sub-title { background: none; color: #ffffff; height: 0px; line-height: 0px; padding: 0 0px; margin-top: 15px; } .corpix-work-section-04 .work-item .work-img:hover .shape-1 { transform: scale(0.9); opacity: 1; visibility: visible; } .corpix-work-section-04 .work-item .work-img:hover .work-content { transform: translateY(-90px); } .work-active-04 .swiper-pagination { position: relative; margin-top: 45px; } .work-active-04 .swiper-pagination .swiper-pagination-bullet { margin: 0 6px; } .work-active-04 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #f82c47; } .corpix-work-05 .work-content-wrap { padding-top: 0; margin-top: -30px; } /*-- /* 16 - Project CSS /*----------------------------------------*/ .corpix-project-section { padding-top: 280px; padding-bottom: 250px; background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: hidden; position: relative; z-index: 1; } .corpix-project-section::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(17, 56, 100, 0.6); width: 100%; height: 100%; z-index: -1; } .corpix-project-section .shape-1 { position: absolute; top: -29%; right: -8%; z-index: -1; } .corpix-project-section .shape-1 svg { width: 588px; height: 600px; fill: none; stroke-width: 3px; stroke: #ffa800; } .corpix-project-section .shape-2 { position: absolute; left: -10%; bottom: -25%; z-index: -1; } .corpix-project-section .shape-2 svg { width: 584px; height: 597px; fill: #ffa800; } .corpix-project-section .shape-3 { position: absolute; left: -7%; bottom: -23%; z-index: -1; } .corpix-project-section .shape-3 svg { width: 588px; height: 600px; fill: none; stroke-width: 3px; stroke: #ffffff; } .corpix-project-section .project-content .title { font-size: 60px; line-height: 80px; text-transform: uppercase1; color: #ffffff; } .corpix-project-section .project-content .btn { margin-top: 50px; } @media only screen and (max-width: 1199px) { .corpix-project-section { padding-top: 180px; padding-bottom: 160px; } .corpix-project-section .shape-1 { top: -40%; right: -20%; } .corpix-project-section .shape-2 { left: -27%; bottom: -58%; } .corpix-project-section .shape-3 { left: -20%; bottom: -56%; } .corpix-project-section .project-content .title { font-size: 46px; line-height: 65px; } } @media only screen and (max-width: 767px) { .corpix-project-section { padding-top: 160px; padding-bottom: 120px; } .corpix-project-section .shape-1 { top: -48%; right: -45%; } .corpix-project-section .shape-2 { left: -45%; bottom: -71%; } .corpix-project-section .shape-3 { left: -39%; bottom: -69%; } .corpix-project-section .project-content .title { font-size: 35px; line-height: 55px; } } @media only screen and (max-width: 575px) { .corpix-project-section .shape-1 { top: -48%; right: -45%; } .corpix-project-section .shape-2 { display: none; } .corpix-project-section .shape-3 { display: none; } .corpix-project-section .project-content .title { font-size: 30px; line-height: 50px; } } /*-- /* 17 - Skill CSS /*----------------------------------------*/ .corpix-skill-section { background: #f3f4f7; background-repeat: no-repeat; background-position: center center; background-size: cover; padding-top: 340px; padding-bottom: 100px; margin-top: -210px; } .corpix-skill-section .skill-left .skill-bar-wrap { padding-right: 40px; } .corpix-skill-section .skill-left .skill-bar-wrap .skill-item { margin-top: 30px; } .corpix-skill-section .skill-left .skill-bar-wrap .skill-item .bar-inner { background: #ffffff; } .corpix-skill-section .skill-right { padding-left: 110px; } .corpix-skill-section .skill-right .skill-text { padding-right: 130px; } .corpix-skill-section .skill-right .skill-img-list-wrap { display: flex; align-items: center; margin-top: 40px; } .corpix-skill-section .skill-right .skill-img-list-wrap .skill-img { position: relative; } .corpix-skill-section .skill-right .skill-img-list-wrap .skill-list { flex: 1; margin-left: 30px; } .corpix-skill-section .skill-right .skill-img-list-wrap .skill-list ul li { font-size: 18px; line-height: 36px; font-family: "Jura", sans-serif; font-weight: 700; color: #0a0c1c; } .corpix-skill-section .skill-right .skill-img-list-wrap .skill-list ul li i { font-size: 16px; color: #ffa800; margin-right: 15px; } .corpix-skill-section .skill-right .author-box { border-top: 1px solid #e1e1e1; padding-top: 25px; margin-top: 50px; } @media only screen and (max-width: 1199px) { .corpix-skill-section { padding-top: 290px; } .corpix-skill-section .skill-right { padding-left: 24px; } .corpix-skill-section .skill-right .skill-text { padding-right: 0px; } .corpix-skill-section .skill-right .skill-img-list-wrap .skill-list { margin-left: 20px; } .corpix-skill-section .skill-right .skill-img-list-wrap .skill-list ul li i { margin-right: 10px; } } @media only screen and (max-width: 991px) { .corpix-skill-section { padding-top: 270px; } .corpix-skill-section .skill-right { padding-left: 0px; margin-top: 50px; } } @media only screen and (max-width: 575px) { .corpix-skill-section .skill-right .skill-img-list-wrap { flex-direction: column; align-items: flex-start; gap: 15px; } .corpix-skill-section .skill-right .skill-img-list-wrap .skill-list { margin-left: 0px; } } .corpix-skill-section-04 { background: #262626; padding-top: 130px; padding-bottom: 345px; margin-top: 0; } .corpix-skill-section-04 .skill-left .section-title .title { text-shadow: none; } .corpix-skill-section-04 .skill-left .skill-bar-wrap { padding-right: 40px; } .corpix-skill-section-04 .skill-left .skill-bar-wrap .skill-item { margin-top: 30px; } .corpix-skill-section-04 .skill-left .skill-bar-wrap .skill-item .skill-header .skill-title { color: #ffffff; } .corpix-skill-section-04 .skill-left .skill-bar-wrap .skill-item .bar-inner { background: #ffffff; } .corpix-skill-section-04 .skill-left .skill-bar-wrap .skill-item .bar-inner .progress-line { background: #f82c47; } .corpix-skill-section-04 .skill-left .skill-bar-wrap .skill-item .bar-inner .progress-line .skill-percentage { color: #ffffff; } .corpix-skill-section-04 .skill-left .skill-bar-wrap .skill-item .bar-inner .progress-line .skill-percentage span { color: #ffffff; } .corpix-skill-section-04 .skill-right .skill-text { color: #ffffff; } .corpix-skill-section-04 .skill-right .skill-img-list-wrap .skill-list ul li { color: #ffffff; } .corpix-skill-section-04 .skill-right .skill-img-list-wrap .skill-list ul li i { color: #f82c47; } .corpix-skill-section-04 .skill-right .author-box { border-top: 0; padding-top: 0px; margin-top: 40px; } .corpix-skill-section-04 .skill-right .author-box .author-img img { border: 1px solid #f82c47; } .corpix-skill-section-04 .skill-right .author-box .author-text .designation { color: #ffffff; } @media only screen and (max-width: 1199px) { .corpix-skill-section-04 { padding-top: 100px; padding-bottom: 330px; } } @media only screen and (max-width: 991px) { .corpix-skill-section-04 { padding-top: 80px; padding-bottom: 310px; } } .corpix-skill-05 { background: #ffffff; padding-top: 120px; padding-bottom: 120px; margin-top: 0; } .corpix-skill-05 .skill-left .skill-bar-wrap .skill-item .bar-inner { background: #f4f5f8; } /*-- /* 18 - Features CSS /*----------------------------------------*/ .corpix-features-section { padding-top: 80px; padding-bottom: 90px; border-bottom: 1px solid #d7d7d7; } @media only screen and (max-width: 767px) { .corpix-features-section { padding-top: 80px; padding-bottom: 80px; } } .features-wrap { margin-top: -30px; } .features-item { position: relative; margin-top: 60px; margin-bottom: 30px; } .features-item::before { content: ""; position: absolute; left: 0; top: 0; background: #e1e1e1; width: 0px; height: 200px; } @media only screen and (max-width: 1199px) { .features-item::before { display: none; } } .features-item.features-item-1::before { display: none; } .features-item .features-content { margin-top: 20px; padding: 0 10px; } .features-item .features-content .title { font-size: 21px; line-height: 30px; text-transform: uppercase1; color: #0a0c1c; } .features-item .features-content p { font-size: 16px; line-height: 30px; margin-top: 15px; } .corpix-features-02 { border-top: 1px solid #d7d7d7; border-bottom: 0; } /*-- /* 19 - Innovative CSS /*----------------------------------------*/ .innovative-content-wrap { padding-top: 50px; } @media only screen and (max-width: 991px) { .innovative-content-wrap { padding-top: 30px; } } .innovative-experience { background: #fc653c; padding: 50px 51px 70px; margin-top: 30px; position: relative; overflow: hidden; z-index: 1; } .innovative-experience::before { content: ""; position: absolute; right: -47%; bottom: -37%; background: #fc7550; border-radius: 50%; width: 360px; height: 360px; z-index: -1; } .innovative-experience .experience { display: flex; align-items: center; } .innovative-experience .experience .number { height: 110px; width: 110px; line-height: 110px; text-align: center; border-radius: 50%; font-size: 48px; color: #fc653c; background: #ffffff; } .innovative-experience .experience .text { flex: 1; font-size: 22px; line-height: 36px; font-family: "Jura", sans-serif; font-weight: 700; text-transform: uppercase1; color: #ffffff; margin-left: 20px; } .innovative-experience .experience-content { border-top: 1px solid #ffffff; margin-top: 25px; padding-top: 35px; } .innovative-experience .experience-content p { font-size: 16px; line-height: 30px; color: #ffffff; } .innovative-experience .experience-content .link-btn { margin-top: 20px; color: #ffffff; } .innovative-experience .experience-content .link-btn:hover { color: #0a0c1c; } .innovative-experience .experience-content .link-btn .link-icon { background: #0a0c1c; } .innovative-experience .experience-content .link-btn .link-icon img { filter: brightness(0) invert(1); } @media only screen and (max-width: 1199px) { .innovative-experience { padding: 40px 35px 50px; } .innovative-experience .experience .number { height: 95px; width: 95px; line-height: 95px; font-size: 42px; } .innovative-experience .experience .text { flex: 1; font-size: 24px; line-height: 36px; font-family: "Jura", sans-serif; font-weight: 700; text-transform: uppercase1; color: #ffffff; margin-left: 20px; } .innovative-experience .experience-content { margin-top: 20px; padding-top: 30px; } } .innovative-item { margin-top: 30px; } .innovative-item .innovative-img a { position: relative; overflow: hidden; display: block; z-index: 1; } .innovative-item .innovative-img a::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(10, 12, 28, 0.4); width: 100%; height: 100%; } .innovative-item .innovative-img a img { width: 100%; } .innovative-item .innovative-content { padding-right: 40px; } @media only screen and (max-width: 575px) { .innovative-item .innovative-content { padding-right: 0; } } .innovative-item .innovative-content .title2 { font-size: 21px; line-height: 40px; text-transform: uppercase1; color: #0a0c1c; margin-top: 35px; } .innovative-item .innovative-content .title2:hover a { color: #fc653c; } .innovative-item .innovative-content p { margin-top: 20px; } /*-- /* 20. - Page Banner CSS /*----------------------------------------*/ .corpix-banner-section { padding-top: 0px; min-height: 400px; background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; overflow: hidden; z-index: 1; } .corpix-banner-section::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(17, 56, 100, 0.5); width: 100%; height: 100%; z-index: -1; } .corpix-banner-section .shape-1 { width: 970px; height: 970px; border: 3px solid #ffa800; border-radius: 50%; position: absolute; top: -85%; left: -16%; z-index: -1; } .corpix-banner-section .shape-2 { width: 970px; height: 970px; border: 3px solid #ffa800; border-radius: 50%; position: absolute; top: -77%; left: -21%; z-index: -1; } .corpix-banner-section .shape-3 { width: 590px; height: 590px; background: #ffa800; border-radius: 50%; position: absolute; right: -8%; bottom: -49%; z-index: -1; } .corpix-banner-section .shape-4 { width: 590px; height: 590px; border: 3px solid #ffffff; border-radius: 50%; position: absolute; right: -7.5%; bottom: -38%; z-index: -1; } .corpix-banner-section .page-banner-content .title { font-size: 40px; line-height: 1.25; color: #ffffff; text-transform: uppercase1; position: relative; z-index: 1; } .corpix-banner-section .page-banner-content .breadcrumb { margin-bottom: 0; margin-top: 10px; } .corpix-banner-section .page-banner-content .breadcrumb .breadcrumb-item { font-size: 18px; line-height: 30px; font-family: "Jura", sans-serif; font-weight: 700; text-transform: uppercase1; color: #ffffff; } .corpix-banner-section .page-banner-content .breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/"; font-size: 18px; padding-right: 8px; color: #ffffff; } .corpix-banner-section .page-banner-content .breadcrumb .breadcrumb-item.active { color: #ffa800; } @media only screen and (max-width: 1199px) { .corpix-banner-section { min-height: 520px; } .corpix-banner-section .shape-1 { width: 650px; height: 650px; } .corpix-banner-section .shape-2 { width: 650px; height: 650px; } .corpix-banner-section .shape-3 { width: 450px; height: 450px; } .corpix-banner-section .shape-4 { width: 450px; height: 450px; } .corpix-banner-section .page-banner-content .title { font-size: 48px; } } @media only screen and (max-width: 991px) { .corpix-banner-section { min-height: 450px; } .corpix-banner-section .shape-1 { width: 550px; height: 550px; } .corpix-banner-section .shape-2 { width: 550px; height: 550px; } .corpix-banner-section .shape-3 { width: 350px; height: 350px; } .corpix-banner-section .shape-4 { width: 350px; height: 350px; bottom: -40%; } .corpix-banner-section .page-banner-content .title { font-size: 48px; } } @media only screen and (max-width: 767px) { .corpix-banner-section { min-height: 350px; } .corpix-banner-section .page-banner-content .title { font-size: 30px; } .corpix-banner-section .page-banner-content .breadcrumb .breadcrumb-item { font-size: 16px; } .corpix-banner-section .page-banner-content .breadcrumb .breadcrumb-item + .breadcrumb-item::before { font-size: 16px; } } @media only screen and (max-width: 575px) { .corpix-banner-section .shape-1 { display: none; } .corpix-banner-section .shape-2 { display: none; } .corpix-banner-section .shape-3 { display: none; } .corpix-banner-section .shape-4 { display: none; } } /*-- /* 21 - Service Single CSS /*----------------------------------------*/ .service-single-content { padding-right: 60px; } .service-single-content .service-single-img img { width: 100%; } .service-single-content .lower-content .service-single-title { background: #ffffff; max-width: 635px; padding: 50px 150px 20px 0; margin-top: -270px; position: relative; z-index: 5; } .service-single-content .lower-content .text { font-size: 16px; line-height: 30px; margin-top: 40px; } .service-single-content .lower-content .service-inner-text { margin-top: 40px; } .service-single-content .lower-content .service-inner-text .inner-title { font-size: 36px; line-height: 48px; text-transform: uppercase1; color: #0a0c1c; } .service-single-content .lower-content .service-inner-text p { font-size: 16px; line-height: 30px; margin-top: 20px; } .service-single-content .lower-content .service-inner-text .service-img-list-wrap { display: flex; align-items: center; margin-top: 40px; } .service-single-content .lower-content .service-inner-text .service-img-list-wrap .service-img { position: relative; } .service-single-content .lower-content .service-inner-text .service-img-list-wrap .service-img::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(17, 56, 100, 0.4); width: 100%; height: 100%; } .service-single-content .lower-content .service-inner-text .service-img-list-wrap .service-list { flex: 1; margin-left: 30px; } .service-single-content .lower-content .service-inner-text .service-img-list-wrap .service-list ul li { font-size: 18px; line-height: 36px; font-family: "Jura", sans-serif; font-weight: 700; color: #0a0c1c; } .service-single-content .lower-content .service-inner-text .service-img-list-wrap .service-list ul li i { font-size: 16px; color: #ffa800; margin-right: 15px; } .service-single-content .lower-content .service-inner-text .service-faq { margin-top: 50px; } @media only screen and (max-width: 991px) { .service-sidebar { margin-top: 60px; } } .service-sidebar .service-widget .service-category-list { border: 1px solid #e5e5e5; } .service-sidebar .service-widget .service-category-list ul li { padding: 20px 30px; position: relative; } .service-sidebar .service-widget .service-category-list ul li::before { content: ""; position: absolute; right: 0; top: 0; background: #ffa800; width: 3px; height: 100%; opacity: 0; visibility: hidden; transition: all 0.3s linear; } .service-sidebar .service-widget .service-category-list ul li + li { border-top: 1px solid #e5e5e5; } .service-sidebar .service-widget .service-category-list ul li a { font-size: 20px; line-height: 30px; font-family: "Jura", sans-serif; text-transform: uppercase1; font-weight: 700; color: #0a0c1c; } .service-sidebar .service-widget .service-category-list ul li a i { color: #ffa800; margin-left: 10px; opacity: 0; visibility: hidden; transition: all 0.3s linear; } .service-sidebar .service-widget .service-category-list ul li.active, .service-sidebar .service-widget .service-category-list ul li:hover { background: #f0f1f4; } .service-sidebar .service-widget .service-category-list ul li.active::before, .service-sidebar .service-widget .service-category-list ul li:hover::before { opacity: 1; visibility: visible; } .service-sidebar .service-widget .service-category-list ul li.active a, .service-sidebar .service-widget .service-category-list ul li:hover a { color: #ffa800; } .service-sidebar .service-widget .service-category-list ul li.active a i, .service-sidebar .service-widget .service-category-list ul li:hover a i { margin-left: 20px; opacity: 1; visibility: visible; } .service-sidebar .service-widget .service-cta { background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; z-index: 1; } .service-sidebar .service-widget .service-cta::before { content: ""; position: absolute; left: 0; top: 0; background: rgba(17, 56, 100, 0.7); width: 100%; height: 100%; z-index: -1; } .service-sidebar .service-widget .service-cta .service-cta-content { padding: 45px 50px 55px; } @media only screen and (max-width: 1199px) { .service-sidebar .service-widget .service-cta .service-cta-content { padding: 45px 35px 55px; } } .service-sidebar .service-widget .service-cta .service-cta-content .sub-title { font-size: 24px; line-height: 36px; text-transform: uppercase1; color: #ffffff; } .service-sidebar .service-widget .service-cta .service-cta-content .title { font-size: 36px; line-height: 48px; text-transform: uppercase1; color: #ffffff; } @media only screen and (max-width: 767px) { .service-sidebar .service-widget .service-cta .service-cta-content .title { font-size: 35px; line-height: 46px; } } .service-sidebar .service-widget .service-cta .service-cta-content .service-number-wrap { display: flex; align-items: center; justify-content: center; margin-top: 15px; } .service-sidebar .service-widget .service-cta .service-cta-content .service-number-wrap .number-icon { width: 60px; height: 60px; line-height: 60px; text-align: center; background: #ffa800; border-radius: 50%; } .service-sidebar .service-widget .service-cta .service-cta-content .service-number-wrap .number-text { margin-left: 10px; } .service-sidebar .service-widget .service-cta .service-cta-content .service-number-wrap .number-text .number { font-size: 30px; line-height: 1; color: #ffffff; } .service-sidebar .service-widget .service-cta .service-cta-content .service-cta-btn { border-top: 1px solid #5c6f84; margin-top: 50px; padding-top: 40px; } .service-sidebar .service-widget .service-cta .service-cta-content .service-cta-btn .btn-text { font-size: 24px; line-height: 36px; text-transform: uppercase1; color: #ffffff; } .service-sidebar .service-widget .service-cta .service-cta-content .service-cta-btn .btn { font-size: 16px; text-transform: uppercase1; margin-top: 15px; } .service-sidebar .service-widget:last-child { margin-top: 75px; } @media only screen and (max-width: 1199px) { .service-single-content { padding-right: 40px; } .service-single-content .lower-content .service-single-title { max-width: 540px; margin-top: -235px; } } @media only screen and (max-width: 991px) { .service-single-content { padding-right: 0px; } .service-single-content .lower-content .service-single-title { max-width: 540px; margin-top: -235px; } } @media only screen and (max-width: 767px) { .service-single-content .lower-content .service-single-title { max-width: 470px; margin-top: -205px; } .service-single-content .lower-content .service-inner-text .inner-title { font-size: 30px; line-height: 40px; } .service-single-content .lower-content .service-inner-text .service-img-list-wrap .service-list { margin-left: 20px; } .service-single-content .lower-content .service-inner-text .service-img-list-wrap .service-list ul li i { margin-right: 10px; } } @media only screen and (max-width: 575px) { .service-single-content .lower-content .service-single-title { padding: 0; padding-top: 20px; margin-top: 0px; } .service-single-content .lower-content .text { margin-top: 20px; } .service-single-content .lower-content .service-inner-text .inner-title { font-size: 26px; } .service-single-content .lower-content .service-inner-text .service-img-list-wrap { display: block; } .service-single-content .lower-content .service-inner-text .service-img-list-wrap .service-img { display: inline-block; } .service-single-content .lower-content .service-inner-text .service-img-list-wrap .service-list { margin-left: 0px; margin-top: 20px; } } /*-- /* 22 - Blog Standard CSS /*----------------------------------------*/ .blog-standard-section .blog-standard-wrap { margin-top: -60px; } .blog-standard-section .blog-standard-wrap .blog-post-wrap .single-blog { margin-top: 60px; } .blog-standard-section .blog-standard-wrap .blog-post-wrap .single-blog .blog-content { max-width: 505px; } .blog-standard-section .blog-standard-wrap .blog-post-wrap .single-blog .blog-content .title { font-size: 24px; line-height: 34px; text-transform: uppercase1; } .blog-sidebar { position: sticky; top: 0; margin-left: 40px; } @media only screen and (max-width: 1199px) { .blog-sidebar { margin-left: 20px; } } @media only screen and (max-width: 991px) { .blog-sidebar { margin-left: 0px; } } .sidebar-widget { margin-top: 60px; } .sidebar-widget .search-form { position: relative; } .sidebar-widget .search-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { width: 100%; height: 60px; margin-bottom: 0; border: 0; padding: 10px 25px; padding-right: 35px; border-radius: 0; border-left: 8px solid #ffa800; background: #0a0c1c; color: #797e82; font-size: 18px; font-family: "Jura", sans-serif; font-weight: 600; outline: none; overflow: hidden; } .sidebar-widget .search-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])::-webkit-input-placeholder { opacity: 0.95; font-size: 18px; font-family: "Jura", sans-serif; font-weight: 700; color: #797e82; font-weight: 400; } .sidebar-widget .search-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):-moz-placeholder { opacity: 0.95; font-size: 18px; font-family: "Jura", sans-serif; font-weight: 700; color: #797e82; font-weight: 400; } .sidebar-widget .search-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])::-moz-placeholder { opacity: 0.95; font-size: 18px; font-family: "Jura", sans-serif; font-weight: 700; color: #797e82; font-weight: 400; } .sidebar-widget .search-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):-ms-input-placeholder { opacity: 0.95; font-size: 18px; font-family: "Jura", sans-serif; font-weight: 700; color: #797e82; font-weight: 400; } .sidebar-widget .search-form button { position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 60px; height: 60px; background: transparent; border: 0; border-radius: 0px; font-size: 18px; color: #ffffff; transition: all 0.3s linear; } .sidebar-widget .search-form button:hover { color: #ffa800; } .sidebar-widget { border: 1px solid #ebebeb; } .sidebar-widget .widget-title { background: #f4f5f8; padding: 15px 40px 20px; } .sidebar-widget .widget-title .title { font-size: 24px; font-family: "Jura", sans-serif; font-weight: 700; color: #0a0c1c; display: inline-block; } .sidebar-widget .recent-posts { padding: 40px; padding-right: 60px; } @media only screen and (max-width: 1199px) { .sidebar-widget .recent-posts { padding: 27px; } } .sidebar-widget .recent-posts ul li { margin-top: 30px; } .sidebar-widget .recent-posts ul li:first-child { margin-top: 0; } .sidebar-widget .recent-posts ul li .post-link { display: flex; align-items: center; } .sidebar-widget .recent-posts ul li .post-link .post-thumb { margin-right: 20px; } .sidebar-widget .recent-posts ul li .post-link .post-thumb img { min-width: 60px; height: 60px; image-rendering: crisp-edges; } .sidebar-widget .recent-posts ul li .post-link .post-text .title { font-size: 18px; line-height: 22px; font-family: "Jura", sans-serif; font-weight: 700; color: #0a0c1c; transition: all 0.3s linear; } .sidebar-widget .recent-posts ul li .post-link .post-text .post-meta { font-size: 12px; font-family: "Jura", sans-serif; font-weight: 700; line-height: 18px; color: #959ba0; display: inline-block; margin-top: 5px; } .sidebar-widget .recent-posts ul li .post-link .post-text .post-meta i { color: #ffa800; margin-right: 5px; } .sidebar-widget .recent-posts ul li .post-link:hover .post-text .title { color: #ffa800; } .sidebar-widget .category { padding: 40px; } @media only screen and (max-width: 1199px) { .sidebar-widget .category { padding: 27px; } } .sidebar-widget .category .cate-item { margin-top: 15px; } .sidebar-widget .category .cate-item:first-child { margin-top: 0; } .sidebar-widget .category .cate-item a { display: flex; font-size: 14px; font-family: "Jura", sans-serif; font-weight: 700; color: #848484; transition: all 0.3s linear; } .sidebar-widget .category .cate-item a i { font-size: 10px; line-height: 24px; color: #ffa800; margin-right: 15px; } .sidebar-widget .category .cate-item a .post-count { margin-left: auto; align-items: flex-start; height: 20px; line-height: 18px; min-width: 20px; padding: 1px 3px 0; color: #29303c; font-size: 12px; font-family: "Jura", sans-serif; font-weight: 700; background-color: #f4f5f8; border-radius: 50%; text-align: center; } .sidebar-widget .category .cate-item a:hover { color: #ffa800; } .corpix-pagination .pagination { margin-top: 90px; } @media only screen and (max-width: 575px) { .corpix-pagination .pagination { margin-top: 60px; } } .corpix-pagination .pagination .page-item { margin: 0 5px; } .corpix-pagination .pagination .page-item.active .page-link { background-color: #ffa800; border-color: #ffa800; } .corpix-pagination .pagination .page-item .page-link { width: 45px; height: 45px; padding: 0; line-height: 40px; font-size: 18px; text-align: center; color: #333333; border: 2px solid #dddddd; border-radius: 0; cursor: pointer; transition: all 0.3s linear; } .corpix-pagination .pagination .page-item .page-link:focus { box-shadow: none; } .corpix-pagination .pagination .page-item .page-link:hover { background: #ffa800; border-color: #ffa800; } .corpix-pagination .pagination .page-item .page-link i { line-height: 32px; font-size: 12px; } /*-- /* 23 - Blog Details CSS /*----------------------------------------*/ .blog-details-section .blog-details-wrap { margin-top: -70px; } .blog-details-post .single-blog { margin-top: 60px; background: none; box-shadow: none; } .blog-details-post .single-blog .blog-img { position: relative; overflow: hidden; } .blog-details-post .single-blog .blog-img img { width: 100%; } .blog-details-post .single-blog .blog-img .top-meta { position: absolute; top: 35px; left: 30px; } .blog-details-post .single-blog .blog-img .top-meta .date { width: 65px; height: 65px; text-align: center; background: #ffa800; color: #0a0c1c; font-size: 14px; font-family: "Jura", sans-serif; font-weight: 700; display: inline-block; text-align: center; position: relative; z-index: 1; padding: 12px; } .blog-details-post .single-blog .blog-img .top-meta .date span { font-size: 28px; font-weight: 500; line-height: 22px; display: block; } .blog-details-post .single-blog .blog-content { padding-top: 15px; padding-left: 0; margin-top: 0; } .blog-details-post .single-blog .blog-content .blog-meta p { margin-left: 0; margin-right: 15px; } .blog-details-post .single-blog .blog-content .title { font-size: 36px; line-height: 48px; text-transform: uppercase1; color: #0a0c1c; margin-top: 10px; } @media only screen and (max-width: 767px) { .blog-details-post .single-blog .blog-content .title { font-size: 30px; line-height: 42px; } } .blog-details-post .single-blog .blog-content p { font-size: 16px; line-height: 30px; margin-top: 30px; } .blog-details-post .blog-details-content .blog-quote { background-color: #f4f5f8; padding: 30px 20px; padding-right: 95px; position: relative; } @media only screen and (max-width: 1199px) { .blog-details-post .blog-details-content .blog-quote { padding-right: 45px; } } .blog-details-post .blog-details-content .blog-quote::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #ffa800; width: 5px; height: 100%; } @media only screen and (max-width: 575px) { .blog-details-post .blog-details-content .blog-quote::after { display: none; } } .blog-details-post .blog-details-content .blog-quote .blockquote { padding-left: 50px; margin-left: 20px; margin-bottom: 0; position: relative; } @media only screen and (max-width: 575px) { .blog-details-post .blog-details-content .blog-quote .blockquote { padding-right: 0; margin-left: 0; } } .blog-details-post .blog-details-content .blog-quote .blockquote::before { content: '\f137'; font-family: flaticon !important; font-size: 30px; line-height: 1; margin-right: 5px; position: absolute; top: 5px; left: 0; color: #ffa800; } .blog-details-post .blog-details-content .blog-quote .blockquote:not(:first-child) { margin-top: 25px; } .blog-details-post .blog-details-content .blog-quote .blockquote:not(:last-child) { margin-bottom: 25px; } .blog-details-post .blog-details-content .blog-quote .blockquote p { display: inline; font-size: 18px; font-family: "Jura", sans-serif; color: #0a0c1c; line-height: 36px; font-weight: 700; margin-top: 0; } .blog-details-post .blog-details-content .blog-details-text p { font-size: 16px; line-height: 30px; margin-top: 45px; } .blog-details-post .blog-details-content .blog-details-tag-share { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: 20px; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-tag { padding-top: 20px; margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-tag .label { font-size: 16px; line-height: 30px; font-family: "Jura", sans-serif; font-weight: 700; color: #0a0c1c; text-transform: uppercase1; margin-right: 10px; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-tag .label i { color: #ffa800; margin-right: 5px; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-tag .sidebar-tag li { display: inline-block; margin-right: 4px; margin-bottom: 0; margin-bottom: 0px; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-tag .sidebar-tag li a { display: inline-block; border-radius: 0px; padding: 6px 15px; font-size: 14px; line-height: 16px; font-weight: 600; color: #0a0c1c; border: 1px solid #ebebeb; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-tag .sidebar-tag li a:hover { background: #ffa800; color: #0a0c1c; border-color: #ffa800; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-share { display: flex; align-items: center; padding-top: 20px; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-share li { display: inline-block; margin-right: 5px; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-share li:last-child { margin-right: 0; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-share li a { display: inline-block; font-size: 13px; width: 30px; height: 30px; line-height: 30px; text-align: center; color: #ffffff; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-share li a.share-twitter { background: #56adf1; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-share li a.share-facebook { background: #0378b8; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-share li a.share-google { background: #e4131e; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-share li a.share-linkedin { background: #0042eb; } .blog-details-post .blog-details-content .blog-details-tag-share .blog-details-share li a:hover { opacity: 0.9; } .blog-details-post .blog-details-content .comment-wrap .comment-box { border-top: 1px solid #e1e1e1; margin-top: 50px; padding-top: 50px; } .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-title { font-size: 24px; line-height: 30px; text-transform: uppercase1; color: #0a0c1c; } .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-items li .single-comment { display: flex; padding: 30px 0; } @media only screen and (max-width: 575px) { .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-items li .single-comment { display: block; } } .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-items li .single-comment .comment-author { flex-shrink: 0; } .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-items li .single-comment .comment-author img { width: 75px; border-radius: 50%; } .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-items li .single-comment .comment-content { flex-grow: 1; padding-left: 30px; } @media only screen and (max-width: 575px) { .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-items li .single-comment .comment-content { padding-left: 0; padding-top: 25px; } } .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-items li .single-comment .comment-content .name { font-size: 16px; font-family: "Jura", sans-serif; font-weight: 700; color: #0a0c1c; } .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-items li .single-comment .comment-content p { font-size: 14px; line-height: 24px; margin-top: 5px; } .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-items li .single-comment .comment-content .meta { margin-top: 10px; font-size: 13px; font-weight: 400; } .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-items li .single-comment .comment-content .meta .reply { color: #ffa800; } .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-items li .single-comment .comment-content .meta .reply:hover { color: #0a0c1c; } .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-items li .comment-reply { padding-left: 105px; } @media only screen and (max-width: 767px) { .blog-details-post .blog-details-content .comment-wrap .comment-box .comment-items li .comment-reply { padding-left: 0; } } .blog-details-post .blog-details-content .comment-wrap .comment-form { border-top: 1px solid #e1e1e1; margin-top: 40px; padding-top: 50px; margin-top: 50px; } .blog-details-post .blog-details-content .comment-wrap .comment-form .comment-title { font-size: 24px; line-height: 30px; text-transform: uppercase1; color: #0a0c1c; } .blog-details-post .blog-details-content .comment-wrap .comment-form p { font-size: 14px; line-height: 30px; } .blog-details-post .blog-details-content .comment-wrap .comment-form .comment-form-wrap .single-form { margin-top: 30px; } .blog-details-post .blog-details-content .comment-wrap .comment-form .comment-form-wrap .single-form .form-control { border: 1px solid transparent; background: #f6f7f9; border-radius: 0; } .blog-details-post .blog-details-content .comment-wrap .comment-form .comment-form-wrap .single-form .form-control::-webkit-input-placeholder { opacity: 0.95; font-size: 13px; font-weight: 400; color: #636363; } .blog-details-post .blog-details-content .comment-wrap .comment-form .comment-form-wrap .single-form .form-control:-moz-placeholder { opacity: 0.95; font-size: 13px; font-weight: 400; color: #636363; } .blog-details-post .blog-details-content .comment-wrap .comment-form .comment-form-wrap .single-form .form-control::-moz-placeholder { opacity: 0.95; font-size: 13px; font-weight: 400; color: #636363; } .blog-details-post .blog-details-content .comment-wrap .comment-form .comment-form-wrap .single-form .form-control:-ms-input-placeholder { opacity: 0.95; font-size: 13px; font-weight: 400; color: #636363; } .blog-details-post .blog-details-content .comment-wrap .comment-form .comment-form-wrap .single-form .form-control:focus { outline: none; border-color: #ffa800; } .blog-details-post .blog-details-content .comment-wrap .comment-form .comment-form-wrap .single-form textarea.form-control { height: 105px; padding-top: 15px; font-size: 13px; color: #415674; font-weight: 600; padding: 10px 25px; resize: none; } .blog-details-post .blog-details-content .comment-wrap .comment-form .comment-form-wrap .single-form textarea.form-control:focus { outline: none; box-shadow: none; } .blog-details-post .blog-details-content .comment-wrap .comment-form .comment-form-wrap .form-btn .btn { height: 50px; line-height: 48px; margin-top: 35px; font-size: 16px; font-family: "Jura", sans-serif; font-weight: 700; text-transform: uppercase1; padding: 0 25px; transition: all 0.3s linear; } .blog-details-post .blog-details-content .comment-wrap .comment-form .comment-form-wrap .form-btn .btn:hover { background: #0a0c1c; color: #ffa800; } /*-- /* 24 - Login Register CSS /*----------------------------------------*/ .login-register-section .login-register-wrap { margin-top: -50px; } .login-register-section .login-register-wrap .section-title .title { font-size: 36px; font-family: "Jura", sans-serif; font-weight: 700; color: #0a0c1c; line-height: 1.2; margin-top: -8px; } .login-register-section .login-register-wrap .login-register-box { border: 1px solid #ebebeb; padding: 40px; border-radius: 10px; margin-top: 50px; } .login-register-section .login-register-wrap .login-register-box .login-register-form .single-form { margin-top: 20px; } .login-register-section .login-register-wrap .login-register-box .login-register-form .single-form .form-control { border: 1px solid transparent; background: #f6f7f9; border-radius: 0; } .login-register-section .login-register-wrap .login-register-box .login-register-form .single-form .form-control::-webkit-input-placeholder { opacity: 0.95; font-size: 14px; font-family: "Open Sans", sans-serif; color: #545454; font-weight: 400; } .login-register-section .login-register-wrap .login-register-box .login-register-form .single-form .form-control:-moz-placeholder { opacity: 0.95; font-size: 14px; font-family: "Open Sans", sans-serif; color: #545454; font-weight: 400; } .login-register-section .login-register-wrap .login-register-box .login-register-form .single-form .form-control::-moz-placeholder { opacity: 0.95; font-size: 14px; font-family: "Open Sans", sans-serif; color: #545454; font-weight: 400; } .login-register-section .login-register-wrap .login-register-box .login-register-form .single-form .form-control:-ms-input-placeholder { opacity: 0.95; font-size: 14px; font-family: "Open Sans", sans-serif; color: #545454; font-weight: 400; } .login-register-section .login-register-wrap .login-register-box .login-register-form .single-form .form-control:focus { outline: none; border-color: #ffa800; box-shadow: none; } .login-register-section .login-register-wrap .login-register-box .login-register-form .single-form .form-check-input { margin-right: 8px; margin-top: 5px; } .login-register-section .login-register-wrap .login-register-box .login-register-form .single-form .form-check-input:focus { box-shadow: none; } .login-register-section .login-register-wrap .login-register-box .login-register-form .single-form .form-check-label { display: inline; font-size: 15px; line-height: 22px; margin-bottom: 0; text-transform: none; } .login-register-section .login-register-wrap .login-register-box .login-register-form .form-btn { margin-top: 30px; } .login-register-section .login-register-wrap .login-register-box .login-register-form .form-btn .btn { height: 50px; text-transform: uppercase1; line-height: 45px; } .login-register-section .login-register-wrap .login-register-box .login-register-form .form-btn .btn:hover { background: #0a0c1c; color: #ffa800; } /*-- /* 25 - Contact CSS /*----------------------------------------*/ .contact-info-section .single-info { border: 1px solid #e1e1e1; padding: 15px 40px 40px; } @media only screen and (max-width: 1399px) { .contact-info-section .single-info { padding: 15px 20px 40px; } } .contact-info-section .single-info .info-icon { font-size: 36px; color: #ffa800; } .contact-info-section .single-info .info-content .title { font-size: 14px; line-height: 30px; color: #0a0c1c; } .contact-info-section .single-info .info-content p { font-size: 20px; line-height: 30px; font-family: "Jura", sans-serif; font-weight: 700; color: #66676d; } @media only screen and (max-width: 1199px) { .contact-info-section .section-title { text-align: center; padding-bottom: 20px; } .contact-info-section .single-info { margin-top: 30px; } } .contact-form-section .contact-wrap { background: #f3f4f7; padding: 60px 110px 95px; margin-bottom: -120px; position: relative; z-index: 5; } @media only screen and (max-width: 767px) { .contact-form-section .contact-wrap { padding: 60px 70px 75px; } } @media only screen and (max-width: 575px) { .contact-form-section .contact-wrap { padding: 50px 35px 75px; } } .contact-form-section .contact-wrap .contact-form-wrap { padding-top: 30px; } .contact-form-section .contact-wrap .contact-form-wrap .single-form { margin-top: 20px; } .contact-form-section .contact-wrap .contact-form-wrap .single-form .form-control { border: 1px solid transparent; height: 50px; padding: 10px 25px; background: #ffffff; color: #415674; border-radius: 0; } .contact-form-section .contact-wrap .contact-form-wrap .single-form .form-control::-webkit-input-placeholder { opacity: 0.95; font-size: 14px; color: #545454; font-weight: 400; } .contact-form-section .contact-wrap .contact-form-wrap .single-form .form-control:-moz-placeholder { opacity: 0.95; font-size: 14px; color: #545454; font-weight: 400; } .contact-form-section .contact-wrap .contact-form-wrap .single-form .form-control::-moz-placeholder { opacity: 0.95; font-size: 14px; color: #545454; font-weight: 400; } .contact-form-section .contact-wrap .contact-form-wrap .single-form .form-control:-ms-input-placeholder { opacity: 0.95; font-size: 14px; color: #545454; font-weight: 400; } .contact-form-section .contact-wrap .contact-form-wrap .single-form .form-control:focus { outline: none; box-shadow: none; border-color: #ffa800; } .contact-form-section .contact-wrap .contact-form-wrap .single-form textarea.form-control { height: 135px; color: #415674; font-size: 14px; font-weight: 700; padding: 10px 25px; padding-top: 15px; resize: none; } .contact-form-section .contact-wrap .contact-form-wrap .single-form textarea.form-control:focus { outline: none; box-shadow: none; } .contact-form-section .contact-wrap .contact-form-wrap .form-btn .btn { height: 50px; line-height: 48px; font-size: 16px; padding: 0 30px; color: #0a0c1c; text-transform: uppercase1; margin-top: 30px; } .contact-form-section .contact-wrap .contact-form-wrap .form-btn .btn:hover { background: #0a0c1c; border-color: transparent; color: #ffa800; } .contact-map-section .contact-map-wrap { margin-bottom: -7px; } .contact-map-section .contact-map-wrap iframe { height: 550px; width: 100%; filter: brightness(100%) contrast(100%) saturate(0%) blur(0px) hue-rotate(0deg); } @media only screen and (max-width: 767px) { .contact-map-section .contact-map-wrap iframe { height: 430px; } } /*-- /* 26 - Team Single CSS /*----------------------------------------*/ .team-profile-wrapper { display: flex; flex-wrap: wrap; } .team-profile-wrapper .team-profile { width: 70%; display: flex; flex-wrap: wrap; } .team-profile-wrapper .team-profile .profile-img img { width: 285px; height: 285px; border-radius: 50%; image-rendering: crisp-edges; } .team-profile-wrapper .team-profile .profile-content { flex: 1; padding-left: 55px; padding-right: 60px; padding-top: 15px; } @media only screen and (max-width: 1399px) { .team-profile-wrapper .team-profile .profile-content { padding-right: 35px; } } .team-profile-wrapper .team-profile .profile-content .name { font-size: 30px; line-height: 30px; text-transform: uppercase1; font-weight: 700; color: #0a0c1c; } .team-profile-wrapper .team-profile .profile-content .designation { font-size: 16px; line-height: 16px; font-weight: 500; color: #0a0c1c; display: inline-block; margin-top: 15px; } .team-profile-wrapper .team-profile .profile-content p { font-size: 16px; line-height: 30px; margin-top: 15px; } .team-profile-wrapper .team-profile-info { width: 30%; border-left: 1px solid #ddd; padding-left: 50px; padding-top: 60px; } @media only screen and (max-width: 1399px) { .team-profile-wrapper .team-profile-info { padding-left: 35px; } } .team-profile-wrapper .team-profile-info ul .team-info { font-size: 16px; line-height: 21px; margin-bottom: 20px; } .team-profile-wrapper .team-profile-info ul .team-info span { font-weight: 700; color: #000000; padding-right: 10px; } @media only screen and (max-width: 1399px) { .team-profile-wrapper .team-profile-info ul .team-info span { padding-right: 8px; } } .team-profile-wrapper .team-profile-info .profile-social-wrap { margin-top: 30px; } .team-profile-wrapper .team-profile-info .profile-social-wrap ul li { display: inline-block; margin-right: 10px; } .team-profile-wrapper .team-profile-info .profile-social-wrap ul li a { font-size: 18px; transition: all 0.3s linear; } .team-profile-wrapper .team-profile-info .profile-social-wrap ul li a.profile-twitter { color: #1DA1F2; } .team-profile-wrapper .team-profile-info .profile-social-wrap ul li a.profile-facebook { color: #4867AA; } .team-profile-wrapper .team-profile-info .profile-social-wrap ul li a.profile-instagram { color: #B23A94; } .team-profile-wrapper .team-profile-info .profile-social-wrap ul li a:hover { opacity: 0.9; } @media only screen and (max-width: 1199px) { .team-profile-wrapper .team-profile { width: 70%; } .team-profile-wrapper .team-profile .profile-img { max-width: 42%; } .team-profile-wrapper .team-profile .profile-content { padding-left: 35px; padding-right: 40px; } .team-profile-wrapper .team-profile-info { width: 30%; padding-left: 35px; } } @media only screen and (max-width: 991px) { .team-profile-wrapper .team-profile { width: 100%; } .team-profile-wrapper .team-profile .profile-img { text-align: center; max-width: 100%; width: 100%; margin-bottom: 45px; } .team-profile-wrapper .team-profile .profile-img img { width: 400px; height: 400px; } .team-profile-wrapper .team-profile .profile-content { padding-left: 0px; padding-right: 40px; } .team-profile-wrapper .team-profile-info { width: 100%; border-left: 0; padding-left: 0; padding-top: 30px; } } @media only screen and (max-width: 767px) { .team-profile-wrapper .profile-content .name { font-size: 28px; } } @media only screen and (max-width: 575px) { .team-profile-wrapper { padding-left: 0px; padding-right: 25px; } } .team-profile-description { padding-top: 115px; } @media only screen and (max-width: 991px) { .team-profile-description { padding-top: 50px; } } @media only screen and (max-width: 767px) { .team-profile-description { padding-top: 40px; } } .team-profile-description .title { font-size: 20px; line-height: 30px; text-transform: uppercase1; font-weight: 700; color: #0a0c1c; margin-bottom: 35px; } @media only screen and (max-width: 575px) { .team-profile-description .title { font-size: 20px; margin-bottom: 25px; } } .team-profile-description p { font-size: 16px; line-height: 30px; } .corpix-skill-section-05 { padding-top: 40px; padding-bottom: 120px; } @media only screen and (max-width: 1199px) { .corpix-skill-section-05 { padding-bottom: 100px; } } @media only screen and (max-width: 991px) { .corpix-skill-section-05 { padding-bottom: 80px; } } @media only screen and (max-width: 767px) { .corpix-skill-section-05 { padding-bottom: 60px; } } .corpix-skill-section-05 .title { font-size: 30px; line-height: 1; text-transform: uppercase1; color: #0a0c1c; } /*----------------------------------------*/ /* 05. Widget CSS /*----------------------------------------*/ /*-- /* 5.1 - Sidebar Widget CSS /*----------------------------------------*/ .sidebar-wrap { border-left: 1px solid #eeeeee; height: 100%; } @media only screen and (max-width: 991px), only screen and (max-width: 767px) { .sidebar-wrap { border-left: none; height: auto; padding-top: 0; } } .widget { margin-bottom: 40px; color: #707070; } .widget:last-child { margin-bottom: 0; } .widget .widget-title { border-bottom: 1px solid #eeeeee; padding-left: 20px; padding-bottom: 20px; } @media only screen and (max-width: 991px), only screen and (max-width: 767px) { .widget .widget-title { padding-left: 0; } } /*-- /* 26.1 - Footer Widget CSS /*----------------------------------------*/ .footer-section { background: #0a0c1c; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; z-index: 1; } .footer-widget-wrap { padding-top: 60px; padding-bottom: 60px; } @media only screen and (max-width: 1199px) { .footer-widget-wrap { padding-top: 60px; } } @media only screen and (max-width: 767px) { .footer-widget-wrap { padding-top: 30px; } } .footer-widget { margin-top: 40px; } .footer-widget .footer-widget-title { font-size: 20px; font-family: "Jura", sans-serif; font-weight: 700; color: #ffffff; margin-bottom: 20px; } .footer-widget .widget-info { padding-top: 30px; } .footer-widget .widget-info ul li { font-size: 16px; line-height: 20px; font-family: "Jura", sans-serif; font-weight: 700; color: #ffffff; text-decoration: underline; -webkit-text-decoration-color: #ffa800; text-decoration-color: #ffa800; margin-bottom: 15px; } .footer-widget .widget-info ul li.number { font-size: 24px; } .footer-widget .newsletter-text { font-size: 14px; font-family: "Open Sans", sans-serif; color: #c4c5c7; padding-right: 15px; } @media only screen and (max-width: 1199px) { .footer-widget .newsletter-text { padding-right: 0; } } .widget-link .link li + li { margin-top: 10px; } .widget-link .link li a { font-size: 14px; font-family: "Open Sans", sans-serif; color: #c4c5c7; transition: all 0.3s linear; } .widget-link .link li a:hover { color: #ffa800; } .widget-search .search-wrap { max-width: 360px; width: 100%; position: relative; margin-top: 30px; } .widget-search .search-wrap input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { height: 45px; background-color: #f0f0f0; color: #415674; font-weight: 400; border-radius: 0; padding: 0 35px; padding-right: 60px; font-size: 14px; } .widget-search .search-wrap input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])::-webkit-input-placeholder { opacity: 0.95; font-size: 12px; font-family: "Jura", sans-serif; color: #707070; font-weight: 700; } .widget-search .search-wrap input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):-moz-placeholder { opacity: 0.95; font-size: 12px; font-family: "Jura", sans-serif; color: #707070; font-weight: 700; } .widget-search .search-wrap input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])::-moz-placeholder { opacity: 0.95; font-size: 12px; font-family: "Jura", sans-serif; color: #707070; font-weight: 700; } .widget-search .search-wrap input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):-ms-input-placeholder { opacity: 0.95; font-size: 12px; font-family: "Jura", sans-serif; color: #707070; font-weight: 700; } .widget-search .search-wrap .input-icon { position: absolute; top: 48%; left: 10px; transform: translateY(-50%); font-size: 18px; color: #2f3038; } .widget-search .search-wrap button { width: 55px; height: 45px; line-height: 43px; background: #ffa800; border: 0; color: #1d1e27; position: absolute; right: 0; top: 0; font-size: 15px; } .footer-social .social { margin-top: 40px; } .footer-social .social li { display: inline-block; } .footer-social .social li + li { margin-left: 10px; } .footer-social .social li a { width: 35px; height: 35px; line-height: 33px; border-radius: 50%; background: #4267B2; text-align: center; font-size: 14px; color: #ffffff; } .footer-social .social li:hover > a { color: #ffa800; } .footer-section-02 .footer-widget .widget-info ul li { -webkit-text-decoration-color: #f82c47; text-decoration-color: #f82c47; } .footer-section-02 .widget-search .search-wrap button { background: #f82c47; color: #ffffff; } .footer-section-02 .footer-social .social li:hover > a { color: #f82c47; } .footer-section-02 .widget-link .link li a:hover { color: #f82c47; } .footer-section-03 .footer-widget .widget-info ul li { -webkit-text-decoration-color: #fc653c; text-decoration-color: #fc653c; } .footer-section-03 .widget-search .search-wrap button { background: #fc653c; color: #ffffff; } .footer-section-03 .footer-social .social li:hover > a { color: #fc653c; } .footer-section-03 .widget-link .link li a:hover { color: #fc653c; } .back-btn { position: fixed; bottom: 20px; right: 20px; width: 45px; height: 45px; line-height: 50px; z-index: 20; border-radius: 50%; background-color: #ffa800; border: 0; transition: all 0.3s linear; font-size: 18px; display: flex; align-items: center; justify-content: center; color: #ffffff; opacity: 0; transform: translateX(130%); } .back-btn.back-btn-02 { background: #f82c47; } .back-btn.back-btn-03 { background: #fc653c; } .back-btn:hover i { -webkit-animation: scroll-up .8s linear infinite; animation: scroll-up .8s linear infinite; } .back-btn.active { opacity: 1; transform: translateY(0); } @-webkit-keyframes scroll-up { 0% { transform: translateY(0); } 50% { transform: translateY(2px); } 100% { transform: translateY(0); } } @keyframes scroll-up { 0% { transform: translateY(0); } 50% { transform: translateY(2px); } 100% { transform: translateY(0); } } /*-- /* 26. Footer CSS /*----------------------------------------*/ .footer-copyright { border-top: 1px solid #14151e; padding: 30px 0; } .footer-copyright p { font-size: 14px; font-family: "Open Sans", sans-serif; color: #c4c5c7; } /*============================================= = 38. Gradation Process Css = =============================================*/ .linkblog { color: blue; } /* CSS link color (black) */ .linkblog:hover { color: blue ; } /* CSS link hover (blue) */ .hover-style-linkblog { position: relative; color:blue; } .hover-style-linkblog:after { -webkit-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); content: ''; position: absolute; bottom: 0; right: 100; left:0; width: 0px; height: 10px; background-color: yellow; z-index:-1; } .hover-style-linkblog:hover { color: blue; } .hover-style-linkblog:hover:after { left: 0; width: 100%; right: auto; } /*============================================= = 38. social = =============================================*/ .linkblogsoc { color: blue; } /* CSS link color (black) */ .linkblogsoc:hover { color: blue ; } /* CSS link hover (blue) */ .hover-style-linkblogsoc { font-size:16px; position: relative; color:white; } .hover-style-linkblogsoc:after { -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); content: ''; position: absolute; bottom: 0; right: 100; left:0; width: 0px; height: 25px; background-color: #efeeb8; z-index:-1; } .hover-style-linkblogsoc:hover { color: blue; font-weight:3900; } .hover-style-linkblogsoc:hover:after { left: 0; width: 105%; right: auto; }