@charset "UTF-8"; /*----------------------------------------------------------------------------------- Template Name: Aiden - Creative Portfolio HTML5 Template Template URI: site.com Description: Aiden - Creative Portfolio HTML5 Template Author: Rs_Theme Version: 1.0 ----------------------------------------------------------------------------------- CSS INDEX =================== 01. Theme default css 02. header css 03. Navigation css 04. hero css 05. about css 06. service css 07. work CSS 08. testimonial css 09. brand css 10. blog css 11. contact css 12. breadcrumb css 13. cta css 14. contact-page css 15. blog-page css 16. footer css -----------------------------------------------------------------------------------*/ /* reset css start */ @import url("644b614f82934cd2a7833c108ceb941b.css"); @import url("a0020bf6401d4e99884e2be5f5402f24.css"); html { scroll-behavior: smooth; } body { font-family: "Open Sans", sans-serif; font-size: 15px; padding: 0; margin: 0; font-weight: 400; position: relative; line-height: 26px; background: #090A1A; } img { max-width: 100%; height: auto; } ul, ol { padding: 0; margin: 0; list-style: none; } button { cursor: pointer; } *:focus { outline: none; } button { border: none; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } button:focus { outline: none; } a { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } a:hover { text-decoration: none; color: #242B58; } table { width: 100%; } p, li, span { color: #242B58; margin-bottom: 0; } /* reset css end */ /* global css start */ .nice-select { background-color: transparent; height: 40px !important; line-height: 40px !important; min-height: 40px !important; padding: 0 30px; } .nice-select span { color: #242B58; } .nice-select .list { box-shadow: 0px -5px 26px -5px #cdd4e7; } .nice-select .list li { margin-right: 0 !important; } .nice-select .list .option { color: #242B58; } .nice-select .list .option.selected, .nice-select .list .option:hover { border: none !important; } /* global css end */ .bg_img { background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; } .grey-bg { background: #B0B0B2; } .white { color: #ffffff; } .f-right { float: right; } .height-50 { height: 40px; display: block; } .height-40 { height: 40px; display: block; } .height-35 { height: 35px; display: block; } .height-25 { height: 20px; display: block; } .pt-225 { padding-top: 225px; } .pt-240 { padding-top: 240px; } .pt-210 { padding-top: 210px; } .pt-232 { padding-top: 232px; } .psr { position: relative; } .site-btn { font-size: 14px; text-transform: capitalize; color: #ffffff; background: #6B84FF; padding: 8.5px 45px; display: inline-block; border-radius: 5px; border: 1px solid #6B84FF; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: 2; position: relative; font-family: "Josefin Sans", sans-serif; } @media (max-width: 767px) { .site-btn { padding: 7.5px 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .site-btn { padding: 8.5px 45px; } } .site-btn:hover { border-color: #6B84FF; background: transparent; color: #ffffff; } .site-btn__borderd { background: transparent; color: #B0B0B2; margin-left: 35px; } @media (max-width: 767px) { .site-btn__borderd { margin-left: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .site-btn__borderd { margin-left: 35px; } } .site-btn__borderd:hover { background: #6B84FF; } .section-heading { position: relative; } .section-heading h2 { font-size: 42px; line-height: 51px; display: inline-block; position: relative; padding-right: 15px; color: #242B58; text-transform: uppercase; } @media (max-width: 767px) { .section-heading h2 { font-size: 36px; line-height: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section-heading h2 { font-size: 42px; line-height: 51px; } } .section-heading h2::after { width: 160px; height: 100px; right: 0px; content: ""; position: absolute; bottom: 0px; background: #12152F; z-index: -1; } .section-heading__left h2 { padding-right: 0px; padding-left: 15px; } .section-heading__left h2::after { right: auto; left: 0px; } .inline-btn { font-size: 20px; color: #6B84FF; font-family: "Josefin Sans", sans-serif; position: relative; display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 767px) { .inline-btn { font-size: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .inline-btn { font-size: 20px; } } .inline-btn::after { position: absolute; content: ""; left: 0; width: 50px; height: 2px; background: #ffffff; left: -70px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 991px) { .inline-btn::after { left: auto; right: -70px; } } .inline-btn:hover { color: #6B84FF; } .inline-btn:hover::after { left: -65px; background: #6B84FF; } .side-shape { position: absolute; left: 0; top: -150px; } @media (max-width: 1650px) { .side-shape { left: -100px; } } .side-shape__right { left: auto; right: 0; top: -80px; } @media (max-width: 1650px) { .side-shape__right { right: -100px; } } .side-shape__contact { top: 200px; left: -95px; right: auto; } @media (max-width: 1650px) { .side-shape__contact { left: -125px; } } @media (max-width: 1300px) { .side-shape__contact { width: 170px; } } .side-shape__about { top: 290px; } @media (max-width: 767px) { .side-shape__about { width: 150px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .side-shape__about { width: 200px; } } /*-- - Margin & Padding -----------------------------------------*/ /*-- Margin Top --*/ .mt-none-5 { margin-top: -5px; } .mt-none-10 { margin-top: -10px; } .mt-none-15 { margin-top: -15px; } .mt-none-20 { margin-top: -20px; } .mt-none-25 { margin-top: -25px; } .mt-none-30 { margin-top: -30px; } .mt-none-35 { margin-top: -35px; } .mt-none-40 { margin-top: -40px; } .mt-none-45 { margin-top: -45px; } .mt-none-50 { margin-top: -50px; } .mt-none-55 { margin-top: -55px; } .mt-none-60 { margin-top: -60px; } .mt-none-65 { margin-top: -65px; } .mt-none-70 { margin-top: -70px; } .mt-none-75 { margin-top: -75px; } .mt-none-80 { margin-top: -80px; } .mt-none-85 { margin-top: -85px; } .mt-none-90 { margin-top: -90px; } .mt-none-95 { margin-top: -95px; } .mt-none-100 { margin-top: -100px; } /*-- Margin Top --*/ .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-85 { margin-top: 85px; } .mt-90 { margin-top: 90px; } .mt-95 { margin-top: 95px; } .mt-100 { margin-top: 100px; } .mt-105 { margin-top: 105px; } .mt-110 { margin-top: 110px; } .mt-115 { margin-top: 115px; } .mt-120 { margin-top: 120px; } .mt-125 { margin-top: 125px; } .mt-130 { margin-top: 130px; } .mt-135 { margin-top: 135px; } .mt-140 { margin-top: 140px; } .mt-145 { margin-top: 145px; } .mt-150 { margin-top: 150px; } .mt-155 { margin-top: 155px; } .mt-160 { margin-top: 160px; } .mt-165 { margin-top: 165px; } .mt-170 { margin-top: 170px; } .mt-175 { margin-top: 175px; } .mt-180 { margin-top: 180px; } .mt-185 { margin-top: 185px; } .mt-190 { margin-top: 190px; } .mt-195 { margin-top: 195px; } .mt-200 { margin-top: 200px; } /*-- Margin Bottom --*/ .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-85 { margin-bottom: 85px; } .mb-90 { margin-bottom: 90px; } .mb-95 { margin-bottom: 95px; } .mb-100 { margin-bottom: 100px; } .mb-105 { margin-bottom: 105px; } .mb-110 { margin-bottom: 110px; } .mb-115 { margin-bottom: 115px; } .mb-120 { margin-bottom: 120px; } .mb-125 { margin-bottom: 125px; } .mb-130 { margin-bottom: 130px; } .mb-135 { margin-bottom: 135px; } .mb-140 { margin-bottom: 140px; } .mb-145 { margin-bottom: 145px; } .mb-150 { margin-bottom: 150px; } .mb-155 { margin-bottom: 155px; } .mb-160 { margin-bottom: 160px; } .mb-165 { margin-bottom: 165px; } .mb-170 { margin-bottom: 170px; } .mb-175 { margin-bottom: 175px; } .mb-180 { margin-bottom: 180px; } .mb-185 { margin-bottom: 185px; } .mb-190 { margin-bottom: 190px; } .mb-195 { margin-bottom: 195px; } .mb-200 { margin-bottom: 200px; } /*-- Margin Left --*/ .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; } .ml-35 { margin-left: 35px; } .ml-40 { margin-left: 40px; } .ml-45 { margin-left: 45px; } .ml-50 { margin-left: 50px; } .ml-55 { margin-left: 55px; } .ml-60 { margin-left: 60px; } .ml-65 { margin-left: 65px; } .ml-70 { margin-left: 70px; } .ml-75 { margin-left: 75px; } .ml-80 { margin-left: 80px; } .ml-85 { margin-left: 85px; } .ml-90 { margin-left: 90px; } .ml-95 { margin-left: 95px; } .ml-100 { margin-left: 100px; } .ml-105 { margin-left: 105px; } .ml-110 { margin-left: 110px; } .ml-115 { margin-left: 115px; } .ml-120 { margin-left: 120px; } .ml-125 { margin-left: 125px; } .ml-130 { margin-left: 130px; } .ml-135 { margin-left: 135px; } .ml-140 { margin-left: 140px; } .ml-145 { margin-left: 145px; } .ml-150 { margin-left: 150px; } .ml-155 { margin-left: 155px; } .ml-160 { margin-left: 160px; } .ml-165 { margin-left: 165px; } .ml-170 { margin-left: 170px; } .ml-175 { margin-left: 175px; } .ml-180 { margin-left: 180px; } .ml-185 { margin-left: 185px; } .ml-190 { margin-left: 190px; } .ml-195 { margin-left: 195px; } .ml-200 { margin-left: 200px; } /*-- Margin Right --*/ .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; } .mr-30 { margin-right: 30px; } .mr-35 { margin-right: 35px; } .mr-40 { margin-right: 40px; } .mr-45 { margin-right: 45px; } .mr-50 { margin-right: 50px; } .mr-55 { margin-right: 55px; } .mr-60 { margin-right: 60px; } .mr-65 { margin-right: 65px; } .mr-70 { margin-right: 70px; } .mr-75 { margin-right: 75px; } .mr-80 { margin-right: 80px; } .mr-85 { margin-right: 85px; } .mr-90 { margin-right: 90px; } .mr-95 { margin-right: 95px; } .mr-100 { margin-right: 100px; } .mr-105 { margin-right: 105px; } .mr-110 { margin-right: 110px; } .mr-115 { margin-right: 115px; } .mr-120 { margin-right: 120px; } .mr-125 { margin-right: 125px; } .mr-130 { margin-right: 130px; } .mr-135 { margin-right: 135px; } .mr-140 { margin-right: 140px; } .mr-145 { margin-right: 145px; } .mr-150 { margin-right: 150px; } .mr-155 { margin-right: 155px; } .mr-160 { margin-right: 160px; } .mr-165 { margin-right: 165px; } .mr-170 { margin-right: 170px; } .mr-175 { margin-right: 175px; } .mr-180 { margin-right: 180px; } .mr-185 { margin-right: 185px; } .mr-190 { margin-right: 190px; } .mr-195 { margin-right: 195px; } .mr-200 { margin-right: 200px; } /*-- Padding Top --*/ .pt-5 { padding-top: 5px; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pt-25 { padding-top: 25px; } .pt-30 { padding-top: 30px; } .pt-35 { padding-top: 35px; } .pt-40 { padding-top: 40px; } .pt-45 { padding-top: 45px; } .pt-50 { padding-top: 50px; } .pt-55 { padding-top: 55px; } .pt-60 { padding-top: 60px; } .pt-65 { padding-top: 65px; } .pt-70 { padding-top: 70px; } .pt-75 { padding-top: 75px; } .pt-80 { padding-top: 80px; } .pt-85 { padding-top: 85px; } .pt-90 { padding-top: 90px; } .pt-95 { padding-top: 95px; } .pt-100 { padding-top: 100px; } .pt-105 { padding-top: 105px; } .pt-110 { padding-top: 110px; } .pt-115 { padding-top: 115px; } .pt-120 { padding-top: 120px; } .pt-125 { padding-top: 125px; } .pt-130 { padding-top: 130px; } .pt-135 { padding-top: 135px; } .pt-140 { padding-top: 140px; } .pt-145 { padding-top: 145px; } .pt-150 { padding-top: 150px; } .pt-155 { padding-top: 155px; } .pt-160 { padding-top: 160px; } .pt-165 { padding-top: 165px; } .pt-170 { padding-top: 170px; } .pt-175 { padding-top: 175px; } .pt-180 { padding-top: 180px; } .pt-185 { padding-top: 185px; } .pt-190 { padding-top: 190px; } .pt-195 { padding-top: 195px; } .pt-200 { padding-top: 200px; } /*-- Padding Bottom --*/ .pb-5 { padding-bottom: 5px; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pb-25 { padding-bottom: 25px; } .pb-30 { padding-bottom: 30px; } .pb-35 { padding-bottom: 35px; } .pb-40 { padding-bottom: 40px; } .pb-45 { padding-bottom: 45px; } .pb-50 { padding-bottom: 50px; } .pb-55 { padding-bottom: 55px; } .pb-60 { padding-bottom: 60px; } .pb-65 { padding-bottom: 65px; } .pb-70 { padding-bottom: 70px; } .pb-75 { padding-bottom: 75px; } .pb-80 { padding-bottom: 80px; } .pb-85 { padding-bottom: 85px; } .pb-90 { padding-bottom: 90px; } .pb-95 { padding-bottom: 95px; } .pb-100 { padding-bottom: 100px; } .pb-105 { padding-bottom: 105px; } .pb-110 { padding-bottom: 110px; } .pb-115 { padding-bottom: 115px; } .pb-120 { padding-bottom: 120px; } .pb-125 { padding-bottom: 125px; } .pb-130 { padding-bottom: 130px; } .pb-135 { padding-bottom: 135px; } .pb-140 { padding-bottom: 140px; } .pb-145 { padding-bottom: 145px; } .pb-150 { padding-bottom: 150px; } .pb-155 { padding-bottom: 155px; } .pb-160 { padding-bottom: 160px; } .pb-165 { padding-bottom: 165px; } .pb-170 { padding-bottom: 170px; } .pb-175 { padding-bottom: 175px; } .pb-180 { padding-bottom: 180px; } .pb-185 { padding-bottom: 185px; } .pb-190 { padding-bottom: 190px; } .pb-195 { padding-bottom: 195px; } .pb-200 { padding-bottom: 200px; } /*-- Padding Left --*/ .pl-5 { padding-left: 5px; } .pl-10 { padding-left: 10px; } .pl-15 { padding-left: 15px; } .pl-20 { padding-left: 20px; } .pl-25 { padding-left: 25px; } .pl-30 { padding-left: 30px; } .pl-35 { padding-left: 35px; } .pl-40 { padding-left: 40px; } .pl-45 { padding-left: 45px; } .pl-50 { padding-left: 50px; } .pl-55 { padding-left: 55px; } .pl-60 { padding-left: 60px; } .pl-65 { padding-left: 65px; } .pl-70 { padding-left: 70px; } .pl-75 { padding-left: 75px; } .pl-80 { padding-left: 80px; } .pl-85 { padding-left: 85px; } .pl-90 { padding-left: 90px; } .pl-95 { padding-left: 95px; } .pl-100 { padding-left: 100px; } .pl-105 { padding-left: 105px; } .pl-110 { padding-left: 110px; } .pl-115 { padding-left: 115px; } .pl-120 { padding-left: 120px; } .pl-125 { padding-left: 125px; } .pl-130 { padding-left: 130px; } .pl-135 { padding-left: 135px; } .pl-140 { padding-left: 140px; } .pl-145 { padding-left: 145px; } .pl-150 { padding-left: 150px; } .pl-155 { padding-left: 155px; } .pl-160 { padding-left: 160px; } .pl-165 { padding-left: 165px; } .pl-170 { padding-left: 170px; } .pl-175 { padding-left: 175px; } .pl-180 { padding-left: 180px; } .pl-185 { padding-left: 185px; } .pl-190 { padding-left: 190px; } .pl-195 { padding-left: 195px; } .pl-200 { padding-left: 200px; } /*-- Padding Right --*/ .pr-5 { padding-right: 5px; } .pr-10 { padding-right: 10px; } .pr-15 { padding-right: 15px; } .pr-20 { padding-right: 20px; } .pr-25 { padding-right: 25px; } .pr-30 { padding-right: 30px; } .pr-35 { padding-right: 35px; } .pr-40 { padding-right: 40px; } .pr-45 { padding-right: 45px; } .pr-50 { padding-right: 50px; } .pr-55 { padding-right: 55px; } .pr-60 { padding-right: 60px; } .pr-65 { padding-right: 65px; } .pr-70 { padding-right: 70px; } .pr-75 { padding-right: 75px; } .pr-80 { padding-right: 80px; } .pr-85 { padding-right: 85px; } .pr-90 { padding-right: 90px; } .pr-95 { padding-right: 95px; } .pr-100 { padding-right: 100px; } .pr-105 { padding-right: 105px; } .pr-110 { padding-right: 110px; } .pr-115 { padding-right: 115px; } .pr-120 { padding-right: 120px; } .pr-125 { padding-right: 125px; } .pr-130 { padding-right: 130px; } .pr-135 { padding-right: 135px; } .pr-140 { padding-right: 140px; } .pr-145 { padding-right: 145px; } .pr-150 { padding-right: 150px; } .pr-155 { padding-right: 155px; } .pr-160 { padding-right: 160px; } .pr-165 { padding-right: 165px; } .pr-170 { padding-right: 170px; } .pr-175 { padding-right: 175px; } .pr-180 { padding-right: 180px; } .pr-185 { padding-right: 185px; } .pr-190 { padding-right: 190px; } .pr-195 { padding-right: 195px; } .pr-200 { padding-right: 200px; } /* typography css start */ h1, h2, h3, h4, h5, h6 { font-weight: 700; color: #242B58; margin: 0; line-height: 1.4; font-family: "Josefin Sans", sans-serif; } h2 { font-size: 32px; } h3 { font-size: 22px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 16px; } /* typography css end */ /*-- - Overlay ------------------------------------------*/ [data-overlay] { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center; } [data-overlay]::before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ""; width: 100%; height: 100%; } /*-- Overlay Color --*/ [data-overlay=light]::before { background-color: #ffffff; } [data-overlay=dark]::before { background-color: #242B58; } /*-- Overlay Opacity --*/ [data-opacity="1"]::before { opacity: 0.1; } [data-opacity="2"]::before { opacity: 0.2; } [data-opacity="3"]::before { opacity: 0.3; } [data-opacity="4"]::before { opacity: 0.4; } [data-opacity="5"]::before { opacity: 0.5; } [data-opacity="6"]::before { opacity: 0.6; } [data-opacity="7"]::before { opacity: 0.7; } [data-opacity="8"]::before { opacity: 0.8; } [data-opacity="9"]::before { opacity: 0.9; } /* Heder css start*/ .site-header { margin-top: 15px; padding: 25px 0px; position: absolute; width: 100%; z-index: 2; } /* Navigation css */ .menu-area { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .menu-area .site-btn { margin-left: 40px; } @media (max-width: 991px) { .menu-area .site-btn { margin-left: 0px; margin-right: 80px; } } @media (max-width: 767px) { .menu-area .site-btn { margin-right: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .menu-area .site-btn { margin-right: 80px; } } .main-menu ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-end; } .main-menu ul li a { color: #ffffff; text-transform: uppercase; padding: 9px 20px; display: block; font-family: "Josefin Sans", sans-serif; } .main-menu ul li a:hover { color: #6B84FF; } .mean-container a.meanmenu-reveal { margin-top: -48px; width: 48px; height: 48px; color: #6B84FF; border-color: #6B84FF; } .mean-container a.meanmenu-reveal span { background: #6B84FF; } /* form css start */ label { font-size: fsize("14px"); } input:not([type=radio]), textarea { padding: 10px 20px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; background-color: transparent; font-size: fsize("14px") !important; } input:not([type=radio])::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #c9c9c9 !important; opacity: 1; } input:not([type=radio])::-moz-placeholder, textarea::-moz-placeholder { color: #c9c9c9 !important; opacity: 1; } input:not([type=radio]):-ms-input-placeholder, textarea:-ms-input-placeholder { color: #c9c9c9 !important; opacity: 1; } input:not([type=radio]):-moz-placeholder, textarea:-moz-placeholder { color: #c9c9c9 !important; opacity: 1; } select { padding: 8px 10px; cursor: pointer; color: #242B58; background-color: transparent; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } textarea { min-height: 100px; width: 100%; } textarea.resize--none { resize: none; } input[type=radio], input[type=range], input[type=checkbox] { height: auto !important; padding: 0; } input.form-control { height: 38px; } input.form-control-xl { height: calc(2rem + 1rem + 2px); font-size: fsize("18px") !important; } input.form-control-lg { height: calc(1.8rem + 1rem + 2px); font-size: fsize("16px") !important; } input.form-control-sm { height: calc(1rem + 1rem + 2px); font-size: fsize("13px") !important; } .label--text { font-size: fsize("14px"); margin-bottom: 0.5rem; } .select2-container { width: 100% !important; } .select2-container .select2-selection--single { height: 34px; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; } /* form css end */ /* hero area css*/ .hero-area { position: relative; overflow: hidden; } .hero-area .shape { position: absolute; } .hero-area .shape__left-top { left: -80px; top: -130px; } @media (max-width: 1650px) { .hero-area .shape__left-top { left: -145px; top: -190px; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-area .shape__left-top { left: -35px; top: -40px; width: 125px; } } @media (max-width: 1199px) { .hero-area .shape__left-top { left: -60px; top: -50px; width: 125px; } } .hero-area .shape__left-bottom { bottom: 0; left: 220px; } @media (max-width: 1650px) { .hero-area .shape__left-bottom { left: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-area .shape__left-bottom { left: 50px; width: 135px; } } @media (max-width: 1199px) { .hero-area .shape__left-bottom { left: 10px; width: 100px; } } @media (max-width: 991px) { .hero-area .shape__left-bottom { bottom: 80px; } } .hero-area .shape__right-bottom { right: 400px; bottom: 0px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-area .shape__right-bottom { right: 265px; bottom: 0px; width: 250px; } } @media (max-width: 1199px) { .hero-area .shape__right-bottom { right: 150px; bottom: 0px; width: 200px; } } @media (max-width: 991px) { .hero-area .shape__right-bottom { display: none; } } .hero-area .hero-avater { margin-top: 330px; } @media (max-width: 1199px) { .hero-area .hero-avater { margin-top: 300px; } } @media (max-width: 991px) { .hero-area .hero-avater { display: none; } } .hero-area .hero-avater img { max-width: inherit; -webkit-transform: translateX(-145px); -ms-transform: translateX(-145px); transform: translateX(-145px); } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .hero-area .hero-avater img { max-width: 480px; transform: translateX(-120px); } } @media (max-width: 1300px) { .hero-area .hero-avater img { transform: translateX(-175px); } } @media (max-width: 1199px) { .hero-area .hero-avater img { transform: translateX(-245px); max-width: 470px; } } .hero-area .social-links { flex-direction: column; position: absolute; right: 40px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 767px) { .hero-area .social-links { right: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-area .social-links { right: 40px; } } .hero-area .social-links a { margin-right: 0px; position: relative; } .hero-area .social-links a::after { position: absolute; right: -60px; width: 60px; height: 2px; content: ""; border: 2px dashed #6B84FF; z-index: -1; } @media (max-width: 767px) { .hero-area .social-links a::after { right: -30px; width: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-area .social-links a::after { right: -60px; width: 60px; } } .hero-area .social-links a:not(:last-child) { margin-bottom: 15px; } .hero-content { position: relative; margin-top: 30px; margin-bottom: 25px; } .hero-content .shape { right: 0; top: -45px; } .hero-content h4 { position: relative; font-size: 24px; font-weight: 600; color: #ffffff; padding-left: 65px; line-height: 29px; } @media (max-width: 1199px) { .hero-content h4 { font-size: 18px; line-height: 23px; } } @media (max-width: 767px) { .hero-content h4 { font-size: 16px; line-height: 21px; } } .hero-content h4::after { width: 50px; height: 2px; background: #6B84FF; left: 0px; top: 50%; -webkit-transition: translateY(-50%); -o-transition: translateY(-50%); transition: translateY(-50%); content: ""; position: absolute; } .hero-content h1 { margin-top: 20px; font-size: 82px; line-height: 99px; font-weight: 700; color: #ffffff; margin-bottom: 30px; position: relative; z-index: 2; } @media (max-width: 1650px) { .hero-content h1 { font-size: 70px; line-height: 87px; } } @media (max-width: 1199px) { .hero-content h1 { font-size: 45px; line-height: 62px; } } @media (max-width: 767px) { .hero-content h1 { font-size: 30px; line-height: 47px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-content h1 { font-size: 45px; line-height: 62px; } } .hero-content h1 span { font-weight: 300; display: block; color: #ffffff; } .hero-content p { color: #B0B0B2; line-height: 24px; } .hero-content .hero-btns { margin-top: 55px; } .social-links { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .social-links a { width: 35px; height: 35px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: center; color: #242B58; font-size: 14px; background: #ffffff; border-radius: 50%; } .social-links a:not(:last-child) { margin-right: 15px; } @media (max-width: 1650px) { .social-links a:not(:last-child) { margin-right: 0px; } } .social-links a:hover { color: #ffffff; background: #6B84FF; } /* About css */ .about-area { position: relative; padding-top: 40px; } .about-content h6 { color: #ffffff; font-size: 14px; font-weight: 400; line-height: 24px; margin-bottom: 10px; } .about-content h2 { color: #ffffff; font-size: 28px; } .about-content p { color: #B0B0B2; line-height: 24px; } /* skill cass */ .skill-wrap { overflow: hidden; } .skill__box h6 { font-size: 14px; color: #E2E2E3; font-weight: 400; margin-bottom: 15px; } .skill__box .progress { height: 10px; border-radius: 5px; background: #1B2044; overflow: visible; } .skill__box .progress .progress-bar { background: #6B84FF; border-radius: 5px; } .skill__box .progress .progress-bar span { color: #E2E2E3; margin-top: -60px; text-align: right; z-index: 2; } /* service css*/ .service-area { position: relative; } @media (max-width: 991px) { .service-area .text-right { text-align: left !important; } } @media (max-width: 991px) { .service-area .text-right .inline-btn { -webkit-transform: translateY(-60px); -ms-transform: translateY(-60px); transform: translateY(-60px); } } .service-area .shape { position: absolute; } .service-area .shape__right-bottom { right: -8%; bottom: -15%; width: 250px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .service-area .shape__right-bottom { right: -2%; bottom: -12%; width: 200px; } } @media (max-width: 1260px) { .service-area .shape__right-bottom { right: 0%; } } @media (max-width: 1199px) { .service-area .shape__right-bottom { width: 150px; bottom: -5%; } } @media (max-width: 991px) { .service-area .shape__right-bottom { width: 150px; bottom: -3%; } } .service-shape { position: absolute; right: -115px; top: -180px; } @media (max-width: 1650px) { .service-shape { right: -40px; } } @media (max-width: 1300px) { .service-shape { right: -15px; width: 160px; } } .service-item { background: #12152F; padding: 50px 30px 70px 30px; border-radius: 10px; backface-visibility: hidden; z-index: 2; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .service-item__icon { display: inline-block; } .service-item h2 { font-size: 28px; color: #6B84FF; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .service-item p { color: #B0B0B2; } .service-item:hover { -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); background: #242B58; } .service-item:hover h2 { color: #ffffff; } /* work css */ .service-shape__left { right: auto; left: -20px; } .work-area { position: relative; } .work-area .shape { position: absolute; } .work-area .shape__right-bottom { right: -8%; bottom: -5%; width: 200px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .work-area .shape__right-bottom { right: -2%; bottom: -12%; width: 200px; } } @media (max-width: 1260px) { .work-area .shape__right-bottom { right: 0%; } } @media (max-width: 1199px) { .work-area .shape__right-bottom { width: 150px; bottom: -5%; } } @media (max-width: 991px) { .work-area .shape__right-bottom { width: 150px; bottom: -1%; } } .work-top { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; justify-content: space-between; } @media (max-width: 991px) { .work-top { flex-direction: column; justify-content: flex-start; align-items: flex-start; } } @media (max-width: 767px) { .work-top { flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-top: -20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .work-top { margin-top: 0px; } } .work-top ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .work-top ul li { padding: 7px 20px; display: block; border-radius: 5px; color: #ffffff; background: #242B58; font-size: 14px; font-family: "Josefin Sans", sans-serif; cursor: pointer; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media (max-width: 767px) { .work-top ul li { margin-top: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .work-top ul li { margin-top: 0px; } } .work-top ul li:not(:last-child) { margin-right: 30px; } .work-top ul li:hover { color: #6B84FF; } .work-top ul .active { color: #6B84FF; } @media (max-width: 991px) { .work-top .inline-btn { margin-top: 50px; } } .work-item .thumb { overflow: hidden; border-radius: 10px; } .work-item .thumb img { width: 100%; border-radius: 10px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .work-item .content h3 { color: #ffffff; font-size: 24px; margin-bottom: 0px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .work-item .content span { position: relative; display: inline-block; padding-left: 40px; color: #B0B0B2; font-size: 14px; font-family: "Josefin Sans", sans-serif; } .work-item .content span::after { background: #ffffff; position: absolute; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; width: 30px; height: 2px; content: ""; } .work-item:hover .thumb img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .work-item:hover h3 { color: #6B84FF; } /* testimonial css */ .testimonial { background: #12152F; padding: 50px 65px 50px 65px; border-radius: 10px; position: relative; z-index: inherit; } @media (max-width: 1300px) { .testimonial { margin-left: -25px; } } @media (max-width: 1199px) { .testimonial { margin-left: 0px; } } @media (max-width: 767px) { .testimonial { padding: 30px 20px 30px 20px; width: calc(100% - 30px); margin-left: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonial { padding: 50px 65px 50px 65px; width: calc(100% - 00px); margin-left: 0px; } } .testimonial::after { position: absolute; right: -30px; bottom: -30px; content: ""; border: 1px dashed #6B84FF; width: 100%; height: 100%; z-index: -1; border-radius: 10px; } @media (max-width: 767px) { .testimonial::after { right: -10px; bottom: -10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonial::after { right: -30px; bottom: -30px; } } .testimonial::before { bottom: 80px; left: -15px; border-top: 15px solid transparent; border-right: 20px solid #12152F; border-bottom: 15px solid transparent; content: ""; position: absolute; } .testimonial__item { text-align: right; } .testimonial__item p { text-align: left; color: #B0B0B2; } .testimonial__bottom { margin-top: 50px; display: inline-block; text-align: left; } .testimonial__bottom h4 { position: relative; font-size: 20px; color: #ffffff; z-index: 1; margin-bottom: 0px; line-height: 24px; } .testimonial__bottom h4::after { position: absolute; content: ""; width: 95px; height: 20px; left: -30px; background: #242b58; z-index: -1; top: -5px; } .testimonial__bottom span { font-size: 12px; font-family: "Open Sans", sans-serif; font-style: italic; color: #6B84FF; text-transform: capitalize; margin-bottom: -5px; display: block; } .testimonial-area { position: relative; overflow: hidden; } @media (max-width: 1199px) { .testimonial-area { padding-bottom: 40px; } } @media (max-width: 1199px) { .testimonial-shape { margin-bottom: 80px; text-align: center; } } /* brand css */ @media (max-width: 1199px) { .brand-area { margin-top: 180px; } } .brand-area .shape { position: absolute; top: -160px; left: 30px; } @media (max-width: 767px) { .brand-area .shape { width: 200px; } } .brand__item { background: #242B58; min-height: 150px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; justify-content: center; border-radius: 10px; } .brand__item img { width: auto !important; } /* blog css */ .blog-area { position: relative; } .blog-area__single-page .side-shape { right: 0; bottom: -50px; position: absolute; left: auto; top: auto; } @media (max-width: 767px) { .blog-area__single-page .side-shape { display: none; } } .blog-item { background: #12152F; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; backface-visibility: hidden; border-radius: 10px; } .blog-item .thumb { border-radius: 10px 10px 20px 20px; overflow: hidden; } .blog-item .thumb img { border-radius: 10px 10px 20px 20px; width: 100%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .blog-item__meta { margin-top: 30px; padding-left: 15px; padding-right: 15px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center; } .blog-item__meta span { font-size: 12px; } .blog-item__meta .author { color: #ffffff; } .blog-item__meta .date { color: #6B84FF; position: relative; } .blog-item__meta .date::after { position: absolute; width: 30px; height: 2px; left: -40px; background: #ffffff; content: ""; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .blog-item__meta--2 { justify-content: center; margin-top: 35px; } .blog-item__meta--2 .author { padding-right: 90px; } @media (max-width: 767px) { .blog-item__meta--2 .author { padding-right: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-item__meta--2 .author { padding-right: 80px; } } .blog-item__content { padding-left: 15px; padding-right: 15px; text-align: center; padding-bottom: 30px; } .blog-item__content p { color: #B0B0B2; font-family: "Josefin Sans", sans-serif; } .blog-item__content .read-more { font-family: "Josefin Sans", sans-serif; font-size: 14px; color: #6B84FF; display: inline-block; margin-top: 20px; } .blog-item__content--2 { padding-left: 60px; padding-right: 60px; padding-bottom: 35px; } @media (max-width: 767px) { .blog-item__content--2 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-item__content--2 { padding-left: 45px; padding-right: 45px; } } .blog-item__content--single-page { padding-left: 70px; padding-right: 70px; padding-bottom: 0px; } @media (max-width: 767px) { .blog-item__content--single-page { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-item__content--single-page { padding-left: 50px; padding-right: 50px; } } .blog-item__content--single-page p { font-size: 14px; } .blog-item__content--single-page blockquote { position: relative; font-size: 15px; font-family: "Open Sans", sans-serif; line-height: 30px; font-weight: 500; font-style: italic; color: #ffffff; margin-bottom: 0px; } .blog-item__content--single-page blockquote::after, .blog-item__content--single-page blockquote::before { position: absolute; left: -35px; top: -5px; font-family: "Font Awesome 5 Pro"; content: ""; font-style: normal; color: #12152F; font-size: 80px; z-index: -1; font-weight: 700; } @media (max-width: 767px) { .blog-item__content--single-page blockquote::after, .blog-item__content--single-page blockquote::before { left: -15px; font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-item__content--single-page blockquote::after, .blog-item__content--single-page blockquote::before { left: -25px; font-size: 65px; } } .blog-item__content--single-page blockquote::before { left: auto; top: auto; right: -35px; bottom: -5px; content: ""; } @media (max-width: 767px) { .blog-item__content--single-page blockquote::before { right: -15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-item__content--single-page blockquote::before { right: -25px; } } .blog-item__title { text-align: center; margin-top: 25px; margin-bottom: 10px; } .blog-item__title a { font-size: 20px; color: #ffffff; font-weight: 600; font-family: "Josefin Sans", sans-serif; line-height: 30px; } .blog-item__title--2 { font-size: 28px; color: #ffffff; } @media (max-width: 767px) { .blog-item__title--2 { font-size: 20px; line-height: 26px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-item__title--2 { font-size: 26px; line-height: 32px; } } .blog-item__title--2 a { font-size: 28px; line-height: 34px; } @media (max-width: 767px) { .blog-item__title--2 a { font-size: 20px; line-height: 26px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-item__title--2 a { font-size: 26px; line-height: 32px; } } .blog-item:hover { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } .blog-item:hover a { color: #6B84FF; } .blog-item__2 .thumb { max-height: 525px; } .blog-item__single-page { background: transparent; } .blog-item__single-page:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } /* contact css */ .contact-area { position: relative; overflow: hidden; } .contact-form, .comment-form { padding-right: 70px; } @media (max-width: 991px) { .contact-form, .comment-form { padding-right: 0px; } } .contact-form input, .contact-form textarea, .comment-form input, .comment-form textarea { padding-left: 0px; padding-top: 0px; padding-bottom: 9px; border: none; border-bottom: 2px solid #12152F; width: 100%; font-family: "Josefin Sans", sans-serif; color: #707070; font-size: 14px; border-radius: 0px; } .contact-form input::-webkit-input-placeholder, .contact-form textarea::-webkit-input-placeholder, .comment-form input::-webkit-input-placeholder, .comment-form textarea::-webkit-input-placeholder { color: #707070 !important; opacity: 1; } .contact-form input::-moz-placeholder, .contact-form textarea::-moz-placeholder, .comment-form input::-moz-placeholder, .comment-form textarea::-moz-placeholder { color: #707070 !important; opacity: 1; } .contact-form input:-ms-input-placeholder, .contact-form textarea:-ms-input-placeholder, .comment-form input:-ms-input-placeholder, .comment-form textarea:-ms-input-placeholder { color: #707070 !important; opacity: 1; } .contact-form input:-moz-placeholder, .contact-form textarea:-moz-placeholder, .comment-form input:-moz-placeholder, .comment-form textarea:-moz-placeholder { color: #707070 !important; opacity: 1; } .contact-form textarea, .comment-form textarea { min-height: 70px; } .contact-form .site-btn, .comment-form .site-btn { padding: 8.5px 30px; } .contact-form__2, .comment-form__2 { padding-top: 90px; } @media (max-width: 1199px) { .contact-shape { margin-bottom: 100px; text-align: center; } } /* breadcrumb css */ .breadcrumb-area { background: #12152F; padding-top: 220px; position: relative; padding-bottom: 108px; } .breadcrumb-area .shape { position: absolute; } .breadcrumb-area .shape__left-top { left: 70px; z-index: -1; width: 300px; bottom: -180px; } @media (max-width: 1199px) { .breadcrumb-area .shape__left-top { left: 20px; z-index: -1; width: 150px; bottom: -80px; } } @media (max-width: 767px) { .breadcrumb-area .shape__left-top { left: 10px; z-index: -1; width: 80px; bottom: -50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb-area .shape__left-top { left: 20px; z-index: -1; width: 150px; bottom: -80px; } } .breadcrumb-area .shape__right-bottom { right: 95px; bottom: -98px; } @media (max-width: 1199px) { .breadcrumb-area .shape__right-bottom { right: 20px; bottom: -55px; width: 300px; } } @media (max-width: 767px) { .breadcrumb-area .shape__right-bottom { right: 10px; bottom: -40px; width: 170px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb-area .shape__right-bottom { right: 20px; bottom: -55px; width: 300px; } } .breadcrumb-nav { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: center; } .breadcrumb-nav li { font-size: 60px; font-family: "Josefin Sans", sans-serif; font-weight: 700; color: #ffffff; line-height: 72px; } @media (max-width: 767px) { .breadcrumb-nav li { font-size: 26px; line-height: 38px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb-nav li { font-size: 36px; line-height: 48px; } } .breadcrumb-nav li:not(:last-child) { margin-right: 25px; } @media (max-width: 767px) { .breadcrumb-nav li:not(:last-child) { margin-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb-nav li:not(:last-child) { margin-right: 20px; } } .breadcrumb-nav li a { font-family: "Josefin Sans", sans-serif; color: #242B58; } /* cta css */ .cta-area { position: relative; } .cta-area .shape { position: absolute; top: -160px; left: 30px; } @media (max-width: 767px) { .cta-area .shape { width: 200px; } } .cta-wrap { background: #12152F; padding: 50px; padding-bottom: 55px; border-radius: 10px; } @media (max-width: 767px) { .cta-wrap { padding: 20px; padding-bottom: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .cta-wrap { padding: 50px; padding-bottom: 55px; } } .cta-wrap h2 { color: #ffffff; font-size: 42px; line-height: 54px; padding-right: 150px; } @media (max-width: 991px) { .cta-wrap h2 { padding-right: 50px; } } @media (max-width: 767px) { .cta-wrap h2 { padding-right: 0px; font-size: 26px; line-height: 38px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .cta-wrap h2 { padding-right: 0px; font-size: 36px; line-height: 48px; } } .cta-wrap p { color: #B0B0B2; } .cta-wrap .inline-btn { margin-right: 100px; } @media (max-width: 1199px) { .cta-wrap .text-right { text-align: left !important; margin-top: 30px; } } /* contact page css */ .contact-info-head { padding-right: 70px; } @media (max-width: 991px) { .contact-info-head { padding-right: 0px; } } .contact-info-head span { font-size: 14px; font-family: "Josefin Sans", sans-serif; color: #ffffff; background: #6B84FF; display: inline-block; padding: 3px 21px; margin-bottom: 20px; } .contact-info-head h2 { font-size: 42px; line-height: 51px; color: #ffffff; text-transform: uppercase; margin-bottom: 20px; } @media (max-width: 767px) { .contact-info-head h2 { font-size: 32px; line-height: 41px; } } .contact-info-head p { font-size: 14px; font-family: "Josefin Sans", sans-serif; color: #B0B0B2; } .contact-info__item h5 { color: #ffffff; font-size: 20px; margin-bottom: 10px; } .contact-info__item ul li { color: #B0B0B2; font-size: 14px; font-family: "Josefin Sans", sans-serif; } .contact-info__item ul li a { display: block; color: #B0B0B2; } /* blog page css */ .blog-wrap { padding: 0px 25px; } .blog-wrap .blog-item::after { height: 1px; width: calc(100% - 200px); position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); content: ""; background: #1B2044; bottom: -60px; } @media (max-width: 767px) { .blog-wrap .blog-item::after { width: calc(100% - 100px); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-wrap .blog-item::after { width: calc(100% - 150px); } } .blog-wrap .col-xl-12:last-child .blog-item::after { display: none; } .blog-nav { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: center; } .blog-nav li { font-family: "Josefin Sans", sans-serif; font-size: 28px; line-height: 34px; } @media (max-width: 767px) { .blog-nav li { font-size: 24px; line-height: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-nav li { font-size: 28px; line-height: 34px; } } .blog-nav li:not(:last-child) { margin-right: 15px; } .blog-nav li a { color: #1B2044; font-weight: 700; } .blog-nav li a:hover { color: #6B84FF; } .blog-nav li .active { color: #6B84FF; } .blog-nav li i { -webkit-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px); } /* single blog page css */ .author-box { background: #12152F; padding: 35px 85px; border-radius: 10px; border: 2px solid #1B2044; } @media (max-width: 767px) { .author-box { padding: 35px 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .author-box { padding: 35px 45px; } } .author-box .thumb { margin-bottom: 12px; } .author-box .thumb img { border-radius: 50%; } .author-box .name { font-size: 14px; color: #ffffff; font-weight: 700; margin-bottom: 0px; } .author-box .designation { color: #707070; font-family: "Josefin Sans", sans-serif; margin-top: -4px; margin-bottom: 2px; } .author-box p { color: #B0B0B2; font-family: "Josefin Sans", sans-serif; } /* comment css */ .comment-wrap .title { font-size: 28px; line-height: 34px; position: relative; color: #ffffff; margin-bottom: 45px; margin-left: 10px; } .comment-wrap .title::after { height: 50px; width: 50px; bottom: -5px; content: ""; position: absolute; left: -10px; background: #1B2044; z-index: -1; } .comment-lists li { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: flex-start; } .comment-lists li .thumb { flex: 0 0 60px; -ms-flex: 0 0 60px; max-width: 60px; border: 2px solid #1B2044; border-radius: 50%; } .comment-lists li .thumb img { border-radius: 50%; } .comment-lists li .content { padding-left: 23px; flex: 0 0 90%; -ms-flex: 0 0 90%; max-width: 90%; } @media (max-width: 767px) { .comment-lists li .content { flex: 0 0 100%; -ms-flex: 0 0 100%; max-width: 100%; padding-left: 0px; padding-top: 25px; } } .comment-lists li .content p { font-family: "Josefin Sans", sans-serif; color: #B0B0B2; } .comment-lists li .content .view-reply { color: #B0B0B2; font-size: 12px; font-family: "Josefin Sans", sans-serif; } .comment-lists li .content .view-reply i { color: #707070; padding-right: 5px; } .comment-lists li .name-hour { margin-bottom: 5px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: flex-end; } .comment-lists li .name-hour .name { padding-right: 25px; font-size: 20px; color: #ffffff; } .comment-lists li .name-hour span { color: #707070; font-size: 14px; font-family: "Josefin Sans", sans-serif; } .comment-lists li:not(:last-child) { margin-bottom: 35px; } .comment-lists li ul li { padding-left: 80px; margin-top: 35px; } .comment-form textarea { min-height: 100px; } /*Footer css*/ .site-footer { border-top: 1px solid #1B2044; padding: 30px 0px; } @media (max-width: 767px) { .site-footer .social-links { justify-content: center; } } .site-footer .social-links a:not(:last-child) { margin-right: 15px; } @media (max-width: 767px) { .copyright-text { text-align: center; margin-top: 20px; } } .copyright-text p { color: #B0B0B2; } /*# sourceMappingURL=style.css.map */