/* your styles go here */ .text-center { text-align: center; } .text-left { text-align: left; } .mb-large { margin-bottom: 6rem; } /* LP-components nav */ #navigation .navbar-nav .main-link { background-color: white; border-top: none; color: black; font-weight: 400; padding: 3px 3px 3px 3px; margin: 18px 12px 18px 12px; font-size: 1.5rem; text-decoration: none; } #navigation .navbar-nav .dropdown.active .main-link { border-bottom: 3px solid #ea5413; } #navigation .navbar-nav .signin-link { padding: 8px 18px; margin: 13px 0; text-decoration: none; color: #ea5413; font-size: 1.5rem; font-weight: 400; border: 1px solid #ea5413; border-radius: 3rem; } #navigation .navbar-nav .signin-link:hover, #navigation .navbar-nav .signin-link:focus { background-color: transparent; } #navigation .navbar-nav .signup-link { padding: 8px 18px; margin: 13px 10px; text-decoration: none; color: white; font-size: 1.5rem; font-weight: 400; border: 1px solid #ea5413; border-radius: 3rem; background-color: #ea5413; } #navigation .navbar-nav .signup-link:hover, #navigation .navbar-nav .signup-link:focus { background-color: #ea5413; } /* sec-hero */ .sec-hero { padding: 6rem 0; padding-bottom: 0; margin-bottom: 0 !important; } .sec-hero .hero-title { font-size: 3.5rem; letter-spacing: 1px; padding-top: 2.5rem; } .sec-hero .hero-txt { font-size: 1.8rem; letter-spacing: 1px; } .sec-hero .hero-btn { border: none; outline: none; border-radius: 3rem; margin-top: 2rem; padding: 1rem 2.5rem 0.6rem; background: linear-gradient(20deg, #ea5413, #920783); color: white; font-size: 1.8rem; box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.534); letter-spacing: 1px; } .sec-hero .hero-btn:hover { opacity: 0.9; } .hero-orange { position: absolute; left: 10%; top: 0%; } .hero-purple { position: absolute; right: 0%; top: -10%; z-index: -1; width: 180px; } .hero-orange-s { position: absolute; left: -5%; bottom: 13%; z-index: -1; animation: floating 8s infinite ease-in-out; width: 80px; } .hero-textgrp { z-index: 3; position: absolute; left: 5%; top: 10%; animation: floating3 6s infinite 1s ease-in-out; width: 300px; } .hero-video { z-index: 3; position: absolute; right: 3%; top: -5%; animation: floating 8s infinite 1.5s ease-in-out; width: 120px; } .hero-amplify { z-index: 3; position: absolute; bottom: 5%; right: 0; animation: floating2 5s infinite ease-in-out; width: 120px; } .hero-imgfr { width: 100%; height: 95%; } .hero-imgfr img { width: 100%; } @keyframes floating { from { transform: translate(0px, 0); } 65% { transform: translate(25px, 0); } to { transform: translate(0, -0px); } } @keyframes floating3 { from { transform: translate(0px, 0); } 65% { transform: translate(-20px, 0); } to { transform: translate(0, -0px); } } @keyframes floating2 { from { transform: translate(0px, 0); } 65% { transform: translate(0px, 10px); } to { transform: translate(0, -0px); } } /* sec-video */ .sec-video { margin: 200px auto 100px; position: relative; } .sec-video .stock { width: 550px; left: 0; top: 0; position: absolute; z-index: -1; } @media (max-width: 991px) { .sec-video .stock { width: 50%; } } @media (max-width: 575px) { .sec-video .stock { top: 75px; width: 70%; } } .sec-video .video-box { position: relative; width: 80%; height: 0; padding-bottom: 45%; margin: auto; } .sec-video .video-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .sec-video .video-title, .sec-video .video-mb-title { margin-bottom: 20px; font-size: 3rem; text-align: center; } .sec-video .video-mb-title { display: none; line-height: 40px; } @media (max-width: 575px) { .sec-video .video-title { display: none; } .sec-video .video-mb-title { display: block; } } .sec-video .video-text { margin-bottom: 20px; font-size: 16px; text-align: center; letter-spacing: 1px; } .sec-video .line { height: 7px; width: 70px; display: block; background: #ea5413; margin: 30px auto; } /* sec-usecase */ .sec-usecase { padding: 6rem 0; position: relative; margin-bottom: 0 !important; } .sec-usecase .container, .sec-video .container { width: 95%; max-width: 1200px; } .sec-usecase::after { content: " "; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; width: 100%; background-color: #ffebe2; z-index: -1; } .sec-usecase .usecase-title { font-size: 3rem; text-align: center; margin-bottom: 50px; } .sec-usecase .usecase-sub { font-size: 1.8rem; text-align: center; } .sec-usecase .usecase-sub i { color: #ea5413; } .sec-usecase .usecase-block { padding: 0 1rem; z-index: 3; } .sec-usecase .usecase-imgfr { width: 100%; height: 25rem; border-radius: 1rem; overflow: hidden; box-shadow: 0 3px 11px 3px rgba(192, 192, 192, 0.637); } .sec-usecase .usecase-imgfr img { width: 100%; height: 100%; } /* sec-steps */ .sec-steps { padding: 6rem 0; padding-bottom: 0; } .sec-steps .steps-title { font-size: 3rem; text-align: center; letter-spacing: 1px; } .sec-steps .steps-title strong { font-size: 5rem; } .sec-steps .steps-block { padding: 0 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .sec-steps .steps-block::after { position: absolute; bottom: -1.8rem; left: 0; width: 100%; height: 15rem; background-color: #ffebe2; content: " "; z-index: -1; border-radius: 2rem; } .sec-steps .steps-imgfr { width: 75%; height: 23rem; } .sec-steps .steps-imgfr img { width: 100%; height: 100%; } .sec-steps .steps-sub { margin: 5px auto 0; } .sec-steps .steps-txt { display: flex; align-items: center; } .sec-steps .steps-txt span { display: inline-block; width: 40px; height: 40px; background-color: #ea5413; color: white; font-size: 2.5rem; line-height: 40px; border-radius: 50%; text-align: center; margin-right: 1rem; } /* sec-features */ .sec-features { padding: 5rem 0; } .sec-features .row { margin: 8rem 0; } .sec-features .row:nth-of-type(1) { margin: 4rem 0; } .sec-features .row:nth-of-type(4) { margin-bottom: 0; } .features-orangel { position: absolute; left: -150px; top: 5%; z-index: -1; } .features-purpler { position: absolute; right: -150px; top: 5%; z-index: -1; } .features-purplel { position: absolute; left: -150px; top: 5%; z-index: -1; } .features-oranger { position: absolute; right: -150px; top: 5%; z-index: -1; } .sec-features .row .d-block { display: none; } .sec-features .features-col { position: relative; } .sec-features .features-col .features-block { position: absolute; left: 10rem; top: 6rem; display: flex; opacity: 0; transition: all 0.8s; } .sec-features .features-col .block-right { transform: translateX(-30%) scale(0.95); } .sec-features .features-col .block-left { transform: translateX(30%) scale(0.95); } .sec-features .features-col .features-block.active { opacity: 1; transform: translateX(0%) scale(1); } .sec-features .features-num { display: inline-block; font-size: 12rem; color: #f0f0f0; } .sec-features .features-title { font-size: 3rem; text-align: center; letter-spacing: 1px; padding-bottom: 6px; border-bottom: 8px solid #ea5413; display: inline-block; } .sec-features .features-title strong { font-size: 5rem; } .sec-features .features-imgfr { width: 100%; } .sec-features .features-imgfr video { width: 100%; } .sec-features .features-list { text-align: left; } /* .sec-blogtab { padding-bottom: 5rem; } */ .blog-tabs { display: flex; align-items: center; } /* .blogtab-title { font-size: 3rem; letter-spacing: 1px; padding-bottom: 7px; border-bottom: 7px solid #ea5413; display: inline-block; text-align: center; } */ .blog-tabs .blog-tabs-nav { width: 35%; background-color: #f0f0f0; padding: 4rem 2.5rem; list-style: none; box-shadow: 0 2px 5px -2px rgb(173, 173, 173); text-align: left; } .blog-tabs .blog-tabs-nav li { padding: 10px; border-bottom: 1px dashed grey; } .blog-tabs .blog-tabs-nav li a { color: #ea5413; } .blog-tabs .blog-tabs-stage { width: 65%; padding: 3.5rem; padding-bottom: 6rem; box-shadow: 0 0 10px rgb(32 32 32 / 25%); height: 40rem; overflow: hidden; text-align: left; position: relative; } .blog-tab-box { height: 90%; overflow-y: auto; } /* .blog-tabs .blog-tabs-stage .blog-txt { font-size: 1.6rem; } .blog-tabs .blog-tabs-stage .blog-txt p { line-height: 32px; letter-spacing: 1px; } */ /* .btn-light { color: black; border: 1px solid #ea5413; padding: 1rem 2.5rem; outline: none; background-color: white; margin-top: 4rem; border-radius: 3rem; font-size: 1.8rem; box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637); letter-spacing: 1px; } */ .btn-dark { text-decoration: none; color: white; border: 1px solid #ea5413; padding: 1rem 2.5rem 0.6rem; outline: none; background-color: #ea5413; margin-top: 4rem; border-radius: 3rem; font-size: 1.8rem; box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637); letter-spacing: 1px; } .btn-dark:hover { color: #ea5413; border: 1px solid #ea5413; background-color: transparent; } .btn-underline { outline: none; border: none; border-bottom: 1px dashed #ea5413; color: #ea5413; background-color: transparent; margin-top: 1rem; } .blog-tabs .btn-light { margin: 1.5rem 0; color: #ea5413; position: absolute; bottom: 1rem; left: 3.5rem; } .blog-tabs .btn-light:hover { margin: 1.5rem 0; color: white; background-color: #ea5413; position: absolute; bottom: 1rem; left: 3.5rem; } /* sec-action */ .sec-action { /* padding-bottom: 7rem; */ background-color: #ffebe2; margin-bottom: 0 !important; } .sec-action .container-fluid { padding: 0; } .sec-action .action-clip { width: 100%; background-color: #ea5413; padding: 2rem 0; border-color: #ea5413; } .sec-action .action-clip h2 { color: white; } .sec-action .action-triangle { clip-path: polygon(0 0, 50% 60%, 100% 0); -webkit-clip-path: polygon(0 0, 50% 60%, 100% 0); background: #ea5413; height: 8rem; border-color: #ea5413; } .sec-action form { padding: 4rem 0; } .sec-action form .action-input { padding: 0.8rem; display: block; width: 35rem; margin: 0 auto; border: 1px solid #9b9b9b; border-radius: 8px; outline: none; } .sec-action form .action-input::placeholder { color: #9b9b9b; } .sec-action form .action-input::-webkit-input-placeholder { color: #9b9b9b; } .sec-action form .action-input:-moz-input-placeholder { color: #9b9b9b; } .sec-action form .action-input:-ms-input-placeholder { color: #9b9b9b; } .sec-action .action-btn { border: none; outline: none; padding: 0.8rem 3.5rem 0.5rem; border-radius: 3rem; font-size: 2rem; background-color: white; color: #ea5413; margin-bottom: 3rem; letter-spacing: 1px; } .sec-action .action-btn:hover { opacity: 0.9; } /* footer */ .footer { background-color: #f0f0f0; padding: 3rem; } .footer .row { display: flex; align-items: center; } .footer .footer-aigirl { font-weight: 600; font-size: 2rem; margin-top: 1rem; margin-bottom: 2.5rem; } .footer .footer-follow { font-size: 1.6rem; margin-bottom: 1rem; } .footer .footer-socials a { margin-right: 5px; } #content .container { margin-top: 50px; } .box-image-text .image { min-height: 200px; max-height: 200px; } .box-simple { min-height: 200px; margin-bottom: 0; } .box-simple .video__desc { color: black; font-size: 1.8rem; text-align: left; padding-left: 1rem; padding-right: 1rem; } .goto__btn { text-align: center; margin-top: 2rem; margin-left: auto; margin-right: auto; } .container__footer { display: flex; align-items: center; } .box-simple .icon__feature { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; } .box-simple .icon__feature > i { font-size: 4.5rem; } #content .container_list { margin-top: 100px; } #post-content img { max-width: 100%; box-shadow: 0 11px 21px 0 rgba(194, 194, 194, 0.644); transition: all 0.3s; margin: 1.5rem 0; } #post-content img:hover { transform: translateY(-0.125em); box-shadow: 0 5px 10px 0 rgba(grey, 0.3); } #post-content i { font-size: 2rem; vertical-align: middle; } #blog-post { padding-bottom: 3rem; } #blog-post h2 { font-family: "Proxima Nova", sans-serif; margin-right: 5px; font-size: 3.2rem; padding-left: 2rem; border-left: 4px solid #ea5413; letter-spacing: 1px; } #blog-post h3 { font-family: "Proxima Nova", sans-serif; font-size: 2.4rem; font-weight: 900; letter-spacing: 1px; /* padding-left: 1rem; */ /* border-left: 4px solid #EA5413; */ } #blog-post p, #blog-post li { font-size: 2rem; font-family: "Proxima Nova", sans-serif; letter-spacing: 1px; } #blog-post p { margin-bottom: 1.8rem; letter-spacing: 1px; line-height: 32px; } #blog-post code { color: black; font-size: 80%; background-color: transparent; } #blog-post .info { display: flex; align-items: center; justify-content: space-between; } #blog-post .info ul { padding: 0; margin-bottom: 0; display: flex; flex-wrap: wrap; list-style: none; } #blog-post .info ul li { margin: 5px 10px 5px 0; font-size: 14px; letter-spacing: 1px; } #blog-post .info small { white-space: nowrap; } #blog-post .info a { display: inline-block; padding: 5px 10px; border: solid 1px #eeeeee; border-radius: 5px; color: #ea5413; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } #blog-post .info a:hover { border: solid 1px #ea5413; } #blog-post .back-link { display: block; text-align: center; margin: 50px 0; font-size: 16px; font-weight: bold; } #block-vtuber { padding: 30px 0; margin-bottom: 40px; font-family: "Proxima Nova", sans-serif; color: #181c47; } #block-vtuber h2 { font-family: "Poppins", sans-serif; font-weight: bolder; font-size: 3.7rem; } #block-vtuber p { font-size: 1.8rem; line-height: 3rem; } .txt-block { padding: 4rem 0; } .sec { padding: 9rem 0; margin-bottom: 0; } .sec01 { padding-top: 2rem; } .sec-right { position: absolute; right: -15%; top: 10%; } .sec02 { background-color: #ffebe2; position: relative; /* clip-path: polygon(0% -10%, 100% 0%, 110% 100%, 0% 100%); */ } .sec03, .sec04, .sec05 { text-align: center; padding: 12rem 0; } .sec04 { padding: 8rem 0; background-color: #ffebe2; position: relative; padding-top: 3rem; } .sec04::after { display: none; content: ""; position: absolute; top: -66px; left: 0; display: block; width: 100%; height: 66px; transform: rotate(180deg); background-image: url("https://i.imgur.com/fR4Tz5V.png"); background-size: 3840px 66px; background-position: 0 0; } .sec02::after { display: none; content: ""; position: absolute; bottom: -66px; left: 0; display: block; width: 100%; height: 66px; background-image: url("https://i.imgur.com/fR4Tz5V.png"); background-size: 3840px 66px; background-position: 0 0; } .sec05 { position: relative; padding-top: 0; padding-bottom: 4rem; background-color: #ffebe2; } .sec05::after { display: none; content: ""; position: absolute; bottom: -66px; left: 0; display: block; width: 100%; height: 66px; background-image: url("https://i.imgur.com/fR4Tz5V.png"); background-size: 3840px 66px; background-position: 0 0; } .img_decor { position: absolute; left: 4rem; top: 1rem; } .project { max-height: 16rem; } .project .owl-pagination { display: none; } .owl-carousel.project .owl-buttons { bottom: 0; transform: translateX(-50%); } .owl-carousel.project .owl-buttons div { box-shadow: 3px 3px 16px 0 rgb(98 125 152 / 8%), 0 -1px 8px 0 rgb(0 0 0 / 4%); padding: 1rem; width: 40px; height: 40px; border-radius: 50%; color: black; } .owl-carousel.project .owl-buttons div:hover { box-shadow: 3px 3px 16px 0 rgb(98 125 152 / 3%), 0 -1px 8px 0 rgb(0 0 0 / 1%); } .owl-carousel .owl-controls .owl-buttons, .owl-theme .owl-controls .owl-buttons { top: 110%; right: 50%; } .txt-block .rankblock { list-style: none; padding: 0; } .txt-block .rankblock li { font-size: 2.2rem; margin-bottom: 1rem; } .txt-block .rankblock span { display: inline-block; width: 45px; height: 45px; border-radius: 50%; background-color: #ea5413; color: white; line-height: 35px; /* margin-right: 1rem; */ font-size: 1.6rem; padding-left: 6px; padding-top: 6px; } .btn-template-main { color: #ea5413; } .btn { color: #ea5413; border: 2px solid #ea5413; border-radius: 2rem; } .btn:hover { background-color: #ea5413; border: 2px solid #ea5413; } #blog-listing-medium .post { color: #181c47; } #blog-listing-medium .tag-post .image { position: relative; overflow: visible; } #blog-listing-medium .tag-post .image::after { position: absolute; content: " "; right: 2rem; bottom: 2rem; width: 100%; height: 100%; z-index: -1; } #blog-listing-medium .tag-post .image img { border: 5px solid white; } #blog-listing-medium .tag-post:nth-of-type(3n + 1) .image::after { background-color: thistle; } #blog-listing-medium .tag-post:nth-of-type(3n + 2) .image::after { background-color: #f3f3f9; } #blog-listing-medium .tag-post:nth-of-type(3n) .image::after { background-color: #eba764; } .v-tabs { max-width: 100%; } .v-tabs-nav li { float: left; width: 25%; list-style: none; } .v-tabs-nav li a { color: grey; font-size: 2.5rem; letter-spacing: 2px; display: block; font-weight: 600; padding: 10px 0; text-align: center; text-decoration: none; } .v-tabs-nav li a:hover { color: black; } .v-tab-active a { background: #fff; border-bottom: 2px solid grey; color: #2db34a; cursor: default; } .v-tabs-stage { clear: both; padding: 40px 30px 10px 30px; position: relative; top: -1px; text-align: left; } #block-vtuber .v-tabs-stage h2 { font-size: 2.5rem; } #block-vtuber .v-tabs .owl-page span { background: #ea5413; } .d-tabs { max-width: 100%; } .d-tabs-nav li { float: left; width: 50%; list-style: none; } .d-tabs-nav li a { color: grey; font-size: 2.5rem; letter-spacing: 2px; display: block; font-weight: 600; padding: 10px 0; text-align: center; text-decoration: none; } .d-tabs-nav li a:hover { color: black; } .d-tab-active a { background: transparent; border-bottom: 2px solid grey; color: #2db34a; cursor: default; } .d-tabs-stage { clear: both; padding: 40px 30px 10px 30px; position: relative; top: -1px; text-align: left; } #block-vtuber .d-tabs-stage h2 { font-size: 2.5rem; } .m-tabs { max-width: 100%; } .m-tabs-nav li { float: left; width: 50%; list-style: none; } .m-tabs-nav li a { color: grey; font-size: 2.5rem; letter-spacing: 2px; display: block; font-weight: 600; padding: 10px 0; text-align: center; text-decoration: none; } .m-tabs-nav li a:hover { color: black; } .m-tab-active a { background: transparent; border-bottom: 2px solid grey; color: #2db34a; cursor: default; } .m-tabs-stage { clear: both; padding: 40px 30px 10px 30px; position: relative; top: -1px; text-align: left; } #block-vtuber .m-tabs-stage h2 { font-size: 2.5rem; } .sec06 { text-align: center; padding: 2rem 0; position: relative; color: black; } .sec06-left { position: absolute; left: 2rem; top: -10rem; } .sec06-right { position: absolute; right: 2rem; bottom: 5rem; } .sec06 > .container { box-shadow: 0px 0px 8px 2px rgb(212, 212, 212); transform: translateY(-12rem); background-color: white; padding: 3rem 0; padding-bottom: 7rem; position: relative; } .sec06 .sec06-icons { position: absolute; left: 4rem; bottom: 2rem; } .sec06 .sec06-icons img { margin-right: 1rem; } .grow_title { text-align: center; } .grow_txt { font-size: 1.2rem; } .grow_call { font-weight: 700; font-family: Arial, Helvetica, sans-serif; font-size: 2.3rem; display: block; margin-top: 1.5rem; margin-bottom: 1rem; color: #ea5413; } .grow_btn { padding: 1.2rem 7rem; font-size: 2.5rem; border: 2px solid #ea5413; background: transparent; outline: none; border-radius: 5rem; transition: all 0.3s; display: inline-block; color: #ea5413; text-decoration: none; } .grow_btn:hover { color: white; background: #ea5413; text-decoration: none; } .grow_img { display: block; margin: 0 auto; margin-top: 1rem; } .owl-item { height: 300px; overflow: hidden; } .advantages-list { text-align: center; } .txt-block .advantages-list span { text-align: center; } @media (max-width: 992px) { .sec-usecase .container { width: 85%; max-width: 1200px; } .sec-steps .steps-block { padding: 0rem; } .sec-steps .steps-block::after { width: 100%; height: 12rem; } .sec-steps .steps-imgfr { width: 100%; height: 20rem; } .sec-steps .steps-imgfr img { width: 100%; } .sec-steps .steps-txt h3.steps-sub { font-size: 1.3rem; } .sec-steps .steps-txt span { width: 25px; height: 25px; background-color: #ea5413; font-size: 1.3rem; line-height: 25px; } .sec-features .row { margin: 5rem 0; } .sec-features .features-col { position: relative; height: 25vh; } .sec-features .features-col .features-block { left: 2rem; top: 1rem; } .sec-features .row .d-md-block { display: none; } .sec-features .row .d-block { display: block; } .sec-hero .col-left { margin-top: 2.5rem; } } @media (max-width: 765px) { .sec-steps .steps-block { padding: 2rem 15rem; } .sec-steps .steps-imgfr { width: 100%; height: 32vh; } .sec-usecase .row > div { width: 50%; } .sec-features { margin-bottom: 0; } .blog-tabs { flex-direction: column; } .blog-tabs .blog-tabs-stage { width: 95%; margin-top: -4rem; background-color: white; } .blog-tabs .blog-tabs-nav { width: 95%; background-color: #f0f0f0; padding: 4rem 2.5rem; list-style: none; box-shadow: 0 2px 5px -2px rgb(173, 173, 173); text-align: left; } .blog-tabs .blog-tabs-nav li { padding: 10px; border-bottom: 1px dashed grey; } .blog-tabs .blog-tabs-nav li a { color: #ea5413; } .footer .container .row { flex-direction: column; text-align: center; } .navbar-collapse .navbar-nav li { display: inline-block; } .nav > li { display: inline-block; } } @media (max-width: 576px) { .sec { padding-left: 2rem; padding-right: 2rem; } .sec04 { padding: 8rem 0; background-color: #ffebe2; position: relative; padding-top: 3rem; } .project { max-height: 20rem; } .sec04 { padding: 12rem 0; padding-top: 3rem; } .sec-hero { padding: 4rem 0; } .sec-hero .hero-title { font-size: 2.5rem; } .sec-steps .steps-block { padding: 2rem 6rem; } .sec-steps .steps-imgfr { width: 100%; height: 20rem; } .sec-steps .steps-txt h3.steps-sub { font-size: 1.5rem; } .sec-usecase .container { width: 98%; max-width: 1200px; } .sec-usecase .row > div { width: 100%; } .sec-usecase .usecase-block { padding: 0 4rem; } .hero-purple { width: 130px; } .hero-orange-s { left: 0%; width: 60px; } .hero-textgrp { left: 8%; width: 200px; } .hero-video { right: 5%; width: 90px; } .hero-amplify { width: 90px; } #content .container { margin-top: 0; } .sec01 { padding-top: 0; } #heading-breadcrumbs { margin-bottom: 0; background: white, url("https://i.imgur.com/N7tVTSh.png"); } #heading-breadcrumbs a { font-size: 1rem; } #block-vtuber { padding: 0; } #blog-listing-medium .tag-post:nth-of-type(3n + 1) .image::after { background-color: transparent; } #blog-listing-medium .tag-post:nth-of-type(3n + 2) .image::after { background-color: transparent; } #blog-listing-medium .tag-post:nth-of-type(3n) .image::after { background-color: transparent; } .owl-carousel .owl-controls .owl-buttons, .owl-theme .owl-controls .owl-buttons { top: 130%; } .owl-item { height: unset; } .v-tabs-nav { padding: 0 30px; } .d-tabs-nav { padding: 0 30px; } .m-tabs-nav { padding: 0 30px; } } @media (max-width: 992px) { .container__footer { flex-direction: column; } .container__footer > div { margin-bottom: 1.5rem; } .video__col { margin-bottom: 2rem; } .mb-mobile { margin-bottom: 5rem; } .step__box { margin-bottom: 2rem; } } .btn:hover { color: white; } .box-steps { border: 1px solid #181c47; padding: 1rem; border-radius: 5rem; position: relative; } .box-steps .step__box { position: absolute; left: -5px; top: -5px; width: 4rem; height: 4rem; background-color: white; } .box-steps .step__box span { font-size: 3rem; font-weight: 600; color: #38a7bb; } .box-steps .icon { border: none; } .box-steps .icon > i { font-size: 3.5rem; } .box__video { min-height: 280px; } .footer__btn__text { font-size: 2rem; color: white; } .table { display: flex; /* box-shadow: 0 0 5px 1px rgb(197, 197, 197); */ border-radius: 15px; align-items: center; height: 280px; } .table .column { min-height: 280px; background-color: white; padding: 10px 2rem; } .table .column .body__company { font-size: 1.6rem; font-weight: 500; } .fa-check { margin-left: 4px; color: rgb(5, 212, 5); } .table .column .body__head { color: gray; } .table .column__first { border-radius: 15px 0 0 15px; } .table .column__last { border-radius: 0 15px 15px 0; } .table .column__choozmo { border: 1px solid rgb(212, 212, 212); box-shadow: 0 0 5px 1px rgb(197, 197, 197); border-radius: 15px; height: 340px; } .table .column div { min-height: 65px; } .navbar-brand > img { display: inline-block; } @media (max-width: 767px) { .visible-xs { display: inline-block !important; } } .logo { width: 185px; } @media (max-width: 1400px) { .logo { width: 150px; } } @media (max-width: 1200px) { .navbar-expand-lg .navbar-nav .nav-link { padding-right: 0.3rem; padding-left: 0.3rem; } } .logo-sm { width: 150px; height: 40px; } .logo_text { vertical-align: middle; } .footer-img { height: 60px; } .followus { display: flex; align-items: center; justify-content: flex-start; margin-top: 1rem; } .followus__txt { display: inline-block; margin-right: 1rem; color: white; font-weight: 600; } .followus .followus__img { margin-right: 1rem; } .bar.mb-0 { margin-bottom: 0; } .headingvf { margin-bottom: 1.5rem; } .headingvf-sub { margin-bottom: 4rem; } .headingvf-sub h4 { color: grey; font-weight: 400; font-size: 1.6rem; line-height: 2.2rem; } .testimonial_img { width: 200px; border-radius: 50%; display: block; margin-left: auto; margin-right: auto; } .testimonial-title { font-size: 2rem; } .testimonial-text { font-size: 1.6rem; } .testimonials__pro { margin-bottom: 1rem; } .testimonials__pro p { font-size: 1.6rem; } .testimonials__goto__btn a { animation-name: move; animation-duration: 1.5s; animation-delay: 0; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: linear; } @keyframes move { 0% { box-shadow: 0 0 0 transparent; } 50% { box-shadow: 5px 5px 4px #887e74; } 100% { box-shadow: 0 0 0 transparent; } } .row__rank { height: min-content; } .rank__box { min-height: min-content; } .rank .rank__word { display: inline-block; font-weight: 500; position: relative; } .rank .rank__word::after { position: absolute; content: " "; width: 100%; height: 2px; left: 20%; top: 90%; background-color: #499aa8af; } .rank__num { display: inline-block; font-size: 3.5rem; color: #38a7bb; font-style: italic; font-weight: 600; } .video__steps { margin-top: 6rem; } .btn-video { text-align: center; display: block; width: 18rem; margin: 1rem auto; } @media (max-width: 992px) { .video__steps { margin-top: 1rem; } } .video-steps { display: flex; text-align: center; } .steps__box { flex: 20%; position: relative; } .steps__icon { font-size: 5rem; color: #38a7bb; } .steps__name { font-size: 1.8rem; color: rgb(68, 67, 67); margin-bottom: 1rem; } .steps__num { position: absolute; left: 15%; top: -2.5rem; font-size: 4rem; color: #72969c; font-weight: 500; } .card { margin: 1.5rem; margin-right: 0rem; box-shadow: 4px 4px 1px rgb(0, 0, 0, 0.1); transition: all 0.5s; text-align: center; height: 42vh; max-height: 45vh; border-radius: 1rem; background-color: #fff; position: relative; } .vt-style { display: inline-block; padding: 0.3rem 0.4rem; background-color: #ffebe2; margin: 0 0.2rem; } .vt-ribbon { position: absolute; top: 1rem; left: -10px; width: 25%; height: 30px; background-color: #ffba9d; box-shadow: 1px 1px 1px rgb(0, 0, 0, 0.5); text-align: center; color: #181c47; transition: 0.4s; } .vt-ribbon p { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.1s; } .vt-ribbon::before { position: absolute; left: 0px; z-index: -1; width: 10px; height: 100%; background-color: #f7a17d; content: ""; transition: 0.2s; transition-delay: 0.5s; } .vt-ribbon::after { position: absolute; top: 100%; left: 0px; z-index: -1; width: 20px; height: 9px; background-color: #f7a17d; content: ""; transition: 0.2s; transform: rotate(45deg); } .card:hover { transform: translate(-3px, -3px); } .card:hover .vt-ribbon { width: 0; } .card:hover .vt-ribbon p { opacity: 0; } .card:hover .vt-ribbon::before { left: 10px; } .card:hover .vt-ribbon::after { left: 10px; } .card-img-fr { width: 100%; transition: all 0.8s; height: 20vh; background-size: cover; background-position: top; background-repeat: no-repeat; background-color: #fff; } .card-title { font-size: 2.1rem; margin-bottom: 2rem; } .card .card-body { padding: 1rem; } .card .card-link { display: block; color: #ea5413; border: 2px solid #ea5413; border-radius: 2rem; padding: 5px 12px; cursor: pointer; background-color: transparent; transition: all 0.4s; margin: 1rem auto; } .card .card-link:hover { color: white; background-color: #ea5413; } .more-modal .btn-primary { background-color: white; color: #ea5413; } .more-modal .modal-header { border-bottom: none; } .more-modal .modal-footer { border-top: none; } .more-modal .close { font-size: 26px; } @media (max-width: 765px) { #vt-list .row > div { padding-left: 0px; } } .modal-imgfr { width: 100%; height: 50vh; background-size: contain; background-position: center; background-repeat: no-repeat; } .modal-slide-item { width: 100%; height: 50vh; background-position: center center; background-size: contain; background-repeat: no-repeat; cursor: pointer; } .modal-body-title { font-size: 2rem; padding: 0.6rem 0; margin: 1.5rem 0; position: relative; display: inline-block; } .modal-body-title::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-bottom: 3px solid #ea5413; content: " "; } .modal-body-icon { margin: 1.5rem 0; margin-bottom: 0.8rem; display: block; font-size: 1.6rem; } .modal-body-demand { position: relative; display: inline-block; padding: 0.6rem 0; margin: 1rem 0; } .modal-body-demand::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-bottom: 3px solid #ea5413; content: " "; } .modal-body-follow { position: relative; display: inline-block; padding: 0.6rem 0; margin: 1rem 0; } .modal-body-follow::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-bottom: 3px solid #ea5413; content: " "; } .modal-socials .footer-socials a { margin-right: 1.2rem; } .hashtag-pill { padding: 0.3rem; display: inline-block; background-color: #ffc107; border-radius: 0.3rem; margin: 1.2rem 0.3rem; } .modal-body-music { display: flex; justify-content: space-around; align-items: center; } .music-progress { position: relative; width: calc(100% - 70px); margin-top: 20px; margin-bottom: 20px; margin-left: 10px; cursor: pointer; background: rgba(211, 211, 211, 0.3); } .music-progress:before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 5px; background: rgba(211, 211, 211, 0.3); border-radius: 5px; z-index: -1; } .music-progress-bar { position: relative; width: 0; height: 5px; border-radius: 5px; background-color: rgb(168, 209, 255); } .music-progress-bar:after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: rgba(255, 255, 255, 1); filter: drop-shadow(0px 0px 4px rgba(46, 45, 45, 1)); border-radius: 50%; box-sizing: border-box; } .demand-item { padding: 0.2rem 0.5rem; position: relative; z-index: 2; } .demand-item::after { position: absolute; left: 5%; bottom: 0; background-color: antiquewhite; width: 90%; height: 0.3rem; content: ""; z-index: 1; } .catalog { border: 1px solid antiquewhite; background-color: antiquewhite; } .seo_list_content a { font-size: 18px; font-weight: 400; line-height: 28px; letter-spacing: 1px; } .seo_list_header { font-size: 18px; } .Seo_list_itemWrap { margin: 2px 0 0 14px; } .seo_content_box { padding: 14px 18px 18px; background: #fafafa; } .seo_list_header { margin-bottom: 6px; } .seo_list p { margin-bottom: 1.6em !important; letter-spacing: 1px; } .seo_list table { width: 100%; margin-bottom: 1.4em; max-width: 100%; border: 1px solid #eaeaea; font-size: 16px; } .seo_list table tbody tr td { width: 40%; padding: 1em 1.4em; border: solid 1px #bbb; text-align: left; } .seo_list table th { padding: 1em 1.4em; border: solid 1px #bbb; text-align: left; } .seo_list table thead th { padding: 1em 1.4em; border: solid 1px #bbb; text-align: left; } .seo_list .fw-bold { font-weight: 900; } .seo_list ul { margin-bottom: 32px; } .seo_list ul li { margin-bottom: 0.8em; } .seo_list .LearnMore { padding: 10px 20px; border: 1px solid #ea5413; border-radius: 30px; background: #ea5413; color: #fff; -webkit-transition: 0.3s; transition: 0.3s; font-size: 18px; } .seo_list .LearnMore:hover { color: #ea5413; background: #fff; } @media screen and (max-width: 576px) { .seo_list .LearnMore { margin-top: 15px; } } .seo_img { width: 90% !important; } .about-action { margin-top: 150px; } .about-action h2 { position: relative; top: 30px; z-index: 1; font-size: 28px; } .about-action .action-triangle { margin-top: -1px; } .about-action .action-clip { padding: 0; } .about-action .action-btn { color: #000; font-size: 20px; font-weight: bold; } .aicustomerSec01 { width: 90%; margin: 100px auto; } .aicustomerSec01 img { border-radius: 15px; } .aicustoerSec02-0 { width: 70%; margin: 30px auto; /* background-image: url(../img/aicustomer/aicustomerbg.png); background-repeat: no-repeat; background-size: contain; */ } .aicustoerSec02-1 { justify-content: space-between; } .aicustoerSec02-1, p { margin-top: 30px; } .aicustoerSec02-title { margin-left: 70px; } .aicustomer-title-line { width: 700px; height: auto; object-fit: cover; } @media (max-width: 767px) { .aicustomer-title-line { width: 365px; height: auto; object-fit: cover; } } .aicustoerSec02 { background-image: url(../img/aicustomer/aicustomerbg.png); background-repeat: no-repeat; background-size: contain; background-position: center; } .aicustoerSec03 { background-image: url(../img/aicustomer/aiccc.webp); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 500px; } @media screen and (max-width: 768px) { .aicustoerSec03 { background-image: url(../img/aicustomer/aicustomer-m-bg.webp); background-size: contain; /* background-position: center; */ background-attachment: scroll; height: 300px; } } .aicustoerSec04, .aicustoerSec06 { width: 80%; margin: 50px auto; } .aisec02img-3 { margin-top: -30px; } @media screen and (max-width: 768px) { .aisec02img-3 { margin-top: 0px; } } .aicustoerSec05 { background-image: url(../img/aicustomer/aicustomerbg2.webp); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 500px; } @media screen and (max-width: 768px) { .aicustoerSec05 { background-image: url(../img/aicustomer/aicustomer-m-bg2.webp); background-size: contain; /* background-position: center; */ background-attachment: scroll; height: 300px; } } .arrow-wave { display: inline-block; cursor: pointer; margin-top: -130px; font-size: 0; /* background-color: rgba(100,100,100,0.4); */ } @media screen and (max-width: 768px) { .arrow-wave { display: none; } } .arrow-wave span { display: block; position: relative; height: 19px; width: 30px; /* background-color: rgba(100,100,100,0.4); */ opacity: 0.2; } .arrow-wave span::before, .arrow-wave span::after { display: block; content: ""; position: absolute; height: 4px; width: 23px; background-color: #fff; } .arrow-wave span::before { top: -2px; left: 0; transform-origin: left center; transform: rotate(45deg); } .arrow-wave span::after { top: -2px; right: 0; transform-origin: right center; transform: rotate(-45deg); } .arrow-wave span:nth-child(1n) { animation: animate-arrow-wave 2s infinite; animation-delay: 0.25s; } .arrow-wave span:nth-child(2n) { animation: animate-arrow-wave 2s infinite; animation-delay: 0.5s; } .arrow-wave span:nth-child(3n) { animation: animate-arrow-wave 2s infinite; animation-delay: 0.75s; } @keyframes animate-arrow-wave { 0% { opacity: 0.2; } 25% { opacity: 0.2; } 50% { opacity: 0.2; } 75% { opacity: 1; } 100% { opacity: 0.2; } } .aicustomerSec01_cta_arrow { margin-top: -30px; } .aicustoerSec06 .accordion { margin-top: 30px; } #aicustoerCta .sec-action .action-clip { width: 100%; background-color: #ea5413; padding: 2rem 0; border-color: #ea5413; } #aicustoerCta .sec-action h2 { font-size: 2rem; } #aicustoerCta a { background-color: white; color: #ea5413; text-decoration: none; font-size: 20px; font-weight: 600; padding: 20px 30px; }