/*：源代码唯一下载地址: https://www.99ziyuan.net*//*------------------------------------------------------------------  * Name: Sumex  * 更多模板请访问：https://www.99ziyuan.net/-------------------------------------------------------------------*//*------------------------------------------------------------------[CSS Table of contents]        1. Default CSS        2. Header Navigation Section        3. Hero Section        4. About Section        5. Service Section        6. Skill Section        7. Portfolio Section        8. Price Section        9. Testimonial Section        10. Blog Section        11. Contact form Section        12. Footer Navigation Section        13. Footer Copyright Section        14. BreadCum Section - Portfolio Page        15. Portfolio Info Section        16. Portfilo Details Section        17. Portfolio Features Section        18. Portfilo Service Section        19. Portfolio Competitor Analysis Section        20. Post Namvigation CSS        21. BreadCum Section - Blog Page        22. Blog Details Section        23. Blog Post Section        24. Blog Quote Section        25. Blog Video Section        26. Blog Post Like Section        27. Blog Commnet Section-------------------------------------------------------------------*//*:::::::::::::::::::::::::::::::::::::::::: 1. Default CSS::::::::::::::::::::::::::::::::::::::::::*//* Google Web Fonts */@import url('css-Muli200200i300300i400400i600600i700700i800800i900900i7CRubik300300i400400i500500i700700i900900i_swap.css');/* CSS Start */html {    -webkit-box-sizing: inherit;    box-sizing: inherit;}body {    -webkit-box-sizing: border-box;    box-sizing: border-box;    font-size: 16px;    font-family: 'Muli', sans-serif;    font-weight: 400;    line-height: 1.6;}h1,h2,h3,h4,h5,h6 {    font-family: 'Rubik', sans-serif;    color: #212121;}p {    color: #333333;    line-height: 28px;}section {    position: relative;}button {    outline: none !important;}a {    font-family: 'Rubik', sans-serif !important;    text-decoration: none !important;    outline: none !important;}.section-padding {    padding-top: 113.5px;    padding-bottom: 119px;}.box-btn {    padding: 11.5px 30px;    cursor: pointer;    display: inline-block;    position: relative;}.blue-box {    border: 1px solid #000000;    background: #000000;    color: #fff;    z-index: 1;}.blue-box:hover {    color: #000000;}.blue-box::after {    position: absolute;    content: "";    border: 1px solid #000000;    background-color: #fff;    top: 0;    right: 0;    width: 0%;    height: 100%;    transition: width .5s ease;    z-index: -1;}.blue-box:hover::after {    left: 0;    width: 100%;}.white-box {    border: 1px solid #fff;    background: #fff;    color: #212121;    z-index: 1;}.white-box:hover {    color: #fff}.white-box::after {    position: absolute;    content: "";    background-color: #000000;    bottom: 0;    right: -1%;    width: 0%;    height: 100%;    transition: width .5s ease;    z-index: -1;}.white-box:hover::after {    width: 100%;    left: 0;    color: #fff;    border: 1px solid #000000;}/*:::::::::::::::::::::::::::::::::::::::::: 2. Header Navigation Section::::::::::::::::::::::::::::::::::::::::::*/#navigation-section {    background: #000000;    padding: 35px 0;    font-family: 'Rubik', sans-serif;    transition: .5s linear;}.header--fixed {    position: sticky;    right: 0;    left: 0;    top: 0;    z-index: 9999999999;}.headroom--unpinned {    transform: translateY(0%);}.headroom--pinned {    transform: translateY(0%);}#navigation-section.headroom--not-top {    padding: 15px 0 !important;}.navigation ul {    display: flex;    flex-direction: row;    justify-content: space-between;    align-items: center;    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);}.navigation ul li {    display: inline-block;}.navigation ul li a {    color: #fff;    position: relative;}.navigation ul li a::after {    position: absolute;    left: 50%;    right: 51%;    height: 3px;    bottom: -7px;    content: "";    background-color: #ffffff;    transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);}.navigation ul li a:hover::after {    left: 0;    right: 0;}.navigation ul li.current a::after {    content: "";    position: absolute;    left: 0%;    right: 0%;    height: 3px;    bottom: -7px;    background-color: #ffffff;    transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);}.slicknav_menu {    background: #000000;}.slicknav_menu .slicknav_menutxt {    display: none;}.slicknav_btn {    background: transparent;}.slicknav_menu {    position: relative;}.slicknav_nav {    position: absolute;    width: 100%;    height: auto;    background: #000000;    z-index: 999;    top: 54px;    left: 0;    padding: 10px 0;}.slicknav_nav a {    padding: 12px 10px;    margin: 2px 5px;}.slicknav_nav a:hover {    color: #fff;    background: transparent;}/*:::::::::::::::::::::::::::::::::::::::::: 3. Hero Section::::::::::::::::::::::::::::::::::::::::::*/#hero-section.section-padding {    padding-top: 119.5px;    padding-bottom: 268px;}#hero-section {    padding-bottom: 240px;}.hero-img {    max-width: 100%;    height: 582px;    position: relative;    z-index: 99;}.hero-text {    padding-left: 32px;}.hero-text h4 {    font-size: 24px;}.hero-gretting {    margin-top: 50px;    margin-bottom: 19px;    color: #212121;}.hero-name {    font-size: 100px;    font-weight: 600;    line-height: 120px;    position: relative;    padding: 5px 0;    z-index: 1;    color: #212121;    margin-left: -5px;}.hero-name::after {    content: "";    position: absolute;    background: #f6f6f6;    width: 570px;    height: 100%;    left: -11%;    top: 0;    z-index: -1;}.hero-title {    margin-top: 20px;    color: #212121;    margin-bottom: 9px;}.hero-paragraph {    margin-bottom: 52px;    color: #333333;}#hero-section .box-btn {    margin-left: 3px;}.scroll-down {    border: 1px solid #000000;    width: 30px;    height: 60px;    border-radius: 30px;    position: absolute;    right: 15px;    bottom: -120px;    scroll-behavior: smooth;}.scroll-down::after {    position: absolute;    content: "";    width: 2px;    height: 10px;    background: #000000;    left: 50%;    transform: translateX(-50%);    animation: scroll-down-animate infinite 1s ease-in-out;}html .scroll-down {    scroll-behavior: smooth;}@keyframes scroll-down-animate {    0% {        top: 15px;    }    100% {        top: 30px;        opacity: 0;    }}.scroll-down span {    position: absolute;    width: 111px;    bottom: -35px;    left: 50%;    transform: translateX(-50%);    color: #212121;}/*:::::::::::::::::::::::::::::::::::::::::: 4. About Section::::::::::::::::::::::::::::::::::::::::::*/#about-section {    padding-top: 114.5px;    padding-bottom: 120px;}.title-area h6 {    color: #000000;    font-size: 16px;    font-weight: 500;    margin-bottom: -5px;    display: inline-block;}.arrow-rh-lh {    position: relative;    padding-left: 15px;    padding-right: 15px;}.arrow-rh-lh::before {    position: absolute;    content: "<";    left: 0;    top: 50%;    transform: translateY(-50%);    font-family: 'Rubik', sans-serif;}.arrow-rh-lh::after {    position: absolute;    content: ">";    right: 0;    top: 50%;    transform: translateY(-50%);    font-family: 'Rubik', sans-serif;}.title-area h1 {    font-size: 40px;    font-weight: 600;    color: #212121;    margin-top: -5px;}.title-border {    position: relative;}.title-border::after {    position: absolute;    content: "";    width: 30px;    height: 2px;    background: #333;    left: 0px;    bottom: -13px;}.title-area h2 {    font-size: 32px;    color: #212121;    margin-top: 40px;    font-weight: 500;    margin-bottom: 7px;    line-height: 48px;}.title-area p {    margin-bottom: 53px;}.contact-me {    margin-bottom: 52px;    display: flex;    flex-direction: row;    justify-content: space-between;    font-size: 18px;    font-weight: 500;    font-family: 'Rubik', sans-serif !important;    color: #212121;    margin-top: -8px;}.item-phone,.item-email {    font-weight: 400;    color: #333333;}.title-area .box-btn {    margin-right: 25px;}.title-area .box-btn:last-child {    margin-right: 0;}.about-img {    position: relative;    margin-top: 5px;    background: url(../image/about-img.jpg);    height: 508px;    background-size: cover;    background-repeat: no-repeat;    background-position: center;}.about-img::after {    content: "";    position: absolute;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: rgba(22, 22, 219, 0.4);    margin-right: 5%;}/*:::::::::::::::::::::::::::::::::::::::::: 5. Service Section::::::::::::::::::::::::::::::::::::::::::*/#service-section.section-padding {    padding-top: 113.5px;    padding-bottom: 90px;}.single-service-box {    height: 395px;    position: relative;    -webkit-transform-style: preserve-3d;    transform-style: preserve-3d;    -webkit-perspective: 1000px;    perspective: 1000px;    margin-bottom: 30px;}.front-side h4,.back-side h4 {    font-size: 22px;    font-weight: 500;}.back-side h4 {    color: #ffffff;}.back-side p {    color: #ffffff;}.front-side,.back-side {    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);    -webkit-backface-visibility: hidden;    backface-visibility: hidden;    text-align: center;    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    padding: 0 35px;}.single-service-box:hover .front-side,.single-service-box:hover .back-side {    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1) -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);}.single-service-box .back-side {    -webkit-transform: rotateY(180deg);    transform: rotateY(180deg);    -webkit-transform-style: preserve-3d;    transform-style: preserve-3d;    background: #000000;    color: #fff !important;    padding: 79px 47px;}.single-service-box .front-side {    -webkit-transform: rotateY(0deg);    transform: rotateY(0deg);    -webkit-transform-style: preserve-3d;    transform-style: preserve-3d;    border: 1px solid #e0e0e0;    background: #fff;    padding: 65px 47px;}.single-service-box:hover .front-side {    -webkit-transform: rotateY(-180deg);    transform: rotateY(-180deg);    -webkit-transform-style: preserve-3d;    transform-style: preserve-3d;}.single-service-box:hover .back-side {    -webkit-transform: rotateY(0deg);    transform: rotateY(0deg);    -webkit-transform-style: preserve-3d;    transform-style: preserve-3d;}.service-icon {    background: #000000;    width: 100px;    height: 100px;    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    margin: 0 auto;    margin-bottom: 15px;}.service-line-black,.service-line-white {    position: relative;    margin-bottom: 35px;}.service-line-black::after {    content: "";    position: absolute;    width: 30px;    height: 2px;    left: calc(50% - 15px);    bottom: calc(-60% - 0px);}.service-line-white::after {    content: "";    position: absolute;    width: 30px;    height: 2px;    left: 50%;    bottom: -60%;    transform: translate(-50%, 50%);}.service-line-black::after {    background: #212121;}.service-line-white::after {    background: #fff;}.arrow-icon {    background: #fff;    height: 55px;    width: 150px;    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    margin: 0 auto;    margin-top: 18px;}.front-side .service-icon,.front-side .service-line-black,.service-line-black::after,.front-side p,.back-side .service-line-white,.back-side p,.back-side a {    -webkit-transform: translateZ(60px) scale(0.94);    transform: translateZ(60px) scale(0.94);    -webkit-perspective: inherit;    perspective: inherit;    -ms-transition: 0.60s;    transition: 0.60s;    -webkit-transition: 0.60s;    backface-visibility: hidden;    -webkit-font-smoothing: subpixel-antialiased;    box-shadow: none;}.arrow-icon {    position: relative;}.arrow-icon img {    position: absolute;    left: 0%;    transition: .3s linear;    transition-delay: .4s;    visibility: hidden;    opacity: 0;}.arrow-icon:hover img {    left: 0%;    visibility: visible;    opacity: 1;    transform: translateX(25%);}.arrow-icon p {    position: absolute;    transition: .5s linear;    transition-delay: .2s;    display: inline-block;    visibility: visible;    opacity: 1;    color: #000000 !important;}.arrow-icon:hover p {    visibility: hidden;    opacity: 0;}/*:::::::::::::::::::::::::::::::::::::::::: 6. Skill Section::::::::::::::::::::::::::::::::::::::::::*/#skill-section.section-padding {    padding-top: 113.5px;    padding-bottom: 97px;}.segment-title {    width: 230px;    height: 65px;    background: #fff;    font-size: 22px;    font-weight: 500;    display: inline-flex;    flex-direction: column;    align-items: center;    justify-content: center;    margin-bottom: 22px;}.skill-div {    margin-bottom: 15px;    margin-left: 40px;}.skill-div:last-child {    margin-bottom: -2px;}.skill-div h5,.skill-progressbar h5 {    font-size: 18px;    font-weight: 500;    position: relative;}.skill-div h5::after {    content: "";    position: absolute;    width: 10px;    height: 10px;    background: #333;    top: 50%;    left: -25px;    transform: translateY(-50%);}.year-duration{    color: #000000;    margin-bottom: 0;}.skill-img {    background: url(../image/about-img.jpg);    height: 559px;    background-size: cover;    background-repeat: no-repeat;    position: relative;    background-position-x: center;    margin-top: 7px;    overflow: hidden;}.skill-person-info {    background: #000000;    position: absolute;    bottom: 0;    left: 0;    width: 100%;    height: 88px;    text-align: center;    transition: .3s ease;}.skill-person-name {    margin-top: 10px;}.skill-person-name h4,.skill-person-name p {    color: #fff;    font-weight: 500;}.skill-person-name h4 {    font-size: 24px;}.skill-social-link {    margin-top: 15px;}.skill-social-link a {    color: #000000;    background: #fff;    width: 40px;    height: 40px;    display: inline-block;    line-height: 40px;}.skill-social-link a i {    transition: .3s;    transform: rotate(0deg);}.skill-social-link a {    margin-right: 10px;}.skill-social-link a:last-child {    margin-right: 0;}.skill-social-link a:hover i {    transform: rotate(360deg);}.skill-img:hover .skill-person-info {    height: 151px;}.skill-progress {    margin-top: 53px;}.skill-progressbar h5 {    margin-bottom: 12px;}.percentCount {    float: right;    margin-top: -53px;    clear: both;    font-weight: 500;    font-family: 'Rubik', sans-serif;}.skill-progressbar {    margin-bottom: -12px;}.offset-lg-half {    margin-left: 2.08333%;}/*:::::::::::::::::::::::::::::::::::::::::: 7. Portfolio Section::::::::::::::::::::::::::::::::::::::::::*/#portfolio-section.section-padding {    padding-top: 113.5px;    padding-bottom: 90px;}.portfolio-menu button {    background: #000000;    border: none;    padding: 19px 35px;    color: #fff;    display: inline-block;    margin-right: -5px;    outline: none;}button.active-work {    background: #1212af;    outline: none;}.portfolio-menu {    margin-bottom: 60px;    margin-top: -2px;}.portfolio-area {    column-count: 3;    column-gap: 30px;}.portfolio-single:hover::after {    visibility: visible;    opacity: 1;}.portfolio-img-1 {    background: url("../image/portfolio-1.jpg");}.portfolio-img-2 {    background: url("../image/portfolio-2.jpg");}.portfolio-img-3 {    background: url("../image/portfolio-3.jpg");}.portfolio-img-4 {    background: url("../image/portfolio-4.jpg");}.portfolio-img-5 {    background: url("../image/portfolio-5.jpg");}.portfolio-img-6 {    background: url("../image/portfolio-6.jpg");}.portfolio-img-7 {    background: url("../image/portfolio-7.jpg");}.portfolio-img-8 {    background: url("../image/portfolio-8.jpg");}.portfolio-img-9 {    background: url("../image/portfolio-9.jpg");}.portfolio-single {    position: relative;    background-size: cover;    background-repeat: no-repeat;    background-position: center;    height: 260px;    margin-bottom: 30px;    overflow: hidden;    -webkit-column-break-inside: avoid;    page-break-inside: avoid;    break-inside: avoid;}.portfolio-single::after {    content: "";    position: absolute;    width: calc(100% - 30px);    height: calc(100% - 30px);    left: 15px;    top: 15px;    background: rgba(22, 22, 219, 0.4);    visibility: hidden;    opacity: 0;    transition: .5s linear;}.portfolio-text {    position: absolute;    background: #fff;    width: 200px;    height: 75px;    left: 33px;    bottom: 0px;    display: inline-flex;    flex-direction: column;    justify-content: center;    padding-left: 28px;    font-family: 'Rubik', sans-serif;    z-index: 1;    visibility: hidden;    opacity: 0;    transition: .5s linear;}.portfolio-text a h4 {    font-size: 22px;    font-weight: 500;    color: #212121;    transition: .3s all;}.portfolio-text a:hover h4 {    color: #000000;}.portfolio-text span {    color: #000000;}.zoom {    position: absolute;    width: 35px;    height: 35px;    background: #fff;    top: 0px;    right: 33px;    color: #212121;    display: inline-flex;    justify-content: center;    align-items: center;    font-weight: 500;    z-index: 1;    visibility: hidden;    opacity: 0;    transition: .5s linear;}.portfolio-single:hover .zoom {    visibility: visible;    opacity: 1;    top: 33px;}.portfolio-single:hover .portfolio-text {    visibility: visible;    opacity: 1;    bottom: 33px;}/*:::::::::::::::::::::::::::::::::::::::::: 8. Price Section::::::::::::::::::::::::::::::::::::::::::*/#price-section.section-padding {    padding-top: 113.5px;    padding-bottom: 90px;}.single-price-box {    text-align: center;    background: #fff;    margin-bottom: 30px;}.price-head {    background: #000000;}span.price-catagory {    display: inline-flex;    width: 165px;    height: 50px;    justify-content: center;    align-items: center;    background: #fff;    color: #000000;    font-family: 'Rubik', sans-serif;}.price {    font-size: 40px;    color: #fff;    font-weight: 600;    padding-top: 13px;    padding-bottom: 11px;}.price span {    font-size: 22px;    font-weight: 400;}.price-details {    padding-top: 22px;    padding-bottom: 60px;    font-family: 'Rubik', sans-serif;}.price-details ul {    margin-top: 30px;    margin-bottom: 52px;}.price-details ul li {    padding-left: 0px;    transition: .3s ease;}.price-details ul li:hover {    padding-left: 10px;}.price-details ul li {    margin-bottom: 20px;    position: relative;}.price-details ul li::before {    content: "";    position: absolute;    width: 8px;    height: 2px;    background: #000000;    top: 50%;    transform: translate(-225%, -50%)}/*:::::::::::::::::::::::::::::::::::::::::: 9. Testimonial Section::::::::::::::::::::::::::::::::::::::::::*/#testimonial-section.section-padding {    padding-top: 113.5px;    padding-bottom: 119px;}.single-testimonial {    height: 340px;    display: flex;    flex-direction: column;    justify-content: space-between;    padding: 30px;    background: #fff;    margin: 60px 0 0 0}.testimonial-bg {    background: linear-gradient(to bottom, rgba(22, 22, 219, 0.8), rgba(22, 22, 219, 0.8)), url("../image/testimonial-bg.jpg");    background-size: cover;    background-repeat: no-repeat;    background-position: center;    height: 500px;    padding-left: 65px;    padding-right: 65px;}.top-test {    display: flex;    justify-content: space-between;    align-items: center;    color: #ffcc00;}.middle-test {    margin-top: 10px;    margin-bottom: 22px;}.quote-icon {    position: relative;    background: #000000;    width: 60px;    height: 60px;}.quote-icon::after {    position: absolute;    content: "";    background: url("../image/quote.png");    width: 100%;    height: 100%;    background-repeat: no-repeat;    background-position: center;}.reviewer-info {    margin-left: -3px;}.reviewer-name {    font-size: 18px;    font-weight: 600;    color: #212121;    font-family: 'Rubik', sans-serif;}.reviewer-name a {    font-family: 'Muli', sans-serif;    font-size: 16px;    font-weight: 400;    color: #000000;}.reviewer-name span {    display: inline-block;}.owl-carousel .owl-dots {    display: block;    position: absolute;    bottom: 38px;    left: 50%;    transform: translateX(-50%);    z-index: 111;}.owl-carousel .owl-dots button {    background: #fff;    width: 10px;    height: 10px;    margin-right: 15px;    outline: none;    transition: width .3s ease-in-out;}.owl-dots button.active {    width: 25px;    height: 10px;}.designation {    color: #000000;}.middle-test P {    color: #212121 !important;}/*:::::::::::::::::::::::::::::::::::::::::: 10. Blog Section::::::::::::::::::::::::::::::::::::::::::*/#blog-section.section-padding {    padding-top: 113.5px;    padding-bottom: 90px;}.single-blog {    position: relative;    margin-bottom: 30px;    min-height: 360px;}.single-blog::after {    content: "";    position: absolute;    width: 100%;    height: 0px;    background: #000000;    bottom: 0;    left: 0;    transition: .1s linear;}.single-blog:hover::after {    height: 5px;}.blog-image {    overflow: hidden;    position: relative;}.blog-image img {    height: 300px;    width: 100%;    transition: .5s linear;    transform: scale(1) rotate(0deg);}.single-blog:hover .blog-image img {    transform: scale(1.09) rotate(3deg);}.blog-catagory {    position: absolute;    background: #000000;    color: #fff;    text-align: center;    top: 15px;    padding: 7.5px 15px;    right: 0;    transition: .5s linear;}.single-blog:hover .blog-catagory {    background: #fff;    color: #000000}.single-blog {    background: #fff;    transition: .3s ease;}.blog-inner-text {    padding-top: 25px;    padding-bottom: 35px;    padding-left: 30px;    padding-right: 30px;    position: relative;}.admin-and-date {    display: flex;    justify-content: space-between;    margin-bottom: 43px;}.blog-inner-text::after {    content: "";    position: absolute;    width: 100%;    height: 1px;    background: #333;    top: 72px;    left: 0;}.date,.admin {    position: relative;    padding-left: 30px;    color: #333333;}.date:hover,.admin:hover {    color: #333333;}.date::after,.admin::after {    position: absolute;    content: "";    background-position: center;    background-repeat: no-repeat;    width: 15px;    height: 15px;    left: 0%;    top: 50%;    transform: translateY(-50%);    margin-right: 15px;}.date::after {    background: url("../image/blog-svg-calander.svg");}.admin::after {    background: url("../image/blog-svg-admin.svg");    background-repeat: no-repeat;}a.blog-title {    font-size: 22px;    font-weight: 500;    color: #212121;    line-height: 35px;}.blog-excerpt {    margin-bottom: 22px;}.blog-excerpt p {    color: #333333 !important;}.single-blog:hover .blog-title {    color: #000000;}/*:::::::::::::::::::::::::::::::::::::::::: 11. Contact form Section::::::::::::::::::::::::::::::::::::::::::*/#contact-form-section.section-padding {    padding-top: 113.5px;    padding-bottom: 20px;}.contact-bg {    background: linear-gradient(to bottom, rgba(22, 22, 219, 0.8), rgba(22, 22, 219, 0.8)), url("../image/contact-bg.jpg");    background-size: cover;    background-position: center;    background-repeat: no-repeat;    height: 465px;    margin-top: -2px;}.contact-title {    position: absolute;    left: 50%;    top: -2px;    color: #212121;    font-size: 22px;    width: 290px;    height: 65px;    background: #fff;    text-align: center;    line-height: 65px;    transform: translateX(-50%);    font-weight: 500;}.single-contact-box {    background: #fff;    text-align: center;    height: 235px;    padding-left: 25px;    padding-right: 25px;    margin-top: 125px}.contact-icon {    background: #000000;    width: 90px;    height: 90px;    line-height: 90px;    margin: 0 auto;    margin-bottom: 22px;}.contact-subtitle {    margin-top: 21px;    font-weight: 500;    position: relative;}.contact-subtitle::after {    content: "";    position: absolute;    width: 30px;    height: 2px;    background: #000000;    top: -50%;    left: 50%;    transform: translate(-50%, -50%);}.contact-info a {    color: #212121;}.contact-info span{    display: block;}.contact-form-box {    background: #f6f6f6;    padding: 60px 30px;    margin-top: 55px;    transform: translateY(-100px);}input,textarea {    width: 100%;    border: 0;    padding: 20px 30px;    margin-bottom: 30px;    color: #212121;}.border-bottom-animate {    position: relative;}.border-bottom-animate::after {    content: " ";    position: absolute;    height: 2px;    background: #000000;    right: 0;    bottom: 30px;    transition: .3s linear;    z-index: 111;    width: 0%;}input:focus+.border-bottom-animate::after,textarea:focus+.border-bottom-animate::after {    left: 0;    width: 100%;}textarea {    height: 135px;}input::placeholder,textarea::placeholder {    color: #212121;}button.box-btn.blue-box {    padding: 13.5px 30px;}/*:::::::::::::::::::::::::::::::::::::::::: 12. Footer Navigation Section::::::::::::::::::::::::::::::::::::::::::*/.footer-submit {    display: flex;    flex-direction: row;    align-items: normal;    width: 100%;}.col-lg-3.custom-padding-off-footer {    padding-right: 2px;    padding-left: 6px;}.footer-submit input {    height: 50px;    background: #f6f6f6;    border: 2px solid #000000;}.footer-submit button {    border: none;    background: #000000;    color: #fff;    margin-bottom: 6px;    height: 50px;    width: 65px;    display: inline-flex;    justify-content: center;    align-items: center;}.footer-logo {    margin-bottom: 5px;}.footer-header {    font-size: 22px;    margin-bottom: 12px;    font-weight: 500;    margin-top: -8px;}.footer-header h4::after {    content: "";    position: absolute;    width: 100%;    height: 2px;    background: #000000;    left: 0;    bottom: 0;}.footer-header h4 {    position: relative;    display: inline-block;}.footer-text {    margin-bottom: 22px;}.footer-nav {    margin-top: 20px;}.footer-nav ul li a {    position: relative;    display: inline-block;    margin-left: 25px;    color: #000;    transition: .3s linear;    backface-visibility: hidden;    padding-top: 7px;}.footer-nav ul li a::after {    position: absolute;    content: "";    width: 10px;    height: 2px;    background: #000000;    left: 0;    top: 50%;    transform: translateY(-50%);    margin-left: -25px;    transition: .3s linear;    margin-top: 2.5px;}.footer-nav ul li {    display: block;}.footer-nav ul li a:hover::after {    width: 15px;}.footer-nav ul li a:hover {    padding-left: 5px;}.section-padding-bottom {    padding-bottom: 85px;}.footer-contact ul li {    position: relative;    padding-left: 31px;    margin-bottom: 10px;}.footer-contact ul li i {    position: absolute;    /* top: 0%; */    transform: translateY(6px);    left: 0;    color: #000000;}.footer-contact {    margin-top: 25px;}.custom-offset-lg--30px {    margin-left: 5.666666%;}/*:::::::::::::::::::::::::::::::::::::::::: 13. Footer Copyright Section::::::::::::::::::::::::::::::::::::::::::*/#footer-section {    padding: 30px 0;}.copy-right-text {    position: relative;    font-family: 'Rubik', sans-serif;    color: #212121;}.copy-right-text a {    color: #000000;}.copy-right-text::after {    content: "";    position: absolute;    width: 100%;    height: 1px;    background: #000000;    left: 0;    top: -25px;}/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::                                                                                 Portfiloio Page CSS::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*//*:::::::::::::::::::::::::::::::::::::::::: 14. BreadCum Section::::::::::::::::::::::::::::::::::::::::::*/#breadcrumbs-section {    background-size: cover;    background-repeat: no-repeat;    background-position: center;    position: relative;    z-index: 0;}#breadcrumbs-section::after {    content: "";    position: absolute;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: rgba(255, 255, 255, 0);    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(22, 22, 219, 0.8) 100%);    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(22, 22, 219, 0.8)));    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(22, 22, 219, 0.8) 100%);    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(22, 22, 219, 0.8) 100%);    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(22, 22, 219, 0.8) 100%);    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(22, 22, 219, 0.8) 100%);    z-index: -1;}.breadcrumbs-bg-portfolio {    background: url("../image/breadcrumbs-bg-portfolio.jpg");}.breadcrumbs-title {    z-index: 9999;}.breadcrumbs-title h1 {    color: #fff;    font-size: 60px;    font-weight: 600;    padding-top: 203px;    padding-bottom: 62px;    z-index: 99;    position: relative;}.breadcrumbs-title h1::after {    content: "";    position: absolute;    bottom: 63.5px;    left: 50%;    width: 60px;    height: 2px;    background: #fff;    transform: translateX(-50%) translateY(-50%);}.breadcrumbs-navigation {    position: absolute;    bottom: 0;    left: 50%;    background: #fff;    padding: 7.5px 30px;    transform: translateX(-50%);    font-family: 'Rubik', sans-serif;    color: #212121;    font-weight: 500;    z-index: 999;}.breadcrumbs-navigation a {    color: #000000;}/*:::::::::::::::::::::::::::::::::::::::::: 15. Portfolio Info Section::::::::::::::::::::::::::::::::::::::::::*/#portfolio-info-section.section-padding {    padding-top: 119.5px;    padding-bottom: 52px;}.portfolio-section-text {    padding-left: 45px;}.portfolio-bg {    background: url("../image/portfolio-info-bg.jpg");    background-size: cover;    background-repeat: no-repeat;    background-position: center;    position: relative;    height: 700px;}.portfolio-info-box {    background: #f6f6f6;    position: absolute;    width: 100%;    padding: 60px 95px;    transform: translateX(-50%);    left: 50%;    font-family: 'Rubik', sans-serif;}.portfolio-info-items {    text-transform: uppercase;    display: flex;    font-weight: 500;}.portfolio-info-items span {    font-weight: 400;    text-transform: capitalize;}.portfolio-info-box {    background: #f6f6f6;    position: absolute;    width: 88%;    padding-top: 108px;    padding-bottom: 113px;    transform: translateX(-50%) translateY(50%);    left: 50%;    font-family: 'Rubik', sans-serif;    bottom: 0;    height: 215px;    display: flex;    flex-direction: column;    justify-content: center;    z-index: 99;}.portfolio-info-items {    text-transform: uppercase;    display: flex;    flex-direction: column;}.portfolio-info-items p {    display: inline-block;    padding: 7px 0;}.portfolio-info-items p span {    position: absolute;    left: 32%;    width: 100%;}span.port-social-link a {    display: inline-block;    width: 25px;    height: 25px;    background: #000000;    color: #fff;    text-align: center;    line-height: 25px;    margin-right: 15px;}span.port-social-link a:last-child {    margin-right: 0;}#portfolio-info-section .portfolio-inner-text {    margin-top: 225px;}h5.portfolio-title {    color: #000000;    margin-bottom: 20px;    position: relative;    font-family: 'Rubik', sans-serif;    margin-left: 46px;}h5.portfolio-title::after {    content: "";    position: absolute;    width: 30px;    height: 2px;    top: 50%;    left: -46px;    background: #212121;}#portfolio-info-section .portfolio-section-text h3::after {    display: none;}.portfolio-section-text h3 {    font-size: 32px;    font-weight: 500;    margin-bottom: 7px;    position: relative;    line-height: 48px;}.portfolio-section-text h3::after {    content: "";    position: absolute;    width: 30px;    height: 2px;    top: 50%;    left: -46px;    transform: translateY(-50%);    background: #000000;}/*:::::::::::::::::::::::::::::::::::::::::: 16. Portfilo Details Section::::::::::::::::::::::::::::::::::::::::::*/#portfolio-img-details-section.section-padding {    padding-top: 120px;    padding-bottom: 90px;}/* clear fix */.grid:after {    content: '';    display: block;    clear: both;}/* ---- .grid-item ---- */.grid-item {    margin-bottom: 30px;    overflow: hidden;    width: 100%;}.grid-item--height2 {    height: 700px;}/*:::::::::::::::::::::::::::::::::::::::::: 17. Portfolio Features Section::::::::::::::::::::::::::::::::::::::::::*/#feature-section.section-padding {    padding-top: 107.5px;    padding-bottom: 74px;}#feature-section {    margin-top: 17px;    padding-bottom: 74px;}#feature-section .portfolio-section-text {    margin-bottom: 22px;}.feature-text h5 {    margin-top: 30px;    padding-bottom: 11px;    padding-top: 11px;    padding-left: 50px;    padding-right: 10px;    position: relative;    z-index: 1;    transition: .5s linear;    font-size: 14px;    font-weight: 500;    margin-bottom: 45px;    display: flex;    align-items: center;    background: #f6f6f6;}.feature-text h5 i {    background: #000000;    width: 20px;    height: 20px;    padding: 5px;    position: absolute;    left: 10px;    color: #fff;    font-size: 10px;}.feature-text h5:hover i {    background: #fff;    color: #000000;    font-size: 10px;}.feature-text h5::after {    content: "";    position: absolute;    width: 0;    height: 100%;    left: 0;    top: 0;    background: #000000;    transition: .3s linear;    z-index: -1;}.feature-text h5:hover {    color: #fff;}.feature-text h5:hover::after {    width: 100%;}.feature-img {    margin-top: 30px;    height: 311px;}/*:::::::::::::::::::::::::::::::::::::::::: 18. Portfilo Service Section::::::::::::::::::::::::::::::::::::::::::*/#portfolio-services-section.section-padding {    padding-top: 118.5px;    padding-bottom: 119px;}.single-portfolio-service-box {    padding-top: 60px;    padding-bottom: 52px;    padding-left: 30px;    padding-right: 30px;    transition: .3s linear;    background: #fff;    box-shadow: 0px 10px 20px 0px rgba(21, 21, 21, 0.1);}.portfolio-service-icon {    width: 105px;    height: 105px;    background: #000000;    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    transition: .3s linear;}.portfolio-service-icon svg {    fill: #fff;}.single-portfolio-service-box:hover .portfolio-service-icon svg {    fill: #000000;}.single-portfolio-service-box h4,.single-portfolio-service-box p {    color: #212121;    transition: .3s linear;}.single-portfolio-service-box h4 {    padding-top: 20px;    padding-bottom: 44px;    font-size: 22px;    position: relative;    font-weight: 500;}.single-portfolio-service-box h4::after {    content: "";    position: absolute;    width: 30px;    height: 2px;    background: #212121;    left: 0;    bottom: 22px;}.single-portfolio-service-box:hover {    background: #000000 !important;    color: #fff !important;}.single-portfolio-service-box:hover h4,.single-portfolio-service-box:hover p {    color: #fff;}.single-portfolio-service-box:hover h4::after {    background: #fff;}.single-portfolio-service-box:hover .portfolio-service-icon {    background: #fff;}/*:::::::::::::::::::::::::::::::::::::::::: 19. Portfolio Competitor Analysis Section::::::::::::::::::::::::::::::::::::::::::*/#competitor-analysis-section.section-padding {    padding-top: 107px;    padding-bottom: 119px;}.single-competator-box {    margin-top: 52px;}.competator-bg {    position: relative;    overflow: hidden;}.competator-bg img {    width: 100%;    height: 540px;    transition: .3s linear;    transform: scale(1) rotate(0deg)}.single-competator-box:hover .competator-bg img {    transform: scale(1.09) rotate(3deg);}.competator-inner-text {    position: absolute;    background: #000000;    color: #fff;    bottom: 30px;    padding: 7.5px 30px;}.competator-inner-text h4,.competator-inner-text h6 {    color: #fff;}.competator-inner-text h4 {    font-size: 22px;    font-weight: 600;    letter-spacing: 1px;}.competator-inner-text h6 {    font-weight: 300;}.competator-inner-text h6 a {    position: relative;    padding-left: 15px;    color: #fff;}.competator-inner-text h6 a::after {    content: "";    position: absolute;    width: 10px;    height: 2px;    color: #fff;    left: 0;    top: 50%;    background: #fff;    transform: translateY(-50%);}/*:::::::::::::::::::::::::::::::::::::::::: 20. Post Namvigation CSS::::::::::::::::::::::::::::::::::::::::::*/.post-navigation {    display: flex;    flex-direction: row;    justify-content: space-between;    margin-top: 120px;}.post-nav {    background: #000000;    width: 138px;    height: 50px;    position: relative;    display: inline-flex;    justify-content: center;    align-items: center;}.post-nav a {    color: #fff;}.post-nav-icon {    position: absolute;    top: 50%;    left: 0;    transition: .3s linear;    visibility: hidden;    opacity: 0;}.nav-left {    transform: translate(100%, -50%);}.post-nav:hover .nav-left {    transform: translate(40%, -50%);    visibility: visible;    opacity: 1;}.nav-right {    transform: translate(-100%, -50%);}.post-nav:hover .nav-right {    transform: translate(40%, -50%);    visibility: visible;    opacity: 1;}.post-nav span.left-post-text {    transition: .3s linear;    transform: translateX(0%);    visibility: visible;    opacity: 1;}.post-nav:hover span.left-post-text {    display: inline-block;    transform: translate(-100%);    visibility: hidden;    opacity: 0;}.post-nav span.right-post-text {    transition: .3s linear;    transform: translateX(0%);    visibility: visible;    opacity: 1;}.post-nav:hover span.right-post-text {    display: inline-block;    transform: translate(100%);    visibility: hidden;    opacity: 0;}/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::                                                                                 Blog Page CSS::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*//*:::::::::::::::::::::::::::::::::::::::::: 21. BreadCum Section::::::::::::::::::::::::::::::::::::::::::*/.breadcrumbs-bg-blog {    background: url("../image/breadcrumbs-bg-blog.jpg");}.blog-detail-bg {    background: url("../image/blog-details.jpg");    height: 700px;    background-size: cover;    background-position-x: center;    background-repeat: no-repeat;    position: relative;}/*:::::::::::::::::::::::::::::::::::::::::: 22. Blog Details Section::::::::::::::::::::::::::::::::::::::::::*/#blog-header.section-padding {    padding-bottom: 0;    padding-top: 120px;}.blog-details-catagory h4 {    position: absolute;    color: #fff;    font-weight: 500;    right: 0;    top: 30px;    padding: 19px 45px;    background: #000000}.author-post img {    width: 75px;    height: 75px;    border-radius: 50%;}.author-post span {    margin-left: 25px;    font-family: 'Muli', sans-serif !important;}.author-post span a {    color: #000000;    font-weight: 500;}.blog-author-post-info {    margin-top: 29px;}.blog-views-info {    margin: 23px 0;}.blog-views-info img {    margin-right: 7.5px;}.blog-views-info span {    margin-right: 25px;}.blog-views-info span:last-child {    margin-right: 0;}.blog-author-post-info hr {    background: #333;    display: block;    margin-top: 30px;}/*:::::::::::::::::::::::::::::::::::::::::: 23. Blog Post Section::::::::::::::::::::::::::::::::::::::::::*/#blog-post-section.section-padding {    padding-top: 27.5px;    padding-bottom: 24.5px;}#blog-post-section h1 {    font-size: 40px;    font-weight: 600;    margin-bottom: 14px;    line-height: 60px;}#blog-post-section p {    margin-bottom: 27px;}.blog-post-img img {    width: 100%;    height: 400px;    margin-bottom: 30px;}.blog-post-img {    margin-top: 25px;    margin-bottom: 22px;}/*:::::::::::::::::::::::::::::::::::::::::: 24. Blog Quote Section::::::::::::::::::::::::::::::::::::::::::*/#quote-section.section-padding {    padding-top: 67px;    padding-bottom: 67px;}.quote-note p {    font-size: 18px;    font-weight: 800;    position: relative;    padding-left: 95px;    line-height: 30px;}.quote-note p::after {    content: "";    position: absolute;    width: 65px;    height: 2px;    background: #000000;    left: 0;    top: 8px;}span.reviewer-name-id {    font-weight: 500;    font-family: 'Rubik', sans-serif;}.quote-reviewer h3 {    font-size: 32px;    font-weight: 600;    font-style: italic;    line-height: 48px;}.quote-reviewer {    padding-left: 25px;    padding-right: 25px;}.reviewer-name-id {    font-weight: 500;    margin-top: 10px;    display: inline-block;    position: relative;    padding-left: 10px;}.reviewer-name-id::after {    content: "";    position: absolute;    width: 5px;    height: 2px;    background: #000000;    left: 0;    top: 50%;    transform: translateY(-50%);}.quote-comma {    background: #000000;    width: 95px;    height: 95px;    display: inline-flex;    justify-content: center;    align-items: center;}.quote-style {    position: relative;}.quote-end-line {    position: absolute;    width: 5px;    height: 240px;    background: #000000;    right: 0;    top: 50%;    transform: translateY(-50%);}/*:::::::::::::::::::::::::::::::::::::::::: 25. Blog Video Section::::::::::::::::::::::::::::::::::::::::::*/#video-blog.section-padding {    padding-bottom: 0;    padding-top: 51px;}.vedio-img {    position: relative;    padding-top: 50px;    padding-bottom: 50px;}.vedio-img img {    width: 100%;    height: 400px;}.click-video {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    font-size: 28px;    color: #fff;    background: #000000;    width: 80px;    height: 80px;    border-radius: 50%;    display: inline-flex;    justify-content: center;    align-items: center;}.click-video:hover {    color: #fff;}.click-video::before {    position: absolute;    content: "";    background: #000000;    top: 50%;    left: 50%;    border-radius: 50%;    z-index: -1;    animation: animate-play-btn-1 1s infinite linear;    transform: translate(-50%, -50%);}.click-video::after {    position: absolute;    content: "";    background: #000000;    top: 50%;    left: 50%;    border-radius: 50%;    z-index: -1;    animation: animate-play-btn-2 1s infinite linear;    transform: translate(-50%, -50%);}@keyframes animate-play-btn-1 {    0% {        width: 80px;        height: 80px;        opacity: .5;    }    100% {        width: 110px;        height: 110px;        opacity: .0;    }}@keyframes animate-play-btn-2 {    0% {        width: 80px;        height: 80px;        opacity: .5;    }    100% {        width: 140px;        height: 140px;        opacity: .0;    }}.mini-blog-title h4 {    font-size: 22px;    font-weight: 600;    margin-bottom: 12px;}.mini-blog-title ul {    margin-top: 45px;    margin-bottom: 50px;}.mini-blog-title ul li {    font-weight: 500;    font-family: 'Rubik', sans-serif;    margin-bottom: 25px;}.mini-blog-title ul li img {    background: #000000;    padding: 5px;    margin-right: 13px;}.blog-img-mini img {    width: 100%;    height: 297px;    margin-top: 84px;}.blog-tag-catagory-and-share-link {    margin-top: 110px;}.blog-tag-catagory span,.blog-share-link span {    font-weight: 500;    margin-right: 25px;    font-family: 'Rubik', sans-serif;}.blog-tag-catagory a {    font-weight: 400;    font-family: 'Muli', sans-serif;    color: #000000;}.blog-share-link a {    background: #000000;    color: #fff;    width: 25px;    height: 25px;    display: inline-block;    line-height: 25px;    text-align: center;    margin-right: 15px;}.blog-share-link a:last-child {    margin-right: 0;}.mini-blog-title ul li p img {    position: absolute;    left: 0;    top: 5px;}.mini-blog-title ul li p {    position: relative;    padding-left: 40px;}/*:::::::::::::::::::::::::::::::::::::::::: 26. Blog Post Like Section::::::::::::::::::::::::::::::::::::::::::*/#post-like.section-padding {    padding-top: 119px;    padding-bottom: 120px;}.post-like-title h2 {    font-size: 32px;    font-weight: 500;    position: relative;    margin-top: -13px;    margin-bottom: 45px;}.post-like-title h2::after {    content: "";    position: absolute;    width: 30px;    height: 2px;    background: #000000;    bottom: 15px;    margin-left: 30px;}.post-like-bg h6 {    position: absolute;    top: 15px;    right: 0;    padding: 10px 30px;    background: #000000;    color: #fff;    font-weight: 500;}.post-like-bg {    position: relative;    overflow: hidden;}.post-like-bg img {    width: 100%;    height: 300px;    transition: .3s linear;    transform: scale(1) rotate(0deg);}.post-like-single:hover .post-like-bg img {    transform: scale(1.09) rotate(3deg);}.post-like-title h4 {    font-size: 22px;    font-weight: 500;}.post-date {    margin-top: 22px;    margin-bottom: 36px;    position: relative;}.post-date span img {    margin-right: 10px;}.post-date::after {    content: "";    position: absolute;    width: 100%;    height: 1px;    background: #212121;    left: 0;    bottom: -24px;}.post-like-title h4 {    position: relative;    padding-left: 30px;}.post-like-title h4 a {    color: #212121;}.post-like-title h4::after {    content: "";    position: absolute;    width: 3px;    height: 30px;    background: #000000;    top: 50%;    left: 0;    transform: translateY(-50%);}#blog-post-pre-post-nav {    margin-top: 118px;}/*:::::::::::::::::::::::::::::::::::::::::: 27. Blog Commnet Section::::::::::::::::::::::::::::::::::::::::::*/.comment-author {    display: inline-flex;}.blog-comment-name-and-date {    display: inline-flex;}.blog-comment-name-and-date img {    margin-right: 30px;}.blog-comment-name-and-date h5 {    font-weight: 500;    line-height: 1;    padding-right: 25px;}.blog-comment-name-and-date span {    line-height: 1;}.commet-text {    margin-top: -53px;    margin-left: 15px;}.replay-comment {    margin-top: 60px;    padding-left: 15px;}.blog-comment {    margin-bottom: 35px;}.line-break {    position: relative;    width: 98.5%;    height: 1px;    background: #000000;    margin-left: 15px;}#comment-section.section-padding {    padding-bottom: 20px;    padding-top: 120px;}#comment-section .contact-form-box {    padding: 0px 0px;}.blog-footer.section-padding-bottom {    padding-top: 120px;}#comment-title {    margin-bottom: 145px;    margin-top: 75px;}.replay-comment .commet-text {    padding-left: 8px;}.social-10 {    margin-left: 55px;}/*：源代码唯一下载地址: https://www.99ziyuan.net*/