@charset "UTF-8"; /*----------------------------------------------------------------------------------- Theme Name: Template Name – HTML5 Template Author: Theme Pure Support: basictheme@gmail.com Description: Template Name – HTML5 Template Version: 1.0 ----------------------------------------------------------------------------------- /************ TABLE OF CONTENTS *************** 01. Common CSS 02. Hero CSS 03. Slider CSS 04. About CSS 05. Features CSS 06. Services CSS 06. Services CSS 07. Portfolio CSS 08. Why CSS 09. Testimonial CSS 10. Video CSS 11. Blog CSS 12. Brand CSS 13. Contact CSS 14. Skill CSS 15. Hero CSS 16. Counter CSS 17. Faq CSS 18. Page Title CSS 19. Team CSS 00. Footer CSS **********************************************/ /* */ /*----------------------------------------*/ /* 01. Theme default CSS /*----------------------------------------*/ @import url("https://fonts.googleapis.com/css2?family=Hind:wght@400;500;600;700&family=Rubik:wght@400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Hind", sans-serif; font-size: 15px; font-weight: normal; color: #677a85; line-height: 28px; } a { text-decoration: none; } .w-img img { width: 100%; } .m-img img { max-width: 100%; } a, .btn, button, span, p, i, input, select, textarea, li, img, svg path, *::after, *::before, .transition-3, h1, h2, h3, h4, h5, h6 { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: inherit; text-decoration: none; } a, button { color: inherit; outline: none; border: none; background: transparent; } button:hover { cursor: pointer; } button:focus { outline: 0; border: 0; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } h1, h2, h3, h4, h5, h6 { font-family: "Rubik", sans-serif; color: #2c3941; margin-top: 0px; font-weight: 500; line-height: 1.2; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } h1 { font-size: 40px; } h2 { font-size: 36px; } h3 { font-size: 24px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 14px; } ul { margin: 0px; padding: 0px; } li { list-style: none; } p { font-family: "Hind", sans-serif; font-size: 15px; font-weight: normal; color: #677a85; margin-bottom: 15px; line-height: 28px; } *::-moz-selection { background: #fc8459; color: #ffffff; text-shadow: none; } ::-moz-selection { background: #fc8459; color: #ffffff; text-shadow: none; } ::selection { background: #fc8459; color: #ffffff; text-shadow: none; } /*-- - Input Placeholder -----------------------------------------*/ *::-moz-placeholder { color: #2c3941; font-size: 14px; opacity: 1; } *::placeholder { color: #2c3941; font-size: 14px; opacity: 1; } /*-- - Common Classes -----------------------------------------*/ .fix { overflow: hidden; } .clear { clear: both; } .f-left { float: left; } .f-right { float: right; } .z-index-1 { z-index: 1; } .z-index-11 { z-index: 11; } .z-index-111 { z-index: 11; } .overflow-y-visible { overflow-x: hidden; overflow-y: visible; } .p-relative { position: relative; } .p-absolute { position: absolute; } /*-- - Background color -----------------------------------------*/ .grey-bg { background: #f8f4ef; } .grey-bg-2 { background: #faf7f3; } .pink-bg { background: #fc8459; } .green-bg-2 { background: #0a4c48; } .yellow-bg { background: #fad105; } .blue-bg { background: #253597; } .white-bg { background: #ffffff; } .black-bg { background: #2c3941; } .black-bg-3 { background: #222328; } .black-bg-4 { background: #34454f; } .footer-bg { background: #000; } /*-- - color -----------------------------------------*/ .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white p, .text-white span, .text-white li, .text-white a { color: #ffffff !important; } .white-color { color: #ffffff; } .theme-color { color: #fc8459 !important; } .black-color { color: #2c3941; } .pt-235 { padding-top: 235px; } @media (max-width: 575px) { .pt-235 { padding-top: 135px; } } .pt-255 { padding-top: 255px; } .pt-340 { padding-top: 340px; } .pt-310 { padding-top: 310px; } .mb--240 { margin-bottom: -240px; } .mb--125 { margin-bottom: -125px; } .mb--215 { margin-bottom: -215px; } .ml--200 { margin-left: -200px; } .body-overlay { background-color: rgba(0, 0, 0, 0.5); height: 100%; width: 100%; position: fixed; top: 0; z-index: 99; left: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .body-overlay:hover { cursor: pointer; } .body-overlay.opened { opacity: 1; visibility: visible; } @media (max-width: 575px) { .progress-wrap { right: 15px; bottom: 15px; } } .r-btn { display: inline-block; font-size: 14px; font-weight: 600; color: #ffffff; background: #fc8459; height: 60px; line-height: 62px; text-align: center; padding: 0 38px; text-transform: uppercase; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; position: relative; z-index: 1; overflow: hidden; } .r-btn i { padding-left: 5px; } .r-btn::after { content: ""; position: absolute; top: 0; left: 0; width: 150%; height: 102%; background: #222328; z-index: -1; -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0); transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s; transition: transform 0.3s, opacity 0.3s, background-color 0.3s; } .r-btn:hover { color: #ffffff; } .r-btn:hover::after { opacity: 1; -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .r-btn:focus { color: #ffffff; } .r-btn-green { background: #24c373; } .r-btn-white { background: #ffffff; color: #fc8459; } .r-btn-white:focus { color: #fc8459; } .r-btn-yellow { background: #fad105; color: #2c3941; } .r-btn-yellow:focus { color: #2c3941; } .r-btn-yellow:hover { color: #ffffff; } .r-btn-border { border: 2px solid #15625d; color: #69cbc5; background: transparent; line-height: 58px; } .r-btn-border:hover { border-color: #222328; } .r-btn-border-2 { border: 2px solid #e7e7e7; color: #2c3941; background: transparent; line-height: 60px; } .r-btn-border-2:hover, .r-btn-border-2:focus { border-color: #ffffff; border-color: #222328; color: #ffffff; } .r-btn-border-3 { border: 2px solid rgba(255, 255, 255, 0.2); color: #ffffff; background: transparent; } .r-btn-border-3::after { background: #ffffff; } .r-btn-border-3:hover { border-color: #ffffff; background: #ffffff; color: #222328; } .r-btn-grey { background: #ded5c9; color: #222328; } .r-btn-grey::after { background: #0a4c48; } .r-btn-grey:hover { color: #ffffff; } .r-btn-plr-90 { padding-left: 90px; padding-right: 90px; } .section__title { font-size: 48px; line-height: 1.1; } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title { font-size: 40px; } } @media (max-width: 575px) { .section__title { font-size: 30px; } } .section__title-pre { position: relative; display: inline-block; font-size: 18px; font-weight: 600; color: #fc8459; padding-left: 45px; margin-bottom: 15px; } .section__title-pre::after { position: absolute; content: ""; left: 0; top: 45%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: #fc8459; width: 30px; height: 2px; } .section__title-pre.center { padding-right: 45px; } .section__title-pre.center::before { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: #fc8459; width: 30px; height: 2px; } .section__title-pre-white { color: #ffffff !important; } .section__title-pre-white::after, .section__title-pre-white::before { background: #ffffff !important; } .section__title-pre-yellow { color: #fad105 !important; } .section__title-pre-yellow::after, .section__title-pre-yellow::before { background: #fad105; } .section__title-pre-yellow.yellow::after, .section__title-pre-yellow.yellow::before { background: #fad105; } .section__title-pre-2 { color: #677a85; } .section__title-pre-2::after, .section__title-pre-2::before { background: #677a85; } .section__title-pre-2.center::before { background: #677a85; } .section__title-pre-3 { color: #677a85; } .section__title-pre-3.right { padding-right: 45px; padding-left: 0; } .section__title-pre-3.right::after { left: auto; right: 0; background: #677a85; } .section__title-pre-3::after { background: #677a85; } .section__title-pre-3.center::after, .section__title-pre-3.center::before { background: #677a85; } .section__title-pre-3.center.yellow::after, .section__title-pre-3.center.yellow::before { background: #fad105; } .section__title-white { color: #ffffff !important; } .section__title-3 { color: #2c3941; } /* link btn */ .link-btn { position: relative; font-size: 15px; font-weight: 500; color: #24c373; text-transform: uppercase; padding-right: 15px; } .link-btn i { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all ease 0.2s; -webkit-transition: all ease 0.2s; -moz-transition: all ease 0.2s; -ms-transition: all ease 0.2s; -o-transition: all ease 0.2s; } .link-btn i:first-child { left: -100%; visibility: hidden; opacity: 0; } .link-btn i:last-child { right: 0; } .link-btn:hover { color: #2c3941; } .link-btn:hover i:first-child { left: 0; visibility: visible; opacity: 1; } .link-btn:hover i:last-child { right: -100%; visibility: hidden; opacity: 0; } .link-btn-2 { position: relative; font-size: 14px; color: #24c373; font-weight: 500; padding-right: 22px; display: inline-block; text-transform: uppercase; font-family: "Rubik", sans-serif; } .link-btn-2 i { position: absolute; top: 45%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all ease 0.2s; -webkit-transition: all ease 0.2s; -moz-transition: all ease 0.2s; -ms-transition: all ease 0.2s; -o-transition: all ease 0.2s; font-size: 12px; } .link-btn-2 i:first-child { right: 10%; visibility: hidden; opacity: 0; } .link-btn-2 i:last-child { right: 0; } .link-btn-2:hover { color: #fc8459; } .link-btn-2:hover i:first-child { right: 0; visibility: visible; opacity: 1; } .link-btn-2:hover i:last-child { right: -10%; visibility: hidden; opacity: 0; } .link-btn-2.pink { color: #fc8459; } .link-btn-2.pink:hover { color: #24c373; } /* pulse btn */ .pulse-btn { display: inline-block; width: 80px; height: 80px; line-height: 84px; text-align: center; background-color: #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #fc8459; animation: pulse 2s infinite; } .pulse-btn:hover { background-color: #fc8459; color: #ffffff; } .pulse-btn i { padding-left: 2px; } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 70% { -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 70% { -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .basic-pagination ul li { display: inline-block; } .basic-pagination ul li:not(:last-child) { margin-right: 10px; } .basic-pagination ul li a { display: inline-block; width: 50px; height: 50px; line-height: 52px; text-align: center; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: 2px solid #f1f1f1; font-size: 18px; font-weight: 600; } .basic-pagination ul li a:hover, .basic-pagination ul li a.active { background: #fc8459; border-color: #fc8459; color: #ffffff; } /*----------------------------------------*/ /* 02. HEADER CSS START /*----------------------------------------*/ @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header__padding { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header__padding { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header__padding { padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header__padding { padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; } } @media (max-width: 575px) { .header__padding { padding-left: 0px; padding-right: 0px; padding-top: 20px; padding-bottom: 20px; } } .header__bottom.sticky { left: 0; margin: auto; position: fixed !important; top: 0; width: 100%; box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07); z-index: 99; -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown; animation: 300ms ease-in-out 0s normal none 1 running fadeInDown; -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1); background: #ffffff; } .header__bottom.sticky.sticky-2 { background: #222328; } .header__bottom.sticky .main-menu-2 ul li a { padding: 30px 0; } .header__bottom.sticky .main-menu-2 ul li a::after { bottom: 25px; } .header__bottom.sticky .main-menu-2 ul li .submenu li a { padding: 3px 20px; } .header__transparent { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 99; } .header__top { padding-top: 6px; padding-bottom: 6px; } .header__info ul li { display: inline-block; } .header__info ul li:not(:last-child) { margin-right: 35px; } .header__info ul li a { font-size: 15px; color: #2c3941; } .header__info ul li a i { color: #fc8459; margin-right: 5px; } .header__info-2 ul li a { color: #2c3941; } .header__info-2 ul li a i { color: #0a4c48; } .header__search input { width: 140px; height: 30px; line-height: 30px; padding: 0 15px; padding-right: 30px; font-size: 13px; border: none; outline: none; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } .header__search input::placeholder { color: #687e8b; } .header__search button { position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 10px; color: #687e8b; } .header__search-btn { font-size: 24px; color: #ffffff; display: inline-block; padding-top: 6px; } .header__search-btn:hover, .header__search-btn:focus { color: #222328; } .header__lang .nice-select { padding: 0; padding-right: 17px; height: 30px; line-height: 30px; background: transparent; border: none; color: #2c3941; } .header__lang .nice-select::after { right: 0; color: #fc8459; } .header__lang .nice-select .list { left: auto; right: 0; } .header__social ul li { display: inline-block; } .header__social ul li:not(:last-child) { margin-right: 5px; } .header__social ul li a { display: inline-block; width: 40px; height: 40px; line-height: 42px; text-align: center; background: #f8f4ef; color: #fc8459; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .header__social ul li a:hover { background: #fc8459; color: #ffffff; } .header__social-2 ul li a { color: #2c3941; } .header__social-2 ul li a:hover { background: #fad105; color: #2c3941; } .header__cart-btn { color: #2c3941; font-size: 17px; } .header__cart-btn:hover { color: #fc8459; } .header__cart-btn-2 { color: #ffffff; } .header__call-icon i { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 15px; color: #222328; background: #fad105; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .header__call-text span { font-weight: 600; text-transform: uppercase; font-size: 13px; color: #677a85; } .header__call-text h5 { font-size: 18px; margin-bottom: 0; line-height: 1; } .main-menu ul li { display: inline-block; margin: 0 19px; position: relative; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .main-menu ul li { margin: 0 15px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .main-menu ul li { margin: 0 10px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu ul li { margin: 0 10px; } } .main-menu ul li a { position: relative; display: inline-block; font-size: 17px; font-weight: 500; color: #2c3941; text-transform: capitalize; padding: 30px 0; } .main-menu ul li a::after { position: absolute; content: ""; left: auto; right: 0; bottom: 25px; width: 0; height: 2px; background: #fc8459; visibility: hidden; opacity: 0; } .main-menu ul li a i { position: relative; right: 0; top: 1px; padding-left: 3px; } .main-menu ul li:hover > a, .main-menu ul li.active > a { color: #fc8459; } .main-menu ul li:hover > a::after, .main-menu ul li.active > a::after { background: #fc8459; visibility: visible; opacity: 1; width: 100%; left: 0; right: auto; } .main-menu ul li:hover .submenu { visibility: visible; opacity: 1; top: 100%; } .main-menu ul li .submenu { position: absolute; top: 120%; left: 0; width: 200px; padding: 10px 0; background: #ffffff; -webkit-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08); -moz-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08); box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; visibility: hidden; opacity: 0; z-index: 9; } .main-menu ul li .submenu li { display: block; margin: 0; } .main-menu ul li .submenu li > a { font-size: 15px; width: 100%; display: block; padding: 3px 20px; text-transform: capitalize; color: #2c3941; font-weight: 500; position: relative; } .main-menu ul li .submenu li > a::after { display: none; } .main-menu ul li .submenu li:hover > a { color: #fc8459; } .main-menu ul li .submenu li:hover > a::before { height: 100%; bottom: auto; top: 0; } .main-menu ul li .submenu li:hover > .submenu { visibility: visible; opacity: 1; left: 100%; } .main-menu ul li .submenu li .submenu { top: 0; left: 120%; visibility: hidden; opacity: 0; } .main-menu-2 ul li { margin: 0; } .main-menu-2 ul li:not(:last-child) { margin-right: 35px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-2 ul li:not(:last-child) { margin-right: 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .main-menu-2 ul li:not(:last-child) { margin-right: 30px; } } .main-menu-2 ul li a { padding: 55px 0; color: #ffffff; } .main-menu-2 ul li a::after { background: #ffffff; bottom: 50px; } .main-menu-2 ul li:hover > a, .main-menu-2 ul li.active > a { color: #ffffff; } .main-menu-2 ul li:hover > a::after, .main-menu-2 ul li.active > a::after { background: #ffffff; } .main-menu-3 ul li { margin: 0; } .main-menu-3 ul li:not(:last-child) { margin-right: 35px; } .main-menu-3 ul li a { padding: 35px 0; } .main-menu-3 ul li a::after { bottom: 30px; } .dot-hamburger-btn { position: relative; width: 35px; height: 35px; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; } .dot-hamburger-btn span { background: #fc8459; display: block; position: absolute; height: 7px; width: 7px; -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } .dot-hamburger-btn span:nth-child(even) { left: 13px; } .dot-hamburger-btn span:nth-child(odd) { left: 0px; } .dot-hamburger-btn span:nth-child(1), .dot-hamburger-btn span:nth-child(2), .dot-hamburger-btn span:nth-child(3) { top: 0px; } .dot-hamburger-btn span:nth-child(4), .dot-hamburger-btn span:nth-child(5), .dot-hamburger-btn span:nth-child(6) { top: 13px; } .dot-hamburger-btn span:nth-child(7), .dot-hamburger-btn span:nth-child(8), .dot-hamburger-btn span:nth-child(9) { top: 26px; } .dot-hamburger-btn span:nth-child(3) { left: 26px; } .dot-hamburger-btn span:nth-child(6) { left: 26px; } .dot-hamburger-btn span:nth-child(9) { left: 26px; } .dot-hamburger-btn-2 span { background: #fad105; } .dot-hamburger-btn-3 span { background: #0a4c48; } .sidebar__area { position: fixed; right: -485px; top: 0; width: 465px; height: 100%; background: #ffffff none repeat scroll 0 0; overflow-y: scroll; -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5); -moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5); box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5); -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); z-index: 999; } @media (max-width: 575px) { .sidebar__area { width: 290px; } } .sidebar__area.sidebar-opened { right: 0px; } .sidebar__wrapper { position: relative; padding: 45px; } @media (max-width: 575px) { .sidebar__wrapper { padding: 20px; } } .sidebar__close { position: absolute; top: 48px; right: 45px; } @media (max-width: 575px) { .sidebar__close { top: 22px; right: 20px; } } .sidebar__close-btn { display: inline-block; font-size: 16px; height: 45px; width: 45px; line-height: 49px; background: #fc8459; color: #fff; border-radius: 50%; } .sidebar__close-btn:hover { background: #374853; } .sidebar__logo { padding-bottom: 20px; border-bottom: 1px solid #dedede; } .sidebar__search { position: relative; } .sidebar__search input { width: 100%; height: 40px; line-height: 40px; padding-right: 20px; background: transparent; border: none; outline: none; border-bottom: 1px solid #dedede; font-size: 14px; } .sidebar__search input::placeholder { color: #2c3941; } .sidebar__search input:focus { border-color: #394a55; } .sidebar__search button { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 14px; color: #2c3941; } .sidebar__text p { margin-bottom: 25px; } .sidebar__contact h4 { font-size: 22px; margin-bottom: 20px; } .sidebar__contact ul li:not(:last-child) { margin-bottom: 20px; } .sidebar__contact ul li:hover i { background: #24c373; color: #ffffff; border-color: #24c373; } .sidebar__contact ul li:hover a { color: #394a55; } .sidebar__contact-icon i { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border: 1px solid #dedede; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .sidebar__contact-text a { font-size: 18px; font-weight: 500; color: #687e8b; } .sidebar__map iframe { width: 100%; height: 200px; border: none; } .sidebar__social ul li { display: inline-block; } .sidebar__social ul li:not(:last-child) { margin-right: 5px; } .sidebar__social ul li a { display: inline-block; width: 40px; height: 40px; line-height: 42px; text-align: center; background: #f8f4ef; color: #24c373; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .sidebar__social ul li a:hover { background: #24c373; color: #ffffff; } .search__area { position: fixed; top: auto; bottom: 0; left: 0; width: 100%; height: 0%; background: #ffffff; z-index: 9999; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; opacity: 0; visibility: hidden; } .search__area.opened { top: 0; bottom: auto; height: 100%; opacity: 1; visibility: visible; } .search__wrapper { position: relative; } .search__input { position: relative; } .search__input input { width: 100%; height: 80px; background: transparent; outline: none; border: none; border-bottom: 2px solid rgba(44, 57, 65, 0.8); color: #2c3941; font-size: 35px; padding-right: 60px; } .search__input input::placeholder { font-size: 20px; color: #2c3941; text-transform: capitalize; } .search__input button { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #2c3941; font-size: 35px; } .search__close { position: absolute; top: -100px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .search__close .search-close-btn { font-size: 35px; color: #2c3941; } /* mean menu customize */ .mean-container a.meanmenu-reveal { display: none; } .mean-container .mean-nav { background: none; margin-top: 0; } .mean-container .mean-bar { padding: 0; min-height: auto; background: none; } .mean-container .mean-nav > ul { padding: 0; margin: 0; width: 100%; list-style-type: none; display: block !important; } .mean-container a.meanmenu-reveal { display: none !important; } .mean-container .mean-nav ul li a { width: 100%; padding: 10px 0; color: #2c3941; border-top: 1px solid #ebebeb; font-size: 14px; line-height: 1.5; font-weight: 700; } .mean-container .mean-nav ul li a:hover { color: #24c373; } .mean-container .mean-nav ul li a.mean-expand { margin-top: 5px; padding: 0 !important; line-height: 14px; border: 1px solid #ebebeb !important; height: 30px; width: 30px; color: #2c3941; line-height: 32px; top: 0; font-weight: 400; } .mean-container .mean-nav ul li a.mean-expand:hover { background: #24c373; color: #ffffff; border-color: #24c373; } .mean-container .mean-nav ul li > a > i { display: none; } .mean-container .mean-nav ul li > a.mean-expand i { display: inline-block; } .mean-container .mean-nav > ul > li:first-child > a { border-top: 0; } .mean-container .mean-nav ul li a.mean-expand.mean-clicked { color: #2c3941; } .mean-container .mean-nav ul li a.mean-expand.mean-clicked i { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); color: #2c3941; } /*----------------------------------------*/ /* 03. SLIDER CSS START /*----------------------------------------*/ @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__padding { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__padding { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__padding { padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__padding { padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; } } @media (max-width: 575px) { .slider__padding { padding-left: 0px; padding-right: 0px; padding-top: 20px; padding-bottom: 20px; } } .slider__height { min-height: 820px; background-position: center; background-repeat: no-repeat; background-size: cover; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__height { min-height: 650px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__height { min-height: 620px; } } @media (max-width: 575px) { .slider__height { min-height: 520px; } } .slider__height-2 { min-height: 815px; } .slider__overlay { position: relative; } .slider__overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(34, 35, 40, 0.7); } .slider__content { position: relative; z-index: 1; } .slider__content span { font-size: 20px; font-weight: 500; color: #ffffff; display: inline-block; padding: 0 25px; position: relative; margin-bottom: 15px; } .slider__content span::after, .slider__content span::before { position: absolute; content: ""; left: 0; top: 5px; width: 3px; height: 15px; background: #ffffff; } .slider__content span::after { left: auto; right: 0; } .slider__content-2 p { font-size: 20px; line-height: 32px; padding: 0 180px; font-family: "Rubik", sans-serif; color: #ffffff; margin-bottom: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__content-2 p { padding-left: 85px; padding-right: 85px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__content-2 p { padding-left: 45px; padding-right: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__content-2 p { padding-left: 80px; padding-right: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__content-2 p { padding-left: 0px; padding-right: 0px; } } @media (max-width: 575px) { .slider__content-2 p { padding-left: 0px; padding-right: 0px; } } .slider__title { font-size: 130px; color: #ffffff; line-height: 1; margin-bottom: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__title { font-size: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__title { font-size: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title { font-size: 60px; } } @media (max-width: 575px) { .slider__title { font-size: 37px; } } .slider__title-2 { font-size: 130px; color: #ffffff; margin-bottom: 10px; text-transform: uppercase; line-height: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__title-2 { font-size: 110px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__title-2 { font-size: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title-2 { font-size: 60px; } } @media (max-width: 575px) { .slider__title-2 { font-size: 60px; } } .slider__nav .swiper-slider-nav i { font-size: 20px; color: #ffffff; display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; background: rgba(57, 74, 85, 0.5); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .slider__nav .swiper-slider-nav i:hover { background: #ffffff; color: #2c3941; } .slider__nav .swiper-slider-nav::after { display: none; } .slider__youtube .play-btn { display: inline-block; width: 100px; height: 70px; line-height: 74px; background: #ff4328; color: #ffffff; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } @media (max-width: 575px) { .slider__btn .r-btn { margin-right: 0; } } /*----------------------------------------*/ /* 04. ABOUT CSS START /*----------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 991px) { .about__content { margin-top: 50px; padding-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about__content { margin-top: 50px; padding-left: 0; } } @media (max-width: 575px) { .about__content { margin-top: 50px; padding-left: 0; } } .about__content p { margin-bottom: 20px; } .about__content p.bold-text { font-size: 18px; font-weight: 500; color: #2c3941; margin-bottom: 20px; } .about__content-2 p { margin-bottom: 3px; } .about__content-2 .link-btn { color: #677a85; } .about__content-2 .link-btn:hover { color: #24c373; } .about__author-info h3 { font-size: 20px; margin-bottom: 0; } .about__author-info span { font-size: 14px; color: #fc8459; font-weight: 500; } .about__thumb-1 img { -webkit-clip-path: polygon(0 0, 53% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 53% 0, 100% 100%, 0% 100%); } .about__thumb-2 { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .about__thumb-2 img { width: 360px; height: 360px; border: 12px solid #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } @media (max-width: 575px) { .about__thumb-2 img { width: 160px; height: 160px; } } @media (max-width: 575px) { .about__thumb.mt-45 { margin-top: 0; } } .about__triangle { position: relative; } .about__triangle::after { position: absolute; content: ""; left: -20px; bottom: -20px; width: 208px; height: 208px; background: #24c373; -webkit-clip-path: polygon(0 1%, 0% 100%, 100% 100%); clip-path: polygon(0 1%, 0% 100%, 100% 100%); z-index: -1; } .about__item { padding: 35px; padding-top: 45px; -webkit-box-shadow: 0px 0px 15px 0px rgba(242, 242, 242, 0.9); -moz-box-shadow: 0px 0px 15px 0px rgba(242, 242, 242, 0.9); box-shadow: 0px 0px 15px 0px rgba(242, 242, 242, 0.9); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__item { padding-left: 0; padding-right: 0; } } .about__item-green { background: #0a4c48; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .about__item-green .about__icon i { color: #ffffff; } .about__item-green .about__title-2 { color: #ffffff; } .about__item-green .about__title-2 a:hover { color: #ffffff; } .about__item-green .about__content-2 p { color: #ffffff; } .about__item-green .about__content-2 .link-btn { color: #ffffff; } .about__item-green .about__content-2 .link-btn:hover { color: #ffffff; } .about__item-yellow { background: #fad105; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .about__item-yellow .about__icon i { color: #2c3941; } .about__item-yellow .about__title-2 { color: #2c3941; } .about__item-yellow .about__title-2 a:hover { color: #ffffff; } .about__item-yellow .about__content-2 p { color: #2c3941; } .about__item-yellow .about__content-2 .link-btn { color: #2c3941; } .about__item-yellow .about__content-2 .link-btn:hover { color: #ffffff; } .about__icon i { font-size: 60px; color: #0a4c48; display: inline-block; } .about__icon.yellow i { color: #fad105; } .about__title-2 { font-size: 20px; } .about__title-2 a:hover { color: #24c373; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__wrapper-2 { padding-left: 0; margin-top: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about__wrapper-2 { padding-left: 0; margin-top: 25px; } } @media (max-width: 575px) { .about__wrapper-2 { padding-left: 0; margin-top: 25px; } } .about__wrapper-2 > p { margin-bottom: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__wrapper-3 { padding-right: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__wrapper-3 { padding-bottom: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__wrapper-3 { padding-bottom: 50px; padding-top: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about__wrapper-3 { padding-bottom: 50px; padding-top: 45px; } } @media (max-width: 575px) { .about__wrapper-3 { padding-bottom: 50px; padding-top: 45px; } } .about__wrapper-3 .ab-text { color: #ffffff; margin-bottom: 20px; } .about__bg { position: absolute; left: 50%; top: 0; height: 100%; width: 92%; z-index: -1; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 0.04; } .about__features ul li:not(:last-child) { margin-bottom: 15px; } .about__features ul li:hover i { background: #ffffff; border-color: #ffffff; } .about__features-icon i { display: inline-block; width: 40px; height: 40px; text-align: center; line-height: 36px; border: 2px solid #14645f; color: #fad105; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .about__features-icon i:hover { background: #ffffff; border-color: #ffffff; } .about__features-content h5 { font-size: 18px; margin-bottom: 0; color: #ffffff; } .about__quote { font-size: 18px; padding-left: 28px; position: relative; color: #ffffff; margin-bottom: 23px; } .about__quote::after { position: absolute; content: ""; left: 0; top: 5px; width: 3px; height: 80%; background: #fad105; } .about-mt--130 { margin-top: -130px; } /*----------------------------------------*/ /* 05. FEATURES CSS START /*----------------------------------------*/ .features__area { background-position: left; background-repeat: no-repeat; background-size: cover; } @media (max-width: 575px) { .features__item { padding-right: 0; } } .features__item:hover .features__icon span { -webkit-transform: translateY(-5px) translate3d(0, -5px, 0); -moz-transform: translateY(-5px) translate3d(0, -5px, 0); -ms-transform: translateY(-5px) translate3d(0, -5px, 0); transform: translateY(-5px) translate3d(0, -5px, 0); } .features__item:not(:last-child) { margin-bottom: 35px; padding-bottom: 35px; border-bottom: 2px solid #dedede; } .features__item-2 { padding: 35px 35px; width: 270px; } .features__item-2.fea-1 { margin-left: 400px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .features__item-2.fea-1 { margin-left: 275px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .features__item-2.fea-1 { margin-left: 250px; } } @media (max-width: 575px) { .features__item-2.fea-1 { margin-left: 0px; } } .features__item-2.fea-2 { margin-left: 100px; margin-top: -85px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .features__item-2.fea-2 { margin-left: -20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .features__item-2.fea-2 { margin-top: 30px; } } @media (max-width: 575px) { .features__item-2.fea-2 { margin-top: 30px; margin-left: 0; } } .features__item-2.fea-3 { margin-top: 30px; margin-left: -45px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .features__item-2.fea-3 { margin-left: -120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features__item-2.fea-3 { margin-left: 0px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .features__item-2.fea-3 { margin-left: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .features__item-2.fea-3 { margin-left: 0px; } } @media (max-width: 575px) { .features__item-2.fea-3 { margin-left: 0px; } } .features__item-3 { padding: 50px 35px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features__item-3 { padding-right: 0; padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .features__item-3 { padding-right: 20px; padding-left: 20px; } } .features__item-3:hover .features__icon-3 span { -webkit-transform: translateY(-10px) translate3d(0, -10px, 0); -moz-transform: translateY(-10px) translate3d(0, -10px, 0); -ms-transform: translateY(-10px) translate3d(0, -10px, 0); transform: translateY(-10px) translate3d(0, -10px, 0); } .features__item-4 { width: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features__item-4 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .features__item-4 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .features__item-4 { padding-left: 20px; padding-right: 20px; } } .features__title { font-size: 24px; margin-bottom: 5px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features__title { font-size: 22px; } } .features__title-2 { margin-bottom: 0; } .features__title-3 { margin-bottom: 15px; } @media (max-width: 575px) { .features__icon { margin-bottom: 25px; } } .features__icon span { display: inline-block; width: 100px; height: 100px; line-height: 100px; text-align: center; background: #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -ms-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -o-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); } .features__icon-2 span { display: inline-block; width: 100px; height: 100px; line-height: 100px; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #ffffff; } .features__icon-3 span { display: inline-block; width: 120px; height: 120px; line-height: 120px; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #ffffff; -webkit-box-shadow: 0px 10px 60px 0px rgba(207, 199, 188, 0.47); -moz-box-shadow: 0px 10px 60px 0px rgba(207, 199, 188, 0.47); box-shadow: 0px 10px 60px 0px rgba(207, 199, 188, 0.47); backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -ms-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -o-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); } .features__content p { margin-bottom: 0; } .features__content-3 p { margin-bottom: 25px; } @media (max-width: 575px) { .features__wrapper-2 { padding-right: 0; } } .features__wrapper-2 > p { padding-right: 20px; padding-left: 30px; margin-bottom: 22px; position: relative; } .features__wrapper-2 > p::after { position: absolute; content: ""; left: 0; top: 5px; width: 3px; height: 90%; background: #fad105; } @media (max-width: 575px) { .features__wrapper-3 { padding-right: 0px; } } .features__wrapper-3 p { font-size: 18px; line-height: 32px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .features__wrapper-3 p { margin-bottom: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .features__wrapper-3 p { margin-bottom: 40px; } } @media (max-width: 575px) { .features__wrapper-3 p { margin-bottom: 40px; } } .features__wrapper-border { position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features__wrapper-border { padding-right: 0; } } .features__wrapper-border::after { position: absolute; content: ""; right: -45px; top: 0; width: 2px; height: 140px; background: #e1e1e1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .features__wrapper-border::after { right: 10px; top: 7px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features__wrapper-border::after { display: none; } } .features__list ul li:not(:last-child) { margin-bottom: 15px; } .features__list ul li i { display: inline-block; width: 45px; height: 45px; line-height: 41px; text-align: center; border: 2px solid #e8e8e8; color: #677a85; font-size: 18px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .features__list ul li p { margin-bottom: 0; } .features__list ul li:hover i { color: #ffffff; background: #0a4c48; border-color: #0a4c48; } .features__video { position: absolute; bottom: 0; right: -95px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .features__video { right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features__video { right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .features__video { right: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .features__video { display: none; } } @media (max-width: 575px) { .features__video { display: none; } } .features__video-thumb { position: relative; } .features__video-thumb::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(10, 76, 72, 0.45); } .features__video-thumb .play-btn { display: inline-block; width: 55px; height: 55px; line-height: 59px; font-size: 12px; color: #0a4c48; background: #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .features__video-thumb .play-btn i { padding-left: 3px; } .features__video-thumb .play-btn:hover { background: #0a4c48; color: #ffffff; } .features__video-triangle { position: relative; } .features__video-triangle::after { position: absolute; content: ""; right: -15px; bottom: -15px; width: 103px; height: 103px; background: #fad105; -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%); clip-path: polygon(100% 0, 0% 100%, 100% 100%); z-index: -1; } .features__shape-1 { position: absolute; top: 30%; left: 30%; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .features__shape-1 { left: 21%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .features__shape-1 { left: 11%; } } @media (max-width: 575px) { .features__shape-1 { left: 0%; width: 100%; } } .features__shape-2 { position: absolute; top: 15px; left: 10px; } .features__shape-3 { position: absolute; bottom: 5px; right: 10px; } .features__shape-4 { position: absolute; top: 0; right: 8%; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .features__shape-4 { right: 30px; } } /*----------------------------------------*/ /* 06. SERVICES CSS START /*----------------------------------------*/ .services__thumb { overflow: hidden; } .services__icon { margin-bottom: 25px; margin-top: -35px; } .services__icon i { display: inline-block; font-size: 30px; color: #ffffff; width: 70px; height: 70px; line-height: 70px; text-align: center; background: #fc8459; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -ms-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -o-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); } .services__icon-2 i { background: #0a4c48; } .services__icon-3 { margin-top: 0; margin-bottom: 28px; } .services__icon-3 i { color: #222328; background: #fad105; } .services__content { position: absolute; bottom: 0; left: 20px; right: 20px; padding: 40px 40px; padding-top: 0; background: #ffffff; -webkit-box-shadow: 0px 10px 60px 0px rgba(224, 224, 224, 0.4); -moz-box-shadow: 0px 10px 60px 0px rgba(224, 224, 224, 0.4); box-shadow: 0px 10px 60px 0px rgba(224, 224, 224, 0.4); z-index: 1; } @media (max-width: 575px) { .services__content { padding-left: 0; padding-right: 0; } } .services__content p { margin-bottom: 7px; } .services__content-3 { position: absolute; bottom: 25px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100%; text-align: center; z-index: 1; padding: 0 75px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .services__content-3 { padding-left: 50px; padding-right: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services__content-3 { padding-left: 0px; padding-right: 0px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .services__content-3 { padding-left: 20px; padding-right: 20px; } } @media (max-width: 575px) { .services__content-3 { padding-left: 20px; padding-right: 20px; } } .services__content-3 p { color: #ffffff; margin-bottom: 0; } .services__item { padding-bottom: 195px; } .services__item:hover .services__thumb img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .services__item:hover .services__icon i { -webkit-transform: translateY(-10px) translate3d(0, -10px, 0); -moz-transform: translateY(-10px) translate3d(0, -10px, 0); -ms-transform: translateY(-10px) translate3d(0, -10px, 0); transform: translateY(-10px) translate3d(0, -10px, 0); } .services__item-2:hover .services__icon i { background: #fad105; color: #222328; } .services__item-2 .link-btn-2 { color: #0a4c48; } .services__item-2 .link-btn-2:hover { color: #222328; } .services__item-3::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-image: -moz-linear-gradient(0deg, #11212d 0%, rgba(17, 33, 45, 0.5) 46%, rgba(17, 33, 45, 0) 100%); background-image: -webkit-linear-gradient(0deg, #11212d 0%, rgba(17, 33, 45, 0.5) 46%, rgba(17, 33, 45, 0) 100%); background-image: -ms-linear-gradient(0deg, #11212d 0%, rgba(17, 33, 45, 0.5) 46%, rgba(17, 33, 45, 0) 100%); background-image: linear-gradient(0deg, #11212d 0%, rgba(17, 33, 45, 0.5) 46%, rgba(17, 33, 45, 0) 100%); } .services__item-3:hover .services__thumb-3 img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .services__item-3:hover .services__icon-3 i { background: #ffffff; } .services__title { font-size: 22px; } .services__title a:hover { color: #24c373; } .services__title-3 { font-size: 22px; color: #ffffff; } .services__bg { position: absolute; left: 0; top: 0; height: 612px; width: 100%; z-index: -1; } .services__overlay { position: relative; } .services__overlay::after { position: absolute; content: ""; left: 0; top: 0; height: 612px; width: 100%; z-index: -1; background: #f8f4ef; } .services__details-title { font-size: 35px; color: #2c3941; margin-bottom: 15px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .services__details-features ul { margin-bottom: 13px; } } @media (max-width: 575px) { .services__details-features ul { margin-bottom: 13px; } } .services__details-features ul li:not(:last-child) { margin-bottom: 13px; } .services__details-features ul li:hover .icon i { background: #0a4c48; color: #ffffff; border-color: #0a4c48; } .services__details-features ul li .icon i { display: inline-block; width: 35px; height: 35px; line-height: 31px; text-align: center; color: #0a4c48; border: 2px solid #e3e3e3; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .services__details-features ul li .text h5 { font-size: 15px; font-weight: 500; font-family: "Hind", sans-serif; margin-bottom: 0; color: #0a4c48; } .services__details-text p { margin-bottom: 18px; padding-right: 5px; } .services__widget { padding: 40px 40px; border: 1px solid #eaeaea; } .services__widget-links ul li:not(:last-child) { padding-bottom: 20px; margin-bottom: 15px; border-bottom: 1px solid #eaeaea; } .services__widget-links ul li a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 18px; font-weight: 500; color: #2c3941; font-family: "Rubik", sans-serif; } .services__widget-links ul li a i { float: right; } .services__widget-links ul li a:hover { color: #0a4c48; } .services__widget-download .services-download-btn { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 500; font-family: "Rubik", sans-serif; color: #ffffff; background: #0a4c48; text-transform: uppercase; height: 66px; line-height: 66px; padding: 0 40px; padding-right: 10px; } @media (max-width: 575px) { .services__widget-download .services-download-btn { line-height: 1.1; } } .services__widget-download .services-download-btn i { display: block; width: 45px; height: 45px; line-height: 45px; text-align: center; background: #ffffff; color: #222222; } .services__widget-download .services-download-btn.yellow { background: #fad105; color: #222222; } .services__widget-social span { font-size: 15px; font-weight: 500; font-family: "Rubik", sans-serif; color: #2c3941; margin-right: 15px; } .services__widget-social ul { display: inline-block; } .services__widget-social ul li { display: inline-block; } .services__widget-social ul li:not(:last-child) { margin-right: 15px; } .services__widget-social ul li a { font-size: 15px; color: #ababab; } .services__widget-social ul li a:hover { color: #0a4c48; } @media only screen and (min-width: 768px) and (max-width: 991px) { .services__sidebar { margin-top: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .services__sidebar { margin-top: 40px; } } @media (max-width: 575px) { .services__sidebar { margin-top: 40px; } } .services__sidebar-banner { position: relative; } .services__sidebar-banner::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(44, 57, 65, 0.58); } .services__sidebar-banner-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .services__sidebar-banner-content h6 { font-size: 16px; color: #ffffff; font-weight: 500; font-family: "Rubik", sans-serif; } .services__sidebar-banner-content h4 { font-size: 40px; color: #ffffff; margin-bottom: 24px; } /*----------------------------------------*/ /* 07. portfolio CSS START /*----------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__padding { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__padding { padding-left: 20px; padding-right: 20px; } } @media (max-width: 575px) { .portfolio__padding { padding-left: 0px; padding-right: 0px; } } .portfolio__item:hover .portfolio__thumb::after { visibility: visible; opacity: 1; } .portfolio__item:hover .portfolio__plus { visibility: visible; opacity: 1; top: 30px; } @media (max-width: 575px) { .portfolio__item:hover .portfolio__plus { top: 10px; } } .portfolio__item:hover .portfolio__content { visibility: visible; opacity: 1; bottom: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__item:hover .portfolio__content { bottom: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__item:hover .portfolio__content { bottom: 20px; } } @media (max-width: 575px) { .portfolio__item:hover .portfolio__content { bottom: 10px; } } .portfolio__item-2:hover .portfolio__content-2 { visibility: visible; opacity: 1; top: 50%; } .portfolio__item-2:hover .portfolio__thumb-2::after { opacity: 1; visibility: visible; } .portfolio__item-3:hover .portfolio__content-3 { bottom: 0; visibility: visible; opacity: 1; } .portfolio__thumb { position: relative; } .portfolio__thumb::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 100%; background-image: -moz-linear-gradient(180deg, rgba(34, 35, 40, 0) 0%, #222328 100%); background-image: -webkit-linear-gradient(180deg, rgba(34, 35, 40, 0) 0%, #222328 100%); background-image: -ms-linear-gradient(180deg, rgba(34, 35, 40, 0) 0%, #222328 100%); background-image: linear-gradient(180deg, rgba(34, 35, 40, 0) 0%, #222328 100%); visibility: hidden; opacity: 0; } .portfolio__thumb-2 { position: relative; } .portfolio__thumb-2::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 100%; background: rgba(10, 76, 72, 0.75); visibility: hidden; opacity: 0; } .portfolio__content { position: absolute; bottom: 0px; left: 40px; visibility: hidden; opacity: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__content { left: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__content { left: 20px; } } @media (max-width: 575px) { .portfolio__content { left: 20px; } } .portfolio__content p { font-size: 15px; color: #ffffff; font-weight: 500; margin-bottom: 0; } .portfolio__content-2 { position: absolute; top: 60%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; text-align: center; visibility: hidden; opacity: 0; } .portfolio__content-2 p { font-size: 15px; color: #ffffff; font-weight: 500; margin-bottom: 0; } .portfolio__content-3 { position: absolute; bottom: -100px; left: 0; right: 0; width: 100%; padding: 20px 35px; background: #ffffff; visibility: hidden; opacity: 0; } .portfolio__content-3 p { margin-bottom: 0; } .portfolio__title { font-size: 30px; color: #ffffff; margin-bottom: 5px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__title { font-size: 22px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__title { font-size: 24px; } } @media (max-width: 575px) { .portfolio__title { font-size: 20px; } } .portfolio__title-3 { font-size: 24px; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__title-3 { font-size: 19px; } } @media (max-width: 575px) { .portfolio__title-3 { font-size: 19px; } } .portfolio__title-3 a:hover { color: #0a4c48; } .portfolio__plus { position: absolute; top: 0px; right: 30px; z-index: 1; visibility: hidden; opacity: 0; } @media (max-width: 575px) { .portfolio__plus { right: 10px; } } .portfolio__plus a { font-size: 15px; color: #ffffff; display: inline-block; width: 45px; height: 45px; line-height: 45px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.3); } .portfolio__plus a:hover { color: #2c3941; background: #ffffff; } .portfolio__plus-2 a { font-size: 15px; color: #2c3941; display: inline-block; width: 55px; height: 55px; line-height: 58px; text-align: center; background: #fad105; } .portfolio__plus-2 a:hover { background: #ffffff; } .portfolio__plus-3 a { display: inline-block; width: 55px; height: 55px; line-height: 57px; background: #fad105; color: #222328; text-align: center; } .portfolio__plus-3 a:hover { background: #222328; color: #ffffff; } .portfolio__bg { position: relative; } .portfolio__bg::after { position: absolute; content: ""; left: 0; bottom: -480px; width: 100%; height: 805px; background: #f8f4ef; z-index: -1; } .portfolio__bg-2::after { bottom: -156px; height: 75%; } .portfolio__details-info { position: absolute; right: 0; bottom: 0; background: #0a4c48; padding: 50px 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__details-info { padding: 20px 35px; } } .portfolio__details-info-item { min-width: 250px; border-bottom: 1px solid #0e5551; padding-bottom: 25px; margin-bottom: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__details-info-item { padding-bottom: 15px; margin-bottom: 10px; } } .portfolio__details-info-item span { font-size: 18px; font-weight: 600; color: #fad105; position: relative; display: block; padding-left: 30px; } .portfolio__details-info-item span::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 20px; height: 2px; background: #fad105; } .portfolio__details-info-item p { font-size: 22px; font-weight: 600; color: #ffffff; margin-bottom: 0; } .portfolio__details-title { font-size: 42px; margin-bottom: 15px; } @media (max-width: 575px) { .portfolio__details-title { font-size: 27px; } } .portfolio__details-features-text h3 { font-size: 24px; margin-bottom: 10px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__details-goal-content { padding-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__details-goal-content { padding-left: 0; } } @media (max-width: 575px) { .portfolio__details-goal-content { padding-left: 0; } } .portfolio__details-goal-content p { padding-right: 25px; } .portfolio__details-goal-features { margin-top: 16px; } .portfolio__details-goal-features ul li:not(:last-child) { margin-bottom: 13px; } .portfolio__details-goal-features ul li:hover .icon i { background: #0a4c48; color: #ffffff; border-color: #0a4c48; } .portfolio__details-goal-features ul li .icon i { display: inline-block; width: 45px; height: 45px; line-height: 41px; text-align: center; color: #677a85; border: 2px solid #e8e8e8; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .portfolio__details-goal-features ul li .text p { font-size: 15px; padding-right: 0; margin-bottom: 0; } .portfolio__social ul li { display: inline-block; } .portfolio__social ul li:not(:last-child) { margin-right: 5px; } .portfolio__social ul li a { display: inline-block; width: 40px; height: 40px; line-height: 42px; text-align: center; background: #093e3b; color: #607887; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .portfolio__social ul li a:hover { background: #fad105; color: #222328; } /*----------------------------------------*/ /* 08. WHY CSS START /*----------------------------------------*/ .why__bg { position: relative; } .why__bg::after { position: absolute; content: ""; right: 0; top: 0; width: 49.5%; height: 100%; background: #2c3941; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .why__bg::after { width: 59.3%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .why__bg::after { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .why__bg::after { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .why__bg::after { width: 100%; } } @media (max-width: 575px) { .why__bg::after { width: 100%; } } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .why__wrapper { padding-top: 80px; padding-left: 60px; padding-bottom: 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .why__wrapper { padding-top: 30px; padding-left: 30px; padding-bottom: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .why__wrapper { padding-top: 30px; padding-left: 0px; padding-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .why__wrapper { padding-top: 30px; padding-left: 0px; padding-bottom: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .why__wrapper { padding-top: 30px; padding-left: 0px; padding-bottom: 30px; } } @media (max-width: 575px) { .why__wrapper { padding-top: 30px; padding-left: 0px; padding-bottom: 30px; } } .why__wrapper p { color: #ffffff; margin-bottom: 55px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .why__wrapper-2 { padding-right: 0px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .why__wrapper-2 { padding-right: 110px; } } @media (max-width: 575px) { .why__wrapper-2 { padding-right: 0; } } .why__wrapper-2 > p { margin-bottom: 32px; } .why__item { padding: 30px 25px; background: #394a55; margin-right: 5px; width: 33.33%; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .why__item { padding-left: 0; padding-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .why__item { padding-left: 0; padding-right: 0; } } @media (max-width: 575px) { .why__item { padding-left: 45px; padding-right: 45px; margin-right: 0; margin-bottom: 5px; width: 100%; } } .why__item-2:not(:last-child) { margin-bottom: 18px; } .why__item-2:hover .why__icon-2 img { -webkit-transform: translateY(-5px) translate3d(0, -5px, 0); -moz-transform: translateY(-5px) translate3d(0, -5px, 0); -ms-transform: translateY(-5px) translate3d(0, -5px, 0); transform: translateY(-5px) translate3d(0, -5px, 0); } .why__icon-2 img { width: 73px; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -ms-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -o-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); } .why__title { font-size: 18px; line-height: 28px; color: #ffffff; } .why__title-2 { font-size: 24px; margin-bottom: 12px; color: #222328; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .why__thumb { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .why__thumb { margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .why__thumb { margin-left: 0; } } @media (max-width: 575px) { .why__thumb { margin-left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .why__thumb img { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .why__thumb img { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .why__thumb img { width: 100%; } } @media (max-width: 575px) { .why__thumb img { width: 100%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .why__thumb-2 { padding-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .why__thumb-2 { padding-right: 0; } } @media (max-width: 575px) { .why__thumb-2 { padding-right: 0; } } /*----------------------------------------*/ /* 09. TESTIMONIAL CSS START /*----------------------------------------*/ .testimonial__area { background-repeat: no-repeat; background-size: cover; } .testimonial__area-2 { background-position: center; background-repeat: no-repeat; background-size: cover; } .testimonial__item { padding: 60px 45px; padding-bottom: 50px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } @media (max-width: 575px) { .testimonial__item { padding-left: 5px; padding-right: 5px; } } .testimonial__item-green .testimonial__thumb::after { background: #0a4c48; } .testimonial__item-green .testimonial__avater-info span { color: #677a85; } .testimonial__content p { font-size: 18px; line-height: 32px; } .testimonial__content-2 p { font-size: 20px; line-height: 32px; color: #ffffff; margin-bottom: 25px; } .testimonial__content-3 { position: relative; padding: 35px 50px; padding-right: 60px; -webkit-box-shadow: 0px 10px 60px 0px rgba(221, 221, 221, 0.4); -moz-box-shadow: 0px 10px 60px 0px rgba(221, 221, 221, 0.4); box-shadow: 0px 10px 60px 0px rgba(221, 221, 221, 0.4); margin-bottom: 36px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial__content-3 { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial__content-3 { padding-left: 50px; padding-right: 50px; } } @media (max-width: 575px) { .testimonial__content-3 { padding-left: 20px; padding-right: 20px; } } .testimonial__content-3 p { font-size: 18px; line-height: 32px; color: #2c3941; margin-bottom: 15px; } .testimonial__content-3::after { position: absolute; content: ""; bottom: -22px; left: 60px; width: 0; height: 0; border-top: 22px solid #ffffff; border-right: 35px solid transparent; } .testimonial__thumb { position: relative; } .testimonial__thumb::after { position: absolute; content: ""; left: 50%; top: -10px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 140px; height: 70px; border-top-left-radius: 110px; border-top-right-radius: 110px; background: #fc8459; } .testimonial__thumb img { position: relative; z-index: 1; width: 120px; height: 120px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .testimonial__thumb-2 { margin-left: 8px; } .testimonial__thumb-2::after { width: 80px; height: 40px; background: #fad105; top: -7px; } @media (max-width: 575px) { .testimonial__thumb-2::after { left: -7px; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .testimonial__thumb-2 img { width: 65px; height: 65px; } .testimonial__avater-info h4 { font-size: 20px; display: inline-block; margin-bottom: 0; } .testimonial__avater-info span { font-size: 14px; font-weight: 600; color: #fc8459; padding-left: 6px; } .testimonial__avater-info-2 h4 { display: block; font-size: 24px; color: #ffffff; } .testimonial__avater-info-2 span { color: #fad105; font-weight: 500; font-size: 15px; } .testimonial__avater-info-3 h4 { font-size: 20px; display: inline-block; } .testimonial__avater-info-3 span { color: #fc8459; font-weight: 600; margin-left: 5px; } .testimonial__avater-3-thumb img { width: 70px; height: 70px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .testimonial__quote-icon { position: absolute; top: 35px; left: 30px; z-index: -1; } .testimonial__shape-1 { position: absolute; top: -80px; right: 85px; z-index: -1; } .testimonial__slider-wrapper .testimonial-pagination { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; position: absolute; left: -80px; top: 95px; z-index: 9; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial__slider-wrapper .testimonial-pagination { left: -30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial__slider-wrapper .testimonial-pagination { left: -20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial__slider-wrapper .testimonial-pagination { left: -30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonial__slider-wrapper .testimonial-pagination { left: -20px; } } @media (max-width: 575px) { .testimonial__slider-wrapper .testimonial-pagination { left: -10px; } } .testimonial__slider-wrapper .testimonial-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background: #cfcdc3; opacity: 1; direction: block; margin: 3px 0; } .testimonial__slider-wrapper .testimonial-pagination .swiper-pagination-bullet-active { background: #0a4c48; } .testimonial__bg { position: absolute; left: 50%; top: 0; height: 100%; width: 92%; z-index: -1; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-position: center; background-repeat: no-repeat; background-size: cover; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial__wrapper-2 { padding-right: 0; padding-left: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial__wrapper-2 { padding-right: 0; padding-left: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial__wrapper-2 { padding-right: 160px; padding-left: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonial__wrapper-2 { padding-right: 30px; padding-left: 30px; } } @media (max-width: 575px) { .testimonial__wrapper-2 { padding-right: 30px; padding-left: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial__img { text-align: center; } } @media (max-width: 575px) { .testimonial__img img { width: 100%; } } /*----------------------------------------*/ /* 10. VIDEO CSS START /*----------------------------------------*/ .video__play { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .video__play-btn { width: 100px; height: 70px; line-height: 70px; text-align: center; background: #ff4328; color: #ffffff; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; display: inline-block; } .video__play-btn:hover { color: #ff4328; background: #ffffff; } .video__overlay { position: relative; } .video__overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(44, 57, 65, 0.3); } .video-mb--160 { margin-bottom: -160px; } @media (max-width: 575px) { .video-mb--160 { margin-bottom: -80px; } } /*----------------------------------------*/ /* 11. Blog CSS START /*----------------------------------------*/ .blog__item-2:hover .blog__thumb-2 img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .blog__item-3 { -webkit-box-shadow: 0px 10px 60px 0px rgba(207, 199, 188, 0.2); -moz-box-shadow: 0px 10px 60px 0px rgba(207, 199, 188, 0.2); box-shadow: 0px 10px 60px 0px rgba(207, 199, 188, 0.2); } .blog__item-3:hover .blog__thumb-3 img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .blog__item:hover .blog__thumb img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .blog__thumb-3 { overflow: hidden; } .blog__title { font-size: 22px; line-height: 1.3; margin-bottom: 12px; text-transform: capitalize; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__title { font-size: 20px; } } @media (max-width: 575px) { .blog__title { font-size: 18px; } } .blog__title a:hover { color: #fc8459; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__title-2 { font-size: 20px; } } .blog__title-3 { font-size: 23px; margin-bottom: 10px; } @media (max-width: 575px) { .blog__title-3 { font-size: 19px; } } .blog__title-3 a:hover { color: #0a4c48; } .blog__content { padding: 32px 40px; padding-right: 35px; padding-bottom: 25px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__content { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__content { padding-left: 30px; padding-right: 30px; } } @media (max-width: 575px) { .blog__content { padding-left: 30px; padding-right: 30px; } } .blog__content-2 { padding: 35px 40px; padding-right: 30px; } @media (max-width: 575px) { .blog__content-2 { padding: 20px; padding-right: 15px; } } .blog__content-2 p { padding-left: 24px; position: relative; margin-bottom: 5px; } .blog__content-2 p::after { position: absolute; content: ""; left: 0; top: 7px; width: 3px; height: 80%; background: #0a4c48; } .blog__content-2 .link-btn-2 { color: #0a4c48; } .blog__content-2 .link-btn-2:hover { color: #222328; } .blog__content-3 { padding: 33px 30px; padding-bottom: 28px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__content-3 { padding-left: 25px; padding-right: 25px; } } @media (max-width: 575px) { .blog__content-3 { padding-left: 20px; padding-right: 20px; } } .blog__content-3 p { margin-bottom: 10px; } .blog__content-3 .link-btn-2 { color: #677a85; } .blog__content-3 .link-btn-2:hover { color: #0a4c48; } .blog__meta span { font-family: "Rubik", sans-serif; display: inline-block; } .blog__meta .author { font-size: 13px; font-weight: 500; height: 25px; line-height: 25px; color: #ffffff; text-transform: uppercase; background: #24c373; padding: 0 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 13px; } .blog__meta .date { position: absolute; right: 40px; top: -35px; font-weight: 500; font-size: 20px; color: #ffffff; height: 70px; width: 70px; text-align: center; background: #fc8459; padding-top: 11px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; line-height: 1; text-transform: capitalize; } .blog__meta .date span { font-size: 30px; margin-bottom: 0; line-height: 1; color: #ffffff; } .blog__meta-2 { margin-bottom: 7px; } .blog__meta-2 span { font-weight: 500; text-transform: uppercase; } .blog__meta-2 span:not(:last-child) { margin-right: 17px; } .blog__meta-2 span i { color: #0a4c48; margin-right: 5px; } .blog__meta-2 span:hover { color: #0a4c48; } .blog__meta-3 span { font-weight: 500; text-transform: uppercase; } .blog__meta-3 span:not(:last-child) { margin-right: 20px; } @media (max-width: 575px) { .blog__meta-3 span:not(:last-child) { margin-right: 10px; } } .blog__meta-3 span i { color: #0a4c48; margin-right: 5px; } .postbox__thumb .play-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .postbox__audio { height: 455px; width: 100%; } .postbox__audio iframe { width: 100%; height: 100%; border: none; } .postbox__item:hover { -webkit-box-shadow: 0px 16px 32px 0px rgba(40, 89, 196, 0.1); -moz-box-shadow: 0px 16px 32px 0px rgba(40, 89, 196, 0.1); box-shadow: 0px 16px 32px 0px rgba(40, 89, 196, 0.1); } .postbox__item-single:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .postbox__content { border: 2px solid #ededed; border-top: none; padding: 40px 50px; } @media (max-width: 575px) { .postbox__content { padding-left: 20px; padding-right: 20px; } } .postbox__content-single { padding-left: 0; padding-right: 0; border: none; } .postbox__title { font-size: 38px; margin-bottom: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .postbox__title { font-size: 28px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .postbox__title { font-size: 33px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .postbox__title { font-size: 30px; } } @media (max-width: 575px) { .postbox__title { font-size: 25px; } } .postbox__title a:hover { color: #fc8459; } .postbox__meta { margin-bottom: 5px; } .postbox__meta span { font-size: 14px; font-weight: 600; color: #2c3941; text-transform: uppercase; } @media (max-width: 575px) { .postbox__meta span { display: block; } } .postbox__meta span:not(:last-child) { margin-right: 30px; } .postbox__meta span i { color: #fc8459; margin-right: 3px; } .postbox__meta span:hover { color: #24c373; } .postbox__meta span:hover i { color: #24c373; } .postbox__text p { margin-bottom: 28px; } .postbox__text-single p { margin-bottom: 15px; } .postbox__slider button { position: absolute; left: 50px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; font-size: 30px; color: #ffffff; } .postbox__slider button.postbox-slider-button-next { left: auto; right: 50px; } @media (max-width: 575px) { .postbox__slider button.postbox-slider-button-next { right: 10px; } } @media (max-width: 575px) { .postbox__slider button { left: 10px; } } .postbox__quote { background: #f8f4ef; padding: 40px 65px; padding-bottom: 24px; } @media (max-width: 575px) { .postbox__quote { padding-left: 15px; padding-right: 15px; } } .postbox__quote h4 { font-size: 14px; display: inline-block; margin-bottom: 15px; color: #fc8459; } .postbox__quote p { font-size: 28px; line-height: 1.2; text-align: center; font-weight: 700; color: #2c3941; margin-bottom: 0; } .postbox__quote-icon { position: absolute; top: 30px; right: 30px; z-index: -1; } .postbox__quote-icon i { font-size: 160px; opacity: 0.1; } .postbox__comment-form { margin-bottom: 20px; padding: 40px 30px; box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.09); background: #ffffff; } .postbox__comment-title { font-size: 27px; margin-bottom: 0; } .postbox__comment-input { position: relative; margin-bottom: 20px; } .postbox__comment-input span { font-weight: 600; color: #2c3941; margin-bottom: 12px; display: block; } .postbox__comment-input input, .postbox__comment-input textarea { height: 55px; padding: 0 20px; width: 100%; font-size: 14px; color: #2c3941; outline: none; border: 1px solid transparent; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background: #f7f7f7; } .postbox__comment-input textarea { height: 175px; resize: none; padding-top: 20px; padding-bottom: 20px; } .postbox__tag h4 { font-size: 20px; margin-bottom: 17px; } .postbox__tag a { color: #2c3941; display: inline-block; font-size: 13px; font-weight: 600; text-transform: uppercase; padding: 10px 25px; padding-bottom: 8px; margin-right: 5px; margin-bottom: 10px; position: relative; z-index: 1; border-radius: 40px; background: #f8f4ef; } .postbox__tag a:hover { color: #ffffff; background: #2c3941; } @media only screen and (min-width: 768px) and (max-width: 991px) { .sidebar__wrapper-2 { margin-top: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .sidebar__wrapper-2 { margin-top: 40px; } } @media (max-width: 575px) { .sidebar__wrapper-2 { margin-top: 40px; } } .sidebar__widget { padding: 30px; background: #ffffff; border: 2px solid #ededed; -webkit-box-shadow: 0px 8px 16px 0px rgba(200, 183, 255, 0.2); -moz-box-shadow: 0px 8px 16px 0px rgba(200, 183, 255, 0.2); box-shadow: 0px 8px 16px 0px rgba(200, 183, 255, 0.2); } .sidebar__widget-title { position: relative; display: inline-block; font-size: 20px; padding-left: 30px; margin-bottom: 0; } .sidebar__widget-title::after { left: 0px; height: 20px; width: 2px; background: #fc8459; position: absolute; top: 50%; content: ""; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .sidebar__search-input-2 { position: relative; } .sidebar__search-input-2 input { width: 100%; height: 60px; line-height: 60px; background: #f8f4ef; padding: 0 25px; text-transform: capitalize; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: 2px solid #f8f4ef; outline: none; padding-top: 3px; padding-right: 80px; } .sidebar__search-input-2 button { position: absolute; top: 0; right: 0; height: 100%; padding: 0 24px; color: #fff; line-height: 60px; -webkit-border-radius: 0 7px 7px 0; -moz-border-radius: 0 7px 7px 0; border-radius: 0 7px 7px 0; background: #fc8459; } .sidebar__category ul li { padding: 15px 0; } .sidebar__category ul li:not(:last-child) { border-bottom: 1px solid #eaeaea; } .sidebar__category ul li:last-child { padding-bottom: 0; } .sidebar__category ul li:first-child { padding-top: 0; } .sidebar__category ul li a { color: #222328; display: inline-block; font-weight: 500; text-transform: capitalize; } .sidebar__category ul li a:hover { color: #fc8459; } .sidebar__tag a { background: #f8f4ef; color: #2c3941; display: inline-block; font-size: 13px; font-weight: 600; line-height: 1; padding: 10px 21px; padding-bottom: 8px; margin-bottom: 8px; margin-right: 5px; text-transform: uppercase; border-radius: 40px; border: 0; } .sidebar__tag a:hover { background: #2c3941; color: #ffffff; } .sidebar__banner::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(44, 57, 65, 0.5); } .sidebar__banner-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; background: #ffffff; } .sidebar__banner-content h4 { padding: 15px 20px; font-size: 24px; color: #222328; text-transform: uppercase; margin-bottom: 0; } .rc__post ul li:not(:last-child) { margin-bottom: 15px; } .rc__post-thumb img { width: 80px; height: 80px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .rc__post-title { margin-bottom: 6px; font-size: 17px; } .rc__post-title a:hover { color: #fc8459; } .rc__meta span { font-size: 12px; text-transform: uppercase; font-weight: 600; } /*----------------------------------------*/ /* 12. BRAND CSS START /*----------------------------------------*/ .brand__bg { position: relative; } .brand__bg::after { position: absolute; content: ""; left: -165px; top: 0; width: calc(100% + 330px); height: 100%; background: #34454f; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .brand__bg::after { left: -80px; width: calc(100% + 160px); } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .brand__bg::after { left: -30px; width: calc(100% + 60px); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .brand__bg::after { left: 0; width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .brand__bg::after { left: -20px; width: calc(100% + 40px); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .brand__bg::after { left: -15px; width: calc(100% + 30px); } } @media (max-width: 575px) { .brand__bg::after { left: 0; width: 100%; } } .brand__bg-2::after { background: #ffffff; } .brand__bg-2::before { position: absolute; content: ""; left: -165px; top: 0; width: calc(100% + 330px); height: 3px; background: #0a4c48; z-index: 11; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .brand__bg-2::before { left: -80px; width: calc(100% + 160px); } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .brand__bg-2::before { left: -30px; width: calc(100% + 60px); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .brand__bg-2::before { left: 0; width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .brand__bg-2::before { left: -20px; width: calc(100% + 40px); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .brand__bg-2::before { left: -15px; width: calc(100% + 30px); } } @media (max-width: 575px) { .brand__bg-2::before { left: 0; width: 100%; } } .brand__item { text-align: center; } /*----------------------------------------*/ /* 13. CONTACT CSS START /*----------------------------------------*/ .contact__area { background-position: center; background-repeat: no-repeat; background-size: cover; } .contact__bg { position: absolute; left: 0; bottom: -2%; width: 100%; height: 100%; background-position: bottom center; background-repeat: no-repeat; z-index: -1; } .contact__form button { height: 75px; line-height: 75px; } .contact__form button::after { left: -12px; } .contact__form-green button { background: #fad105; color: #222328; } .contact__form-green .contact__input input, .contact__form-green .contact__input textarea { background: #093c39; border-color: #093c39; } .contact__form-green .contact__input input:hover, .contact__form-green .contact__input input:focus, .contact__form-green .contact__input textarea:hover, .contact__form-green .contact__input textarea:focus { border-color: #093c39; } .contact__form-green .contact__input i { color: #fad105; } .contact__form-4 .contact__input-3 { margin-bottom: 30px; } .contact__form-4 .contact__input-3 input, .contact__form-4 .contact__input-3 textarea { height: 80px; line-height: 76px; color: #2c3941; background: #f8f4ef; border-color: #f8f4ef; padding: 0 35px; padding-right: 70px; } .contact__form-4 .contact__input-3 input::placeholder, .contact__form-4 .contact__input-3 textarea::placeholder { color: #2c3941; } .contact__form-4 .contact__input-3 input:focus, .contact__form-4 .contact__input-3 input:hover, .contact__form-4 .contact__input-3 textarea:focus, .contact__form-4 .contact__input-3 textarea:hover { background: #ffffff; border-color: #f8f4ef; } .contact__form-4 .contact__input-3 textarea { padding-top: 30px; padding-right: 35px; height: 215px; line-height: 1; border: 2px solid #f8f4ef; background: #f8f4ef; outline: none; resize: none; width: 100%; color: #2c3941; font-weight: 500; font-family: "Rubik", sans-serif; font-size: 18px; } .contact__form-4 .contact__input-3 textarea:focus, .contact__form-4 .contact__input-3 textarea:hover { background: #ffffff; border-color: #f8f4ef; } .contact__form-4 .contact__input-3 textarea::placeholder { color: #2c3941; font-weight: 500; font-size: 18px; } .contact__form-4 .contact__input-3 .nice-select { background: #f8f4ef; border-color: #f8f4ef; height: 80px; line-height: 76px; } .contact__form-4 .contact__input-3 .nice-select .current { color: #2c3941; } .contact__form-4 .contact__input-3 .nice-select::after { height: 10px; width: 10px; border-color: #2c3941; right: 35px; } .contact__form-4 .contact__input-3 .nice-select.open { border-color: #f8f4ef; } .contact__form-4 .contact__input-3 i { color: #2c3941; } .contact__input { position: relative; } .contact__input input, .contact__input textarea { width: 100%; height: 75px; line-height: 71px; padding: 0 35px; padding-right: 60px; background: transparent; outline: none; border: 2px solid rgba(255, 255, 255, 0.25); font-size: 18px; font-family: "Rubik", sans-serif; font-weight: 400; margin-bottom: 10px; color: #ffffff; } .contact__input input::placeholder, .contact__input textarea::placeholder { color: #ffffff; font-weight: 500; font-family: "Rubik", sans-serif; font-size: 18px; } .contact__input input:hover, .contact__input input:focus, .contact__input textarea:hover, .contact__input textarea:focus { border-color: #ffffff; } .contact__input i { position: absolute; top: 43%; right: 35px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #ffffff; font-size: 18px; } .contact__input textarea { line-height: 1; padding: 30px 35px; resize: none; height: 140px; } .contact__input-3 { position: relative; margin-bottom: 20px; } .contact__input-3 input { width: 100%; height: 75px; line-height: 71px; background: transparent; padding: 0 30px; font-size: 18px; outline: none; border: 2px solid rgba(255, 255, 255, 0.1); font-weight: 500; font-family: "Rubik", sans-serif; color: #ffffff; } .contact__input-3 input::placeholder { font-weight: 500; font-family: "Rubik", sans-serif; color: #ffffff; font-size: 18px; } .contact__input-3 input:focus { border-color: rgba(255, 255, 255, 0.8); } .contact__input-3 i { position: absolute; top: 49%; right: 30px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 18px; color: #fad105; } .contact__input-3 .nice-select { width: 100%; border-radius: 0; background: transparent; border: 2px solid rgba(255, 255, 255, 0.1); height: 75px; line-height: 71px; margin-bottom: 20px; } .contact__input-3 .nice-select .current { font-size: 18px; font-weight: 500; font-family: "Rubik", sans-serif; color: #ffffff; } .contact__input-3 .nice-select::after { height: 10px; width: 10px; border-color: #fad105; right: 30px; margin-top: -7px; } .contact__input-3 .nice-select.open { border-color: rgba(255, 255, 255, 0.8); } .contact__input-3 .nice-select .list { width: 100%; border-radius: 0; } .contact__thumb-1 span { position: relative; display: inline-block; transform-origin: top right; z-index: 1; } .contact__thumb-1 span::after { position: absolute; content: ""; right: -10px; bottom: -10px; width: 100%; height: 100%; background: #af5e41; -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -ms-transform: rotate(-7deg); transform: rotate(-7deg); z-index: -1; } @media (max-width: 575px) { .contact__thumb-1 span::after { right: 0; } } .contact__thumb-1 span img { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -ms-transform: rotate(-7deg); transform: rotate(-7deg); } .contact__thumb-2 { margin-right: -200px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .contact__thumb-2 { margin-right: -50px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .contact__thumb-2 { margin-right: 0px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .contact__thumb-2 { margin-right: 0px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact__thumb-2 { margin-right: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .contact__thumb-2 { margin-right: 0px; } } @media (max-width: 575px) { .contact__thumb-2 { margin-right: 0px; } } .contact__btn-3 button { height: 75px; line-height: 80px; padding: 0 70px; } .contact__btn-3 button::after { left: -15px; } .contact__btn-4 button { font-size: 18px; height: 80px; line-height: 85px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .contact__btn-4 button::after { left: -20px; } .contact__item { padding: 75px 80px; padding-bottom: 70px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .contact__item { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .contact__item { padding: 50px 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .contact__item { padding: 50px; } } @media (max-width: 575px) { .contact__item { padding: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .contact__icon { margin-bottom: 25px; } } @media (max-width: 575px) { .contact__icon { margin-bottom: 25px; } } .contact__icon i { display: inline-block; width: 80px; height: 80px; line-height: 80px; text-align: center; color: #2c3941; font-size: 35px; background: #fad105; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .contact__content h5 { font-size: 20px; font-weight: 400; color: #ffffff; margin-bottom: 23px; } .contact__content p { font-size: 24px; line-height: 32px; color: #ffffff; margin-bottom: 0; } .contact__map-wrapper { width: 100%; height: 775px; } .contact__map-wrapper iframe { width: 100%; height: 100%; } .contact__map .map-pin { position: absolute; top: 45%; right: 36%; } @media (max-width: 575px) { .contact__wrapper { padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact__wrapper-3 { padding-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .contact__wrapper-3 { padding-left: 0; } } @media (max-width: 575px) { .contact__wrapper-3 { padding-left: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .contact__padding { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .contact__padding { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact__padding { padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .contact__padding { padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; } } @media (max-width: 575px) { .contact__padding { padding-left: 0px; padding-right: 0px; padding-top: 20px; padding-bottom: 20px; } } /*----------------------------------------*/ /* 14. SKILL CSS START /*----------------------------------------*/ @media (max-width: 575px) { .skill__wrapper { padding-right: 0; } } .skill__wrapper p { padding-left: 28px; position: relative; margin-bottom: 40px; } .skill__wrapper p::after { position: absolute; content: ""; left: 0; top: 5px; width: 3px; height: 90%; background: #fc8459; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .skill__progress { margin-top: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .skill__progress { margin-top: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .skill__progress { margin-top: 50px; } } @media (max-width: 575px) { .skill__progress { margin-top: 50px; } } @media (max-width: 575px) { .skill__progress-circle { margin-bottom: 25px; } } .skill__progress-circle .knob { font-size: 26px !important; color: #2c3941 !important; } .skill__progress-circle .progress-circular { position: relative; } .skill__progress-circle .progress-circular::after { position: absolute; content: ""; left: 15px; top: 15px; width: 79%; height: 73%; border: 7px solid #f8f4ef; border-radius: 50%; } @media (max-width: 575px) { .skill__progress-circle .progress-circular::after { width: 46%; } } .skill__progress-content h3 { font-size: 24px; margin-bottom: 10px; } .skill__progress-content p { margin-bottom: 0; } .skill__shape-1 { position: absolute; top: -65%; left: 15%; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .skill__shape-1 { width: 100%; left: 0; } } /*----------------------------------------*/ /* 15. HERO CSS START /*----------------------------------------*/ .hero__height { min-height: 950px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__height { min-height: 798px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__height { min-height: 661px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero__height { min-height: 750px; } } @media (max-width: 575px) { .hero__height { min-height: 750px; } } .hero__title { font-size: 110px; line-height: 0.9; color: #ffffff; margin-bottom: 62px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__title { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__title { font-size: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero__title { font-size: 80px; } } @media (max-width: 575px) { .hero__title { font-size: 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__content { margin-top: 80px; } } .hero__content span { font-family: "Rubik", sans-serif; color: #fad105; font-weight: 500; padding-left: 65px; position: relative; display: inline-block; margin-bottom: 30px; } .hero__content span::after { position: absolute; content: ""; left: 0; top: 12px; width: 40px; height: 3px; background: #fad105; } .hero__thumb { position: relative; } .hero__thumb-1 { margin-bottom: -76px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__thumb-1 img { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__thumb-1 img { width: 110%; } } .hero__thumb-2 { position: absolute; bottom: 110px; right: -250px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__thumb-2 { right: 0; } } .hero__thumb-2 span { position: relative; display: inline-block; transform-origin: top right; z-index: 1; } .hero__thumb-2 span::after { position: absolute; content: ""; right: -10px; bottom: -10px; width: 100%; height: 100%; background: #fad105; -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -ms-transform: rotate(-7deg); transform: rotate(-7deg); z-index: -1; } .hero__thumb-2 span img { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -ms-transform: rotate(-7deg); transform: rotate(-7deg); } .hero__thumb-2 span .play-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: inline-block; font-size: 12px; width: 55px; height: 55px; line-height: 58px; text-align: center; background: #0a4c48; color: #fad105; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .hero__thumb-2 span .play-btn i { padding-left: 3px; } .hero__thumb-2 span .play-btn:hover { background: #ffffff; color: #0a4c48; } .hero__shape-1 { position: absolute; top: 0; right: 13%; } .hero__shape-2 { position: absolute; bottom: 0; left: 2%; } .hero__shape .hero-shape-circle { position: absolute; top: -95px; right: 15%; display: inline-block; width: 625px; height: 625px; background: #fad105; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; animation: hero-pulse 2s infinite; color: black; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__shape .hero-shape-circle { right: 4%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__shape .hero-shape-circle { right: 8%; width: 390px; height: 390px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__shape .hero-shape-circle { top: -50px; width: 300px; height: 300px; } } @keyframes hero-pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(250, 209, 5, 0.4); box-shadow: 0 0 0 0 rgba(250, 209, 5, 0.4); } 70% { -moz-box-shadow: 0 0 0 50px rgba(250, 209, 5, 0); box-shadow: 0 0 0 50px rgba(250, 209, 5, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(250, 209, 5, 0); box-shadow: 0 0 0 0 rgba(250, 209, 5, 0); } } @-webkit-keyframes hero-pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(250, 209, 5, 0.4); box-shadow: 0 0 0 0 rgba(250, 209, 5, 0.4); } 70% { -moz-box-shadow: 0 0 0 50px rgba(250, 209, 5, 0); box-shadow: 0 0 0 50px rgba(250, 209, 5, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(250, 209, 5, 0); box-shadow: 0 0 0 0 rgba(250, 209, 5, 0); } } /*----------------------------------------*/ /* 16. COUNTER CSS START /*----------------------------------------*/ .counter__item { padding: 50px 70px; padding-bottom: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .counter__item { padding-left: 20px; padding-right: 20px; } } .counter__item-text { padding-left: 50px; padding-right: 50px; padding-top: 45px; padding-bottom: 35px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .counter__item-text { padding-left: 0; padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .counter__item-text { padding-left: 0; padding-right: 0; } } .counter__item-3 { -webkit-box-shadow: 0px 10px 60px 0px rgba(211, 211, 211, 0.4); -moz-box-shadow: 0px 10px 60px 0px rgba(211, 211, 211, 0.4); box-shadow: 0px 10px 60px 0px rgba(211, 211, 211, 0.4); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .counter__item-3 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .counter__item-3 { padding-left: 50px; padding-right: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .counter__item-wrapper.mt-125 { margin-top: -115px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .counter__item-wrapper.mt-125 { margin-top: -115px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .counter__item-wrapper.mt-125 { margin-top: 0; } } @media (max-width: 575px) { .counter__item-wrapper.mt-125 { margin-top: 0; } } .counter__content h3 { font-size: 40px; margin-bottom: 0; } .counter__content p { font-weight: 500; margin-bottom: 0; } .counter__text { font-size: 35px; font-weight: 400; line-height: 1; } .counter__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .counter__list ul li:not(:last-child) { margin-bottom: 10px; } .counter__list ul li:hover i { background: #0a4c48; border-color: #0a4c48; color: #ffffff; } .counter__list-icon i { display: inline-block; width: 45px; height: 45px; text-align: center; line-height: 40px; border: 2px solid #e7e7e7; color: #677a85; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .counter__list-content p { margin-bottom: 0; } .counter__about-text p { margin-bottom: 0; } .counter__bg { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 0; height: 100%; width: 90%; z-index: -1; background-position: center; background-repeat: no-repeat; background-size: contain; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .counter__wrapper-3 { padding-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .counter__wrapper-3 { padding-right: 0; } } @media (max-width: 575px) { .counter__wrapper-3 { padding-top: 0; padding-right: 0; } } /*----------------------------------------*/ /* 17. FAQ CSS START /*----------------------------------------*/ @media only screen and (min-width: 992px) and (max-width: 1199px) { .faq__wrapper { padding-left: 0; margin-top: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .faq__wrapper { padding-left: 0; margin-top: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .faq__wrapper { padding-left: 0; margin-top: 40px; } } @media (max-width: 575px) { .faq__wrapper { padding-left: 0; margin-top: 40px; } } .faq__content .accordion-item { border: 1px solid #dadada; margin-bottom: 10px; } .faq__content .accordion-item:first-of-type .accordion-button { border-top-left-radius: 0; border-top-right-radius: 0; } .faq__content .accordion-button:focus { box-shadow: none; } .faq__content .accordion-button:not(.collapsed) { color: #2c3941; background-color: #fff; } .faq__content .accordion-button:not(.collapsed)::after { content: "\f068"; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .faq__content .accordion-button { position: relative; display: flex; align-items: center; width: 100%; padding: 18px 45px; padding-left: 65px; padding-top: 20px; font-size: 18px; font-weight: 500; color: #2c3941; background-color: #ffffff; border: none; border-radius: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .faq__content .accordion-button { padding-right: 30px; } } @media (max-width: 575px) { .faq__content .accordion-button { padding-right: 10px; } } .faq__content .accordion-button::after { background-image: none; content: "\f067"; left: 30px; font-size: 18px; color: #2c3941; font-family: "Font Awesome 5 Pro"; position: absolute; margin: 0; } .faq__content .accordion-body { border: none; padding: 0; padding-left: 65px; padding-right: 45px; } @media (max-width: 575px) { .faq__content .accordion-body { padding-right: 10px; } } .faq__content .accordion-collapse { border: none; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .faq__thumb { margin-left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .faq__thumb { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .faq__thumb { margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .faq__thumb { margin-left: 0; } } @media (max-width: 575px) { .faq__thumb { margin-left: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .faq__thumb img { width: 100%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .faq__thumb img { text-align: center; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .faq__thumb img { text-align: center; max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .faq__thumb img { text-align: center; max-width: 100%; } } @media (max-width: 575px) { .faq__thumb img { text-align: center; max-width: 100%; } } /*----------------------------------------*/ /* 18. PAGE TITLE CSS START /*----------------------------------------*/ .page__title { font-size: 85px; color: #ffffff; line-height: 1; text-transform: capitalize; margin-bottom: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .page__title { font-size: 65px; } } @media (max-width: 575px) { .page__title { font-size: 45px; } } .page__title-overlay { position: relative; } .page__title-overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(34, 35, 40, 0.7); } .page__title-area { background-size: cover; background-repeat: no-repeat; background-position: right; } .page__title-wrapper { position: relative; z-index: 1; } .page__title-wrapper .breadcrumb { margin-bottom: 0; } .page__title-wrapper .breadcrumb-item { font-size: 24px; font-weight: 600; color: #ffffff; } .page__title-wrapper .breadcrumb-item.active { color: #fad105; } .page__title-wrapper .breadcrumb-item + .breadcrumb-item { position: relative; padding-left: 25px; margin-left: 15px; } .page__title-wrapper .breadcrumb-item + .breadcrumb-item::before, .page__title-wrapper .breadcrumb-item + .breadcrumb-item::after { position: absolute; padding-right: 0; float: none; content: ""; left: 0; top: 2px; width: 2px; height: 20px; background: #ffffff; } .page__title-wrapper .breadcrumb-item + .breadcrumb-item::after { left: 8px; } /*----------------------------------------*/ /* 19. TEAM CSS START /*----------------------------------------*/ .team__item:hover .team__thumb img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .team__content { padding: 35px 43px; border: 1px solid #e1e1e1; border-top: none; } .team__content .post { display: inline-block; margin-bottom: 15px; font-weight: 600; color: #677a85; } .team__title { font-size: 22px; margin-bottom: 2px; } .team__title a:hover { color: #fad105; } .team__social ul li { display: inline-block; } .team__social ul li:not(:last-child) { margin-right: 5px; } .team__social ul li a { display: inline-block; width: 40px; height: 40px; line-height: 42px; text-align: center; background: #f8f4ef; color: #2c3941; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .team__social ul li a:hover { color: #2c3941; background: #fad105; } .team__bg { position: relative; } .team__bg::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 254px; background: #f8f4ef; z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .team__bg::after { height: 200px; } } @media (max-width: 575px) { .team-details { padding-top: 50px; padding-bottom: 20px; } } .tmd-img { margin-bottom: 105px; } @media (max-width: 575px) { .tmd-img { margin-bottom: 50px; } } .tmd-img:before { position: absolute; content: ""; width: 92.5%; height: 93.3%; background: #fc8459; clip-path: polygon(0 0, 100% 100%, 0 100%); bottom: -30px; left: -30px; z-index: -1; } @media (max-width: 575px) { .tmd-img:before { bottom: -10px; left: -10px; } } .tmd-img img { width: 100%; } .about-member-details { padding: 10px 30px 0 70px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-member-details { padding: 20px 30px 0 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .about-member-details { padding: 0; margin-bottom: 50px; } } .about-member-details > span { font-size: 14px; color: #fc8459; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; display: inline-block; } .about-member-details h2 { line-height: 1; margin-bottom: 24px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-member-details h2 { font-size: 50px; } } @media (max-width: 575px) { .about-member-details h2 { font-size: 36px; } } .about-member-details p { font-size: 18px; line-height: 30px; padding-bottom: 30px; border-bottom: 1px solid #efefef; margin-bottom: 30px; } .about-member-details ul li { margin-bottom: 16px; } .about-member-details ul li span { font-weight: 600; color: #1a1a2b; } .about-member-details ul li a:hover { color: #fc8459; } .member-qualification { margin-bottom: 52px; } .member-qualification h4 { font-size: 20px; padding-bottom: 20px; border-bottom: 1px solid #efefef; margin-bottom: 33px; } .member-qualification h4 span { color: #fc8459; } .member-qualification p { padding-right: 10px; margin-bottom: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .member-qualification p { padding-right: 0; } } .member-skill .progress { height: 6px; background-color: #f6f6f6; border-radius: 0; } .member-skill .progress-bar { background-color: #fc8459; } .skill-wrapper { margin-bottom: 27px; } .skill-title { display: flex; justify-content: space-between; } .skill-title span { float: right; font-size: 14px; font-weight: 700; color: #fc8459; } .skill-category { font-size: 14px; display: inline-block; margin-bottom: 16px; } .member-education { padding-bottom: 32px; } .member-education ul li { margin-bottom: 23px; } .edu-icon { float: left; margin-right: 20px; } .edu-icon i { font-size: 30px; color: #dddddd; } .edu-text { overflow: hidden; } .edu-text h5 { font-size: 16px; margin-bottom: 8px; line-height: 1; } .edu-text p { font-size: 14px; margin-bottom: 0; } /*----------------------------------------*/ /* 00. FOOTER CSS START /*----------------------------------------*/ .footer__pr-50 { padding-right: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer__pr-50 { padding-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer__pr-50 { padding-left: 0; } } @media (max-width: 575px) { .footer__pr-50 { padding-left: 0; } } .footer__pl-50 { padding-left: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer__pl-50 { padding-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer__pl-50 { padding-left: 0; padding-right: 0; } } @media (max-width: 575px) { .footer__pl-50 { padding-left: 0; padding-right: 0; } } .footer__pr-40 { padding-right: 40px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer__pr-40 { padding-left: 25px; } } @media (max-width: 575px) { .footer__pr-40 { padding-left: 0px; } } .footer__pl-55 { padding-left: 55px; } @media (max-width: 575px) { .footer__pl-55 { padding-left: 0; } } .footer__widget { padding-top: 75px; } .footer__widget-title { font-size: 22px; color: #ffffff; padding-bottom: 35px; margin-bottom: 25px; border-bottom: 2px solid #34454f; } .footer__widget-title-3 { color: #2c3941; padding-bottom: 0; border: none; margin-bottom: 15px; } .footer__widget-content p { color: #a7c1d1; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 2px solid #34454f; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer__widget.pl-55 { padding-left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer__widget.pl-55 { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer__widget.pl-55 { padding-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer__widget.pl-55 { padding-left: 0; } } @media (max-width: 575px) { .footer__widget.pl-55 { padding-left: 0; } } @media (max-width: 575px) { .footer__widget.pl-30 { padding-left: 0; } } .footer__link ul li:not(:last-child) { margin-bottom: 4px; } .footer__link ul li a { color: #a7c1d1; } .footer__link ul li a:hover { color: #ffffff; } .footer__link-3 ul li a { color: #677a85; } .footer__link-3 ul li a:hover { color: #2c3941; } .footer__info ul li { margin-bottom: 20px; } .footer__info-icon i { font-size: 20px; color: #fc8459; } .footer__info-text h4 { color: #ffffff; font-size: 18px; margin-bottom: 0; } .footer__info-text a { color: #a7c1d1; } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer__info-3 { margin-bottom: 25px; } } @media (max-width: 575px) { .footer__info-3 { margin-bottom: 25px; } } .footer__info-3-icon i { color: #0a4c48; width: 55px; height: 55px; line-height: 55px; text-align: center; background: #d6cdc1; font-size: 18px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border-top-left-radius: 0; } .footer__info-3-text a { font-size: 24px; color: #2c3941; font-weight: 600; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer__info-3-text a { font-size: 17px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer__info-3-text a { font-size: 20px; } } .footer__info-3-text h4 { color: #677a85; font-size: 15px; font-weight: 400; } .footer__blog ul li:not(:last-child) { margin-bottom: 30px; } .footer__blog-sm-title { font-size: 16px; color: #ffffff; line-height: 22px; } .footer__blog-sm-meta span { text-transform: uppercase; font-weight: 500; color: #a7c1d1; } .footer__blog-sm-meta span i { color: #fad105; margin-right: 5px; } .footer__blog-3 { padding-top: 7px; } .footer__blog-3 .footer__blog-sm-title { font-size: 18px; color: #2c3941; margin-bottom: 0; } .footer__blog-3 .footer__blog-sm-title a:hover { color: #0a4c48; } .footer__blog-3 .author { font-size: 14px; font-weight: 500; font-family: "Rubik", sans-serif; color: #677a85; padding-left: 30px; position: relative; text-transform: capitalize; } .footer__blog-3 .author::after { position: absolute; content: ""; left: 0; top: 8px; width: 20px; height: 2px; background: #677a85; } .footer__subscribe p { margin-bottom: 20px; padding-bottom: 0; border: none; } .footer__subscribe input { width: 100%; height: 50px; background: #374853; color: #ffffff; border: none; outline: none; padding: 0 30px; margin-bottom: 10px; } .footer__subscribe input::placeholder { color: #a7c1d1; } .footer__subscribe button { height: 50px; line-height: 50px; padding: 0 40px; padding-right: 60px; background: #fc8459; color: #ffffff; } .footer__subscribe button i:last-child { right: 38px; } .footer__subscribe button i:first-child { right: 50px; } .footer__subscribe button:hover { color: #ffffff; } .footer__subscribe button:hover i:last-child { right: 32px; } .footer__subscribe button:hover i:first-child { right: 38px; } .footer__subscribe-2 button { background: #fad105; color: #222328; } .footer__subscribe-2 button:hover { color: #222328; } .footer__subscribe-3 p { color: #677a85; } .footer__subscribe-3 input { background: #d6cdc1; color: #2c3941; font-weight: 500; } .footer__subscribe-3 input::placeholder { color: #513e26; font-weight: 500; } .footer__subscribe-3 button { background: #0a4c48; } @media (max-width: 575px) { .footer__social { margin-bottom: 15px; } } .footer__social ul li { display: inline-block; } .footer__social ul li:not(:last-child) { margin-right: 5px; } .footer__social ul li a { display: inline-block; width: 40px; height: 40px; line-height: 42px; text-align: center; background: #34454f; color: #607887; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .footer__social ul li a:hover { background: #fc8459; color: #ffffff; } .footer__social-2 ul li a:hover { background: #fad105; color: #222328; } .footer__social-3 ul li a { color: #513e26; background: #d6cdc1; } .footer__social-3 ul li a:hover { background: #0a4c48; color: #ffffff; } .footer__copyright p { color: #a7c1d1; margin-bottom: 0; font-weight: 500; } .footer__copyright-2 p { margin-right: 40px; } @media (max-width: 575px) { .footer__copyright-2 p { margin-bottom: 15px; } } .footer__copyright-3 p { color: #677a85; } .footer__bottom-border { padding-top: 30px; padding-bottom: 30px; border-top: 2px solid #34454f; } .footer__bottom-border-2 { padding-top: 25px; padding-bottom: 25px; } .footer__bottom-border-3 { padding-top: 25px; padding-bottom: 25px; border-color: #e2dbd1; } .footer__top-info-border { border-bottom: 1px solid #e2dbd1; } .footer__about-3 p { color: #677a85; border: none; padding-bottom: 0; margin-bottom: 20px; margin-top: 22px; } .footer__about-location .icon i { font-size: 45px; color: #0a4c48; } .footer__about-location .text h5 { font-size: 20px; margin-bottom: 3px; } .footer__about-location .text a { font-size: 16px; font-weight: 500; color: #2c3941; line-height: 24px; } /*# sourceMappingURL=style.css.map */