/* Created on : 23.06.2022, 00:56:00 Author : Alekhnovich Oleg (https://webplatinum.net) */ /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ :root { --global-palette1: #01626a; --global-palette2: #017c86; --global-palette3: #1A202C; --global-palette4: #2D3748; --global-palette5: #232323; --global-palette6: #585858; --global-palette7: #EDF2F7; --global-palette8: #F7FAFC; --global-palette9: #ffffff; --global-palette9rgb: 255, 255, 255; --global-palette-highlight: var(--global-palette1); --global-palette-highlight-alt: #01808d; --global-palette-highlight-alt2: var(--global-palette9); --global-palette-btn-bg: #01626a; --global-palette-btn-bg-hover: var(--global-palette9); --global-palette-btn: var(--global-palette9); --global-palette-btn-hover: #000000; --global-body-font-family: Roboto, sans-serif; --global-heading-font-family: inherit; --global-primary-nav-font-family: e-Ukraine-UltraLight, sans-serif; --global-fallback-font: sans-serif; --global-display-fallback-font: sans-serif; --global-content-width: 1290px; --global-content-narrow-width: px; --global-content-edge-padding: 1.5rem; --global-content-boxed-padding: 1em; --global-calc-content-width: calc(1290px - var(--global-content-edge-padding) - var(--global-content-edge-padding)); --wp--style--global--content-size: var(--global-calc-content-width); } /*body,*/ p, input, select, optgroup, textarea { font-style: normal; font-weight: normal; font-size: 18px; line-height: 1.6; font-family: 'Roboto', sans-serif; color: var(--global-palette4); } /* CUSTOMIZE THE MAIN CAROUSEL -------------------------------------------------- */ #mainCarousel .carousel { margin-bottom: 4rem; } #mainCarousel .carousel-caption { bottom: 3rem; z-index: 10; } #mainCarousel .carousel-item { height: 32rem; } #mainCarousel .carousel-bg-filter { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: black; background: rgba(0, 0, 0, 0.5); } /* CAROUSEL FOR ADDITIONAL PRODUCT IMAGES -------------------------------------------------- */ .additional-carousel-indicator { opacity: .5; transition: all 0.3s ease; } .additional-carousel-indicator:hover { opacity: 1; transition: all 0.3s ease; } .additional-carousel-indicator.active { opacity: 1; transition: all 0.3s ease; } /* CUSTOMIZE THE JUMBOTRON -------------------------------------------------- */ .jumbotron-bg-filter { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #e9ecef; background: rgba(0, 0, 0, 0.4); } /* CUSTOMIZE THE JUMBOTRON -------------------------------------------------- */ .jumbotron { background-color: #e9ecef; background-repeat: no-repeat; background-position: center; background-size: cover; padding-top: 3rem; padding-bottom: 3rem; } /* PAGINATION -------------------------------------------------- */ .pagination { --bs-pagination-color: #333; --bs-pagination-active-color: #fff; --bs-pagination-active-bg: #003b77; --bs-pagination-active-border-color: #003b77; } /* CARD -------------------------------------------------- */ .blog-card-body a { color: #003b77; } .blog-card-body:hover { background-color: #003b77; color: lightgrey !important; transition: all .6s; } .blog-card-body a:hover { color: #fff !important; } .trust-card-body a { color: black; } .trust-card-body:hover { background-color: rgba(35, 35, 35, 0.9); color: white !important; transition: all .6s; } .trust-card-body a:hover { color: white !important; } .trust-card-body p { color: black; } .trust-card-body:hover p { color: white; } .img-square { width: 90%; margin: auto; overflow: hidden; /* clearfix */ } .img-square:before { content: ""; padding-top: 100%; float: left; } .img-fluid-square { max-width: 100%; max-height: 100%; } /* MAIN CONTENT -------------------------------------------------- */ a { color: #e64c16; } a:hover { color: #003b77; } .text-darkblue { color: #003b77; } .text-orange { color: #e64c16; } .bg-darkblue { background-color: #003b77; } .bg-orange { background-color: #e64c16; } .text-lightgrey { color: #eaf0fb; } .error404 { font-size: 5rem; } @media (min-width: 390px) { .error404 { font-size: 7rem; } } @media (min-width: 576px) { .error404 { font-size: 10rem; } } @media (min-width: 768px) { .error404 { font-size: 14rem; } } @media (min-width: 1200px) { .error404 { font-size: 14rem; } } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #003b77; --bs-btn-border-color: #003b77; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0b5ed7; --bs-btn-hover-border-color: #0a58ca; --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #003b77; --bs-btn-active-border-color: #003b77; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #0d6efd; --bs-btn-disabled-border-color: #0d6efd; } .dropdown-item.active, .dropdown-item:active { /* background-color: #6ca3f4;*/ /*background-color: #6610f247;*/ background-color:#1910f245; color: #000; border-radius: 10px; } .dropdown-item { white-space: normal; } .dropdown-item:hover { background-color: #f2f2f2; border-radius: 20px; } .black-animation-line { position: relative; /*overflow: hidden;*/ } .black-animation-line::before { content: ""; position: absolute; bottom: 0px; left: 0px; width: 0px; height: 1px; background: #000000; -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .black-animation-line:hover::before { width: calc(100% - 0px); } /* USER ACCOUNT -------------------------------------------------- */ @media (min-width: 768px) { .sidebar .offcanvas-lg { position: -webkit-sticky; position: sticky; top: 48px; } .navbar-search { display: block; } } .sidebar .nav-link { font-size: .875rem; } .sidebar .nav-link.active { font-weight: 500; color: #e64c16 !important; } .sidebar-heading { font-size: .75rem; } /* 3th LEVEL SUBMENU (BOOTSTRAP 5.x) -------------------------------------------------- */ .dropdown-submenu, .dropdown-item { position: relative; } .dropdown-submenu>a.dropdown-toggle::after { transform: rotate(-90deg); position: absolute; right: 3px; top: 0px; bottom: 0px; align-self: center; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-left: 0.1rem; margin-right: 0.1rem; } .dropdown-submenu>.dropdown-menu-end { left: auto; right: 100%; margin-left: 0; margin-right: 0.1rem; } .dropdown-submenu>a.dropdown-toggle.dropdown-toggle-start::after { transform: rotate(90deg); right: unset; left: 0px; } /* BUTTON UP -------------------------------------------------- */ #btn-back-to-top { position: fixed; bottom: 7px; right: 7px; display: none; } /* CSS3 EFFECTS -------------------------------------------------- */ .fade-img { -webkit-transition: all 0.3s ease; ; -moz-transition: all 0.3s ease; ; -o-transition: all 0.3s ease; ; transition: all 0.3s ease; opacity: 1; } .fade-img:hover { -webkit-transition: all 0.3s ease; ; -moz-transition: all 0.3s ease; ; -o-transition: all 0.3s ease; ; transition: all 0.3s ease; opacity: 0.5; } /* MEDIA -------------------------------------------------- */ /* @media (min-width: 390px) { } @media (min-width: 576px) { } @media (min-width: 768px) { } @media (min-width: 1200px) { } */ /************************** SEO ********************************/ .main-bg { padding-top: 13vh; padding-bottom: 18vh; } .modal-content { top: 50px; } .kt-row-layout-overlay { border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; } .kt-row-layout-overlay { opacity: 0.50; background-color: #000000; mix-blend-mode: normal; } /*********/ .kt-blocks-modal-link { align-items: center; background: transparent; border: 2px solid #555; cursor: pointer; display: inline-block; display: inline-flex; justify-content: center; line-height: 24px; outline: 0; padding: 4px 8px; transition: all .3s cubic-bezier(0, 0, .2, 1); color: #ffffff; background: #ff6900; border-color: #555555; border-radius: 7px; font-size: 21px; line-height: 24px; border-width: 0px 0px 0px 0px; padding: 10px 20px 10px 20px; margin: 0px 0px 0px 0px; } .kt-blocks-modal-link:hover, #kt-modal_a0dc5f-7c .kt-blocks-modal-link:focus { background: #017c86; border-color: #444444; } .bg-main-orange { background-color: #ff6900; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; overflow: clip; isolation: isolate; } .kt-row-layout-bottom-sep { height: 13vh; } .kt-row-layout-bottom-sep { position: absolute; height: 100px; bottom: -1px; left: 0; overflow: hidden; right: 0; z-index: 1; } .kt-row-layout-bottom-sep svg { fill: rgba(255, 255, 255, 0.31) !important; } .kt-row-layout-bottom-sep svg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100.2%; height: 100%; display: block; fill: #fff; } .custom-list { list-style-type: none; padding-left: 12px; } .custom-list>li { padding-left: 35px; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-size: 20px 20px; padding-bottom: 10px; } .about-list { list-style-type: none; padding-left: 12px; } .about-list>li { padding-left: 35px; /* background-image: url('data:image/svg+xml;utf8,');*/ background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-size: 20px 20px; padding-bottom: 10px; } .advantages-wrap svg { color: var(--global-palette2); } .advantages-about:hover .advantages-wrap svg { color: white; transition: color 0.3s ease; /* Плавное изменение цвета */ } .advantages-about:hover .advantages-wrap p { color: white; transition: color 0.3s ease; /* Плавное изменение цвета */ } .advantages-about:hover { background-color: var(--global-palette2); color: white; border-radius: 20px; transition: color 0.3s ease; /* Плавное изменение цвета */ } .bg-dark-cyan { background-color: var(--global-palette2); } .border-trust { border-style: solid; border-color: var(--global-palette2); border-width: 0 0 0 3px; padding-left: 16px; } .bg-main-green { background-color: #03acbd; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; overflow: clip; isolation: isolate; } .kt-testimonial-text-wrap { border: 2px solid var(--global-palette7, #eeeeee); padding: 20px; position: relative; border-radius: 10px; text-align: left; /* font-size: 18px;*/ } .kt-testimonial-text-wrap:after { height: 0; left: 20px; top: 100%; position: absolute; border-top: 14px solid var(--global-palette7, #eeeeee); border-bottom: 14px solid rgba(0, 0, 0, 0); border-left: 14px solid rgba(0, 0, 0, 0); border-right: 14px solid rgba(0, 0, 0, 0); content: ""; transform: none; width: 0; } .custom-col { flex: 0 0 20%; /* 5 колонок в рядку на великих екранах */ max-width: 20%; } @media (max-width: 992px) { .custom-col { flex: 0 0 50%; /* 2 колонки в рядку на середніх і малих екранах */ max-width: 50%; } } /***************** Accordion **************************/ .home .accordion-button { background: -webkit-linear-gradient(to right, #151ab2 0%, #4c68e2 100%); background: -moz-linear-gradient(to right, #151ab2 0%, #4c68e2 100%); background: linear-gradient(to right, #151ab2 0%, #4c68e2 100%); border-radius: 5rem !important; color: white; } .home .accordion-button::after { color: white; } .home .accordion-button:focus { z-index: 3; outline: 0; box-shadow: none; } .home .accordion-header:not(.collapsed) { border-radius: 5rem !important; } .home .accordion-button:not(.collapsed) { color: white; box-shadow: none; font-size: 24px; border-radius: 5rem !important; } .home .accordion-button.collapsed h2 { margin: 0 auto; text-align: center; width: 100%; display: flex; justify-content: center; } .home .accordion-button h2 { text-align: left; justify-content: flex-start; } .home .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-size: 30px; width: 30px; height: 30px; } .home .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-size: 30px; width: 30px; height: 30px; } /******************** ODOMETR FILE ***********************************/ .odometer.odometer-auto-theme, .odometer.odometer-theme-default { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; position: relative; } .odometer.odometer-auto-theme, .odometer.odometer-theme-default { *display: inline; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit { *display: inline; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; visibility: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer { *display: inline; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner { text-align: left; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon { display: block; } .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner { display: block; -webkit-backface-visibility: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value { display: block; -webkit-transform: translateZ(0); } .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value { position: absolute; } .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner { -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; transition: transform 2s; } .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner { -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; transition: transform 2s; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .odometer.odometer-auto-theme, .odometer.odometer-theme-default { font-family: "Helvetica Neue", sans-serif; line-height: 1.1em; } .odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value { text-align: center; } /************************************/ .croud-links { background-image: url(../images/pages/cover-inskin.webp); background-repeat: no-repeat; background-position: center; background-size: cover; color: white; margin-top: 100px; } .bg-croud { position: relative; background-color: transparent; background-image: linear-gradient(180deg, #4CB7C800 0%, #3988951A 100%); border-radius: 30px; padding-top: 100px; } .bg-croud:before { content: ""; background-image: url(../images/pages/bg-header-in.webp); width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-position: bottom left; background-repeat: no-repeat; display: block; mix-blend-mode: initial; opacity: 0.03; transition: .3s; border-radius: 30px; border-style: solid; border-color: #000000; border-block-start-width: 0px; border-inline-end-width: 0px; border-block-end-width: 0px; border-inline-start-width: 0px; } .footer-phone a { color: #ffffff; } .footer-phone a:hover { color: #adadad; } @media (max-width: 991px) { .container-seo { margin-left: 1%; margin-right: 1%; } } @media (min-width: 992px) { .container-seo { margin-left: 1%; margin-right: 1%; } } @media (min-width: 1600px) { .container-seo { max-width: 1600px; margin-left: auto; margin-right: auto; } } .elementor-button { background-color: transparent; font-family: "Roboto", Sans-serif; font-size: 24px; font-weight: 400; background-image: linear-gradient(120deg, #FF6900 60%, #FF69004D 100%); border-radius: 5px 5px 5px 5px; padding: 14px 32px 14px 32px; display: inline-block; color: #FFFFFF; cursor: pointer; } .elementor-button:focus { background-color: transparent; background-image: linear-gradient(120deg, #FF69004D 0%, #FF6900 30%); } .elementor-button:hover { background-color: transparent; background-image: linear-gradient(120deg, #FF69004D 0%, #FF6900 30%); } .header-button { background-color: transparent; font-family: "Roboto", Sans-serif; /* font-size: 24px;*/ font-weight: 400; background-image: linear-gradient(120deg, #FF6900 60%, #FF69004D 100%); border-radius: 5px 5px 5px 5px; padding: 10px 20px 10px 20px; display: inline-block; color: #FFFFFF; cursor: pointer; } .header-button:focus { background-color: transparent; background-image: linear-gradient(120deg, #FF69004D 0%, #FF6900 30%); } .header-button:hover { background-color: transparent; background-image: linear-gradient(120deg, #FF69004D 0%, #FF6900 30%); } .white-button { background-color: transparent; font-family: "Roboto", Sans-serif; font-size: 24px; font-weight: 400; background-image: linear-gradient(120deg, #FFFFFF 60%, #FF69004D 100%); border-radius: 5px 5px 5px 5px; padding: 14px 32px 14px 32px; display: inline-block; color: #FFFFFF; cursor: pointer; } .white-button:focus { background-color: transparent; background-image: linear-gradient(120deg, #FF69004D 0%, #FFFFFF 30%); } .white-button:hover { background-color: transparent; background-image: linear-gradient(120deg, #FF69004D 0%, #FFFFFF 30%); } .croud-arrow-down { margin: 0px 0px -10px 0px; } .trust-heading-title h1, .trust-heading-title h2, .trust-heading-title h3 { font-family: "Roboto", Sans-serif; font-weight: 700; text-transform: uppercase; } .trust-heading-title h1 span, .trust-heading-title h2 span, .trust-heading-title h3 span { color: #4CB7C8; } .trust-heading-title h1 p, .trust-heading-title h2 p, .trust-heading-title h3 p { color: #4CB7C8; } .croud-list { color: #4CB7C8; font-family: "Roboto", Sans-serif; font-size: 24px; font-weight: 400; line-height: 28px; padding-left: 20px; } .site-list { color: #209fdf; font-family: "Roboto", Sans-serif; font-size: 24px; font-weight: 400; line-height: 28px; padding-left: 20px; } .croud-text { color: #2D2D2D; font-family: "Roboto", Sans-serif; font-size: 24px; font-weight: 300; line-height: 28px; } .croud-container { margin: 0px -20px 0px -20px; padding: 0px 20px 20px 27px; border-style: solid; border-width: 0px 0px 2px 0px; border-color: #4CB7C8; border-radius: 30px 30px 30px 30px; } .links-channel { border-radius: 30px; background-color: #4CB7C80D; border-style: solid; border-color: #4CB7C8; font-size: 20px; font-weight: 500; color: #33575B; } .bg-posts { border-radius: 30px; background-color: #4CB7C80D; } .stick-padding { margin-top: -110px; position: relative; z-index: 0; } /* @media (min-width: 992px) { .navbar { position: fixed; left: 0; width: 100%; z-index: 12; } .stick-padding { padding-top: 98px; } .stick-padding-post { padding-top: 125px; } .stick-breadcrumb { padding-top: 90px; } } @media (min-width: 992px) { .jumbotron { padding-top: 7rem; } } @media (max-width: 991px) { .padding-after-stick { padding-top: 50px; } } @media (min-width: 992px) { .padding-after-stick { padding-top: 90px; } .product-stick { padding-top: 100px; } } */ .breadcrumb { --bs-breadcrumb-divider-color: white; --bs-breadcrumb-item-active-color: yellow; } .information-container { /* padding: 32px 50px 50px 78px;*/ border-style: solid; border-width: 1px 1px 1px 1px; border-color: #4CB7C8; border-radius: 0px 0px 20px 20px; } .advantages-container { padding: 25px 18px 45px 18px; border-style: solid; border-width: 0px 0px 3px 0px; border-color: #4CB7C8; border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.050980392156862744); height: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .advantages-container:hover { box-sizing: border-box; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } .croud-marketing-container { background-color: transparent; background-image: linear-gradient(0deg, #4CB7C800 0%, #3988951A 100%); } .bg-marketing { position: relative; background-color: transparent; background-image: linear-gradient(0deg, #4CB7C800 0%, #3988951A 100%); border-radius: 30px; } .bg-marketing:before { content: ""; background-image: url(../images/pages/bg-header-in.webp); width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-position: bottom left; background-repeat: no-repeat; display: block; mix-blend-mode: initial; opacity: 0.03; transition: .3s; border-radius: 30px; border-style: solid; border-color: #000000; border-block-start-width: 0px; border-inline-end-width: 0px; border-block-end-width: 0px; border-inline-start-width: 0px; } /******************** TABLE CROUD *********************************************/ .tableseo { border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.050980392156862744); -webkit-border-radius: 20px; -moz-border-radius: 20px; -khtml-border-radius: 20px; display: block; overflow: hidden; border: 0px; font-family: Roboto; font-size: 16px; font-weight: 300; } .tableseo tbody tr:nth-child(even) td { background-color: #f7f7f7; border-color: #ccc; } .tableseo tr td { border-color: #4CB7C84D; } .tableseo td { border-style: solid; border-width: 1px; padding: 0.5em 1em 0.5em 1em; } .tableseo { border-style: solid; border-width: 1px; border-color: #ccc; } .cooperation-container { padding: 25px 25px 45px 25px; border-style: solid; border-width: 2px 2px 2px 2px; border-color: #4CB7C8; border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.050980392156862744); height: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .cooperation-container:hover { box-sizing: border-box; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } .achievements { font-family: "Roboto", Sans-serif; font-size: 64px; font-weight: 700; text-transform: uppercase; text-decoration: none; line-height: 27px; margin-bottom: 40px; color: #FFFFFF; -webkit-text-stroke-width: 2px; stroke-width: 2px; -webkit-text-stroke-color: #33575B; stroke: #33575B; } .btn-info { background-color: #4CB7C8; } /******************* Croud FAQ ********************/ .faq .accordion-header:not(.collapsed) { background-color: transparent; } .faq .accordion-button:not(.collapsed) { background-color: transparent; box-shadow: none; font-size: 24px; } .faq .accordion-button { border: 0; border-radius: 0; font-size: 1.5rem; } .faq .accordion-button:focus { z-index: 3; border-color: white; outline: 0; box-shadow: none; } .faq .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234CB7C8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-size: 30px; width: 30px; height: 30px; } .faq .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234CB7C8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-size: 30px; width: 30px; height: 30px; } .faq .accordion-services .accordion-button { font-size: 1rem; } .faq .accordion-services .accordion-button:not(.collapsed) { font-size: 1rem; } /****************************************************************************/ /*********************** SEO ACCORDION **************************************/ .seo .accordion-header:not(.collapsed) { /* background-color: #feba53;*/ color: black; } .seo .accordion-button:not(.collapsed) { color: black; background-color: #feba53; box-shadow: none; font-size: 24px; } .seo .accordion-button { color: white; background-color: #206c6f; border: 0; border-radius: 0; font-size: 1.5rem; } .seo .accordion-button:focus { z-index: 3; border-color: #feba53; outline: 0; box-shadow: none; } .seo .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-size: 30px; width: 30px; height: 30px; } .seo .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-size: 30px; width: 30px; height: 30px; } .seo .accordion-services .accordion-button { font-size: 1rem; } .seo .accordion-services .accordion-button:not(.collapsed) { font-size: 1rem; } /****************************************************************************/ .seo-1 { background: linear-gradient(-90deg, rgb(174 169 255 / 70%) 0%, rgb(20 39 109 / 3%) 100%); mix-blend-mode: normal; padding-top: 100px; } .seo-3 { background-color: #364351; } .seo-4 { position: relative; background-image: -webkit-linear-gradient(top, #005de245, #1c809a1c), url(../images/pages/kt_01_background_image.jpg); background-size: cover; background-position: 53% 46%; background-attachment: scroll; background-repeat: no-repeat; } .seo-4-layout-overlay { opacity: 0.71; background: linear-gradient(90deg, #00b5e2 0%, #1c809a 100%); mix-blend-mode: overlay; } .seo-4-layout-overlay { top: 0; left: 0; position: absolute; opacity: .3; height: 100%; width: 100%; z-index: 0; filter: opacity(100%); } .seo-bg-filter { position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.71; background: linear-gradient(90deg, #00b5e2 0%, #1c809a 100%); } .kb-svg-icon-wrap { color: var(--global-palette9, #ffffff); font-size: 50px; background: var(--global-palette2, #2B6CB0); /* border-color: #dddddd; border-width: 5px;*/ border-radius: 50%; padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px; } .kb-svg-icon-wrap { border: 5px solid var(--bs-gray-400); transition: all .3s ease-in-out; padding: 20px } .kb-svg-icon-wrap { display: inline-flex; justify-content: center; align-items: center; /* border-width: 0;*/ } .kb-svg-icon-wrap svg { width: 1em; height: 1em; } .bg-palette-2 { background-color: var(--global-palette2); } .color-palette-2 { color: var(--global-palette2); } .u-head { margin-top: 30px; margin-bottom: 20px; /* font-size: 58px;*/ line-height: 1.2em; font-family: 'e-UkraineHead-UltraLight', sans-serif; color: #0a1f41; font-weight: 500; } .order-seo { font-family: 'Montserrat'; } .about-rounded img { border-radius: 9999px; } .about-rounded-2 { border-radius: 9999px; } .card-hover { background-color: #fdfdfd; color: #fff; text-align: center; border: 2px solid #e7edf8; border-radius: 5px; padding: 10px 10px 10px 10px; min-height: 350px; min-width: 250px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .card-hover:hover { background-color: #ffffff; color: #fff; text-align: center; box-sizing: border-box; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); /* border: 0px solid #e7edf8;*/ } .text-block { max-width: 400px; font-family: Arial, sans-serif; } .full-text { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s ease-out, opacity 0.5s ease-out; } .full-text.show { max-height: 500px; /* Укажите большее значение, чем нужно, чтобы скрытый текст раскрылся */ opacity: 1; } button.toggle-btn { background: none; border: none; color: blue; cursor: pointer; padding: 5px 0; font-size: 14px; } /*BUTTON CALLBACK*/ #popup__circle { bottom: 15px; left: 0px; position: fixed; z-index: 999; } .img-circle { background-color: #419fd9; box-sizing: content-box; -webkit-box-sizing: content-box; } .circlephone { box-sizing: content-box; -webkit-box-sizing: content-box; border: 2px solid #0f8ede; width: 100px; height: 100px; bottom: -15px; left: 3px; position: absolute; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; opacity: .5; -webkit-animation: circle-anim 2.4s infinite ease-in-out !important; -moz-animation: circle-anim 2.4s infinite ease-in-out !important; -ms-animation: circle-anim 2.4s infinite ease-in-out !important; -o-animation: circle-anim 2.4s infinite ease-in-out !important; animation: circle-anim 2.4s infinite ease-in-out !important; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all 0.5s; } .circle-fill { box-sizing: content-box; -webkit-box-sizing: content-box; background-color: #419fd9; width: 65px; height: 65px; bottom: 3px; left: 20px; position: absolute; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; -webkit-animation: circle-fill-anim 2.3s infinite ease-in-out; -moz-animation: circle-fill-anim 2.3s infinite ease-in-out; -ms-animation: circle-fill-anim 2.3s infinite ease-in-out; -o-animation: circle-fill-anim 2.3s infinite ease-in-out; animation: circle-fill-anim 2.3s infinite ease-in-out; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all 0.5s; } .img-circle { box-sizing: content-box; -webkit-box-sizing: content-box; width: 50px; height: 50px; bottom: 10px; left: 27px; position: absolute; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; opacity: .7; } .img-circleblock { box-sizing: content-box; -webkit-box-sizing: content-box; margin-left: 8px; margin-top: 8px; width: 32px; height: 32px; animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } .img-circle:hover { opacity: 1; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 1; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 1; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 1; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 1; } } @keyframes tossing { 0% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } 100% { transform: rotate(-8deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-8deg); } 50% { -webkit-transform: rotate(8deg); } 100% { -webkit-transform: rotate(-8deg); } } @-moz-keyframes circle-anim { 0% { -moz-transform: rotate(0deg) scale(0.5) skew(1deg); opacity: .1; -moz-opacity: .1; -webkit-opacity: .1; -o-opacity: .1; } 30% { -moz-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .5; -moz-opacity: .5; -webkit-opacity: .5; -o-opacity: .5; } 100% { -moz-transform: rotate(0deg) scale(1) skew(1deg); opacity: .6; -moz-opacity: .6; -webkit-opacity: .6; -o-opacity: .1; } } @-webkit-keyframes circle-anim { 0% { -webkit-transform: rotate(0deg) scale(0.5) skew(1deg); -webkit-opacity: .1; } 30% { -webkit-transform: rotate(0deg) scale(0.7) skew(1deg); -webkit-opacity: .5; } 100% { -webkit-transform: rotate(0deg) scale(1) skew(1deg); -webkit-opacity: .1; } } @-o-keyframes circle-anim { 0% { -o-transform: rotate(0deg) kscale(0.5) skew(1deg); -o-opacity: .1; } 30% { -o-transform: rotate(0deg) scale(0.7) skew(1deg); -o-opacity: .5; } 100% { -o-transform: rotate(0deg) scale(1) skew(1deg); -o-opacity: .1; } } @keyframes circle-anim { 0% { transform: rotate(0deg) scale(0.5) skew(1deg); opacity: .1; } 30% { transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .5; } 100% { transform: rotate(0deg) scale(1) skew(1deg); opacity: .1; } } @-moz-keyframes circle-fill-anim { 0% { -moz-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } 50% { -moz-transform: rotate(0deg) -moz-scale(1) skew(1deg); opacity: .2; } 100% { -moz-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } } @-webkit-keyframes circle-fill-anim { 0% { -webkit-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } 50% { -webkit-transform: rotate(0deg) scale(1) skew(1deg); opacity: .2; } 100% { -webkit-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } } @-o-keyframes circle-fill-anim { 0% { -o-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } 50% { -o-transform: rotate(0deg) scale(1) skew(1deg); opacity: .2; } 100% { -o-transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } } @keyframes circle-fill-anim { 0% { transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } 50% { transform: rotate(0deg) scale(1) skew(1deg); opacity: .2; } 100% { transform: rotate(0deg) scale(0.7) skew(1deg); opacity: .2; } } @font-face { font-family: 'e-UkraineHead-UltraLight'; src: url('fonts/e-ukrainehead-bold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'e-UkraineHead-UltraLight'; src: url('fonts/e-ukrainehead-ultralight.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'e-UkraineHead-UltraLight'; src: url('fonts/e-ukraine-ultralight.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'e-UkraineHead-UltraLight'; src: url('fonts/e-ukrainehead-light.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-ExtraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Italic.woff2') format('woff2'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-ThinItalic.woff2') format('woff2'); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Bold.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-ExtraLightItalic.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-BlackItalic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-BoldItalic.woff2') format('woff2'); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-LightItalic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; } .list-card ul { padding-left: 2.6rem; } .list-card ul li { font-size: 16px; line-height: 2em; padding-left: 0.5em; /* дополнительный отступ текста от маркера */ text-indent: -0.5em; /* компенсируем отступ для первой строки */ position: relative; list-style-type: none; color: #696969; } .list-card ul li:before { background: url(../images/check-green-new.svg); background-repeat: no-repeat; content: ""; height: 24px; padding-right: 11px; width: 15%; position: absolute; left: -2.5em; top: 3px; } .seo-links-card .list-group { font-family: 'Manrope', sans-serif; } .seo-links-card .list-group p { font-family: 'Manrope', sans-serif; } .btn.simple { border: 1px solid #696969; -webkit-transition: .3s; transition: .3s; } .special-offer { background-color: #54b876; border-radius: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 62px 30px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 17px; margin-top: 23px; text-decoration: none; } .special-offer h2 { color: #fff; font-size: 32px; font-weight: 700; letter-spacing: -.04em; line-height: 45px; text-align: center; text-transform: capitalize; } .special-offer button { display: inline-block; font-size: 16px; line-height: 22px; text-align: center; letter-spacing: -0.01em; color: black; padding: 9px 19px; border: 1px solid white; background: white; border-radius: 10px; text-decoration: none; transition: 0.3s; } .special-offer button:hover { color: white; background: transparent; } .button_2x.new { min-width: 250px !important; width: inherit !important; padding: 0 25px !important; } .button_2x { height: 62px !important; width: 250px !important; display: flex !important; justify-content: center !important; align-items: center !important; font-size: 24px !important; max-width: 100% !important; } /***************************************************/ .service-block { position: relative; margin-bottom: 30px; } .service-block .inner-box { position: relative; text-align: center; border-radius: 8px; padding: 70px 20px 60px; background-color: #ffffff; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.10); } .service-block .inner-box .color-layer { position: absolute; content: ''; left: 0px; top: 0px; right: 0px; bottom: 0px; border-radius: 8px; } .service-block .inner-box .color-layer:before { position: absolute; content: ''; left: 0px; top: 0px; width: 50%; height: 100%; opacity: 0; background: #D34AE0; transform: rotateY(90deg); border-radius: 8px 0px 0px 8px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background: -webkit-linear-gradient(to bottom, #D34AE0 0%, #6615B2 100%); background: -moz-linear-gradient(to bottom, #D34AE0 0%, #6615B2 100%); background: linear-gradient(to bottom, #D34AE0 0%, #6615B2 100%); } .service-block .inner-box .color-layer:after { position: absolute; content: ''; right: 0px; top: 0px; width: 50%; height: 100%; opacity: 0; background: #D34AE0; transform: rotateY(90deg); border-radius: 0px 8px 8px 0px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background: -webkit-linear-gradient(to bottom, #D34AE0 0%, #6615B2 100%); background: -moz-linear-gradient(to bottom, #D34AE0 0%, #6615B2 100%); background: linear-gradient(to bottom, #D34AE0 0%, #6615B2 100%); } .service-block .inner-box:hover .color-layer:before, .service-block .inner-box:hover .color-layer:after { opacity: 1; transform: rotateY(0deg); } .service-block .inner-box .pattern-layer-one { position: absolute; left: 0px; top: 0px; width: 262px; height: 175px; border-radius: 8px; background-image: url(../images/pages/service-pattern.png); background-repeat: no-repeat; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block .inner-box:hover .pattern-layer-one { opacity: 0; } .service-block .inner-box .pattern-layer-two { position: absolute; left: 0px; top: 0px; width: 108px; height: 123px; opacity: 0; background-image: url(../images/pages/service-pattern-2.png); background-repeat: no-repeat; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block .inner-box:hover .pattern-layer-two { opacity: 1; } .service-block .inner-box .icon-box { position: relative; color: #242e6c; font-size: 60px; line-height: 1em; margin-bottom: 20px; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block .inner-box:hover h5 a, .service-block .inner-box:hover .text, .service-block .inner-box:hover .icon-box { color: #ffffff; } .service-block .inner-box h5 { position: relative; line-height: 1.3em; font-weight: 600; } .service-block .inner-box h5 a { position: relative; color: #222222; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block .inner-box .text { position: relative; color: #777777; font-size: 15px; line-height: 1.7em; margin-top: 15px; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block .inner-box .arrow-icon { position: absolute; left: 50%; bottom: -25px; width: 50px; height: 50px; color: #ffffff; font-size: 18px; line-height: 44px; text-align: center; border-radius: 50px; display: inline-block; border: 3px solid #ffffff; background: #FE8B57; margin-left: -25px; opacity: 0; transform: translateY(-25px); box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.10); background: -webkit-linear-gradient(to bottom, #FE8B57 0%, #ea3368 100%); background: -moz-linear-gradient(to bottom, #FE8B57 0%, #ea3368 100%); background: linear-gradient(to bottom, #FE8B57 0%, #ea3368 100%); transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block .inner-box:hover .arrow-icon { transform: translateY(0px); opacity: 1; } .service-block.style-two .inner-box .color-layer:before { background-color: #4c68e2; background: -webkit-linear-gradient(to bottom, #4c68e2 0%, #161ab2 100%); background: -moz-linear-gradient(to bottom, #4c68e2 0%, #161ab2 100%); background: linear-gradient(to bottom, #4c68e2 0%, #161ab2 100%); } .service-block.style-two .inner-box .color-layer:after { background-color: #4c68e2; background: -webkit-linear-gradient(to bottom, #4c68e2 0%, #161ab2 100%); background: -moz-linear-gradient(to bottom, #4c68e2 0%, #161ab2 100%); background: linear-gradient(to bottom, #4c68e2 0%, #161ab2 100%); } .service-block.style-two .inner-box .arrow-icon { background-color: #ff2800; background: -webkit-linear-gradient(to bottom, #ff2800 0%, #ff2800 100%); background: -moz-linear-gradient(to bottom, #ff2800 0%, #ff2800 100%); background: linear-gradient(to bottom, #ff2800 0%, #ff2800 100%); } /**************************************************/ .sec-title .title { position: relative; color: #555555; font-size: 18px; font-weight: 600; padding-right: 60px; display: inline-block; text-transform: uppercase; font-family: 'Poppins', sans-serif; } .sec-title .title:before { position: absolute; content: ''; right: 0px; top: 4px; width: 43px; height: 15px; background: url(../images/pages/title-icon.png) no-repeat; } .sec-title-2 .title:after { position: absolute; content: ''; left: -60px; top: 4px; width: 43px; height: 15px; background: url(../images/pages/title-icon.png) no-repeat; } /*****************************************************/ .blue-bg { position: relative; z-index: 0; background-image: url(../images/pages/blue-wawes.webp); background-repeat: no-repeat; background-position: center; background-size: cover; min-height: 70vh; } .blue-bg-header { position: relative; /* z-index: 0;*/ background-image: url(../images/pages/blue-wawes.webp); background-repeat: no-repeat; background-position: center; background-size: cover; /* min-height: 70vh;*/ } .dotted-bg { z-index: 11; background-image: url(../images/pages/dotted-we.webp); background-repeat: no-repeat; background-position: center; background-size: cover; } .btns-box { position: relative; margin-top: 35px; transform-origin: top; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } .theme-btn { cursor: pointer; display: inline-block; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } /* Btn Style Eight */ .btn-style-eight { text-decoration: none; position: relative; display: inline-block; font-size: 16px; line-height: 30px; color: #ffffff; padding: 14px 44px; font-weight: 400; overflow: hidden; border-radius: 6px; overflow: hidden; background: #ff0300; text-transform: capitalize; background: -webkit-linear-gradient(to right, #ff0300 0%, #ff8f00 100%); background: -moz-linear-gradient(to right, #ff0300 0%, #ff8f00 100%); background: linear-gradient(to right, #ff0300 0%, #ff8f00 100%); } .btn-style-eight:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); background: #ff0300; background: -webkit-linear-gradient(to left, #ff0300 0%, #ff8f00 100%); background: -moz-linear-gradient(to left, #ff0300 0%, #ff8f00 100%); background: linear-gradient(to left, #ff0300 0%, #ff8f00 100%); } .btn-style-eight .txt { position: relative; z-index: 1; } .btn-style-eight:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .btn-style-eight:hover { color: #ffffff; } /* Btn Style Nine */ .btn-style-nine { text-decoration: none; position: relative; display: inline-block; font-size: 16px; line-height: 30px; color: #ffffff; padding: 12px 32px 12px; font-weight: 400; overflow: hidden; background: none; border-radius: 5px; text-transform: capitalize; border: 2px solid #ffffff; font-family: 'Archivo', sans-serif; } .btn-style-nine:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); background-color: #ff0100; } .btn-style-nine .txt { position: relative; z-index: 1; } .btn-style-nine:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .btn-style-nine:hover { color: #ffffff; border-color: #ff0100; } /* Btn Style Ten */ .btn-style-ten { text-decoration: none; position: relative; display: inline-block; font-size: 18px; line-height: 30px; color: #ffffff; padding: 15px 40px; font-weight: 400; overflow: hidden; border-radius: 5px; overflow: hidden; text-transform: capitalize; background-color: #ff0500; font-family: 'Archivo', sans-serif; } .btn-style-ten:before { position: absolute; content: ''; left: 110%; top: 0px; width: 100%; height: 100%; z-index: 1; opacity: 1; background-color: #ff8a00; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; transform: skewX(-25deg); } .btn-style-ten .txt { position: relative; z-index: 1; } .btn-style-ten:hover::before { left: 0%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .btn-style-ten:hover { position: relative; color: #ffffff; /* z-index: 2;*/ } @keyframes shake-left-right-1 { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @keyframes shake-left-right-2 { 0%, 100% { transform: translateX(0); } 33% { transform: translateX(-7px); } 66% { transform: translateX(7px); } } .main-img-1 { max-width: 25%; height: auto; } .main-img-2 { max-width: 50%; height: auto; } .main-img-3 { position: relative; max-width: 70%; height: auto; margin-left: -250px; } /* Ключевые кадры анимации */ @keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } /* Анимация */ .parallax>use { animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .parallax>use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax>use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax>use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax>use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } .waves { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 15vh; z-index: 1; margin-bottom: -8px; min-height: 100px; max-height: 150px; } /***********************************************/ @media (max-width: 767px) { .container-rotate { display: none; } } @media (min-width: 768px) { .container-rotate { width: 467px; height: 467px; overflow: hidden; position: absolute; z-index: 10; } } .rotating-image { width: 467px; height: 467px; transform-origin: center center; animation: rotate 10s linear infinite; /* Сдвигаем изображение вправо, чтобы скрыть левую половину */ margin-left: -300px; /* 467px / 2 */ } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /***********************************/ /* ==================================================================== Services Section Two ==================================================================== ***/ /* .services-section-two{ position: relative; padding: 0px 0px 0px; } .services-section-two:before{ position:absolute; content:''; left:0px; bottom:0px; right:0px; height:290px; background-color:#f3f4ff; } .services-section-two .inner-container{ position: relative; background: #FD8C56; border-radius:10px; background: -webkit-linear-gradient(to bottom, #FD8C56 0%, #ea3368 100%); background: -moz-linear-gradient(to bottom, #FD8C56 0%, #ea3368 100%); background: linear-gradient(to bottom, #FD8C56 0%, #ea3368 100%); } .services-section-two .service-block-two{ padding:0px; float:left; margin-bottom:10px; } .services-section-two.style-two{ padding:110px 0px 110px; } .services-section-two.style-two .inner-container{ background:none; } .services-section-two.style-two::before{ display:none; } .services-section-two.style-two .lower-box{ position:relative; text-align:center; margin-top:50px; } .services-section-two.style-two .lower-box .text{ position:relative; color:#555555; font-size:16px; padding:12px 40px; border-radius:2px; display:inline-block; border:1px dashed #d7d7d7; } .services-section-two.style-two .lower-box .text a{ position:relative; font-weight:600; } */ /* Service Block Two */ .service-block-two { position: relative; margin-bottom: 30px; } .service-block-two .inner-box { position: relative; text-align: left; border-radius: 10px; padding: 50px 45px 60px; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block-two .inner-box .icon-one { position: absolute; left: 50%; top: 60px; width: 19px; height: 19px; opacity: 0; background-image: url(../images/icons/icon-1.png); background-repeat: no-repeat; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block-two .inner-box .icon-two { position: absolute; left: 30px; bottom: 30px; width: 19px; height: 19px; opacity: 0; background-image: url(../images/icons/icon-2.png); background-repeat: no-repeat; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block-two .inner-box .icon-three { position: absolute; right: 30px; bottom: 30px; width: 34px; height: 29px; opacity: 0; background-image: url(../images/icons/icon-19.png); background-repeat: no-repeat; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block-two .inner-box .icon-four { position: absolute; right: 30px; top: 30px; width: 29px; height: 39px; opacity: 0; background-image: url(../images/icons/icon-4.png); background-repeat: no-repeat; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block-two .inner-box:hover .icon-one, .service-block-two .inner-box:hover .icon-two, .service-block-two .inner-box:hover .icon-three, .service-block-two .inner-box:hover .icon-four { opacity: 1; } .service-block-two .inner-box:hover { box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); } .service-block-two .inner-box .color-layer { position: absolute; content: ''; left: 0px; top: 0px; right: 0px; bottom: 0px; border-radius: 10px; } .service-block-two .inner-box .color-layer:before { position: absolute; content: ''; left: 0px; top: 0px; width: 50%; height: 100%; opacity: 0; background: #ffffff; transform: rotateY(90deg); border-radius: 8px 0px 0px 8px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .service-block-two .inner-box .color-layer:after { position: absolute; content: ''; right: 0px; top: 0px; width: 50%; height: 100%; opacity: 0; background: #ffffff; transform: rotateY(90deg); border-radius: 0px 8px 8px 0px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .service-block-two .inner-box:hover .color-layer:before, .service-block-two .inner-box:hover .color-layer:after { opacity: 1; transform: rotateY(0deg); } .service-block-two .inner-box .pattern-layer-one { position: absolute; left: 0px; top: 0px; width: 262px; height: 175px; border-radius: 8px; background-repeat: no-repeat; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block-two .inner-box:hover .pattern-layer-one { opacity: 0; } .service-block-two .inner-box .pattern-layer-two { position: absolute; left: 0px; top: 0px; width: 108px; height: 123px; opacity: 0; background-repeat: no-repeat; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block-two .inner-box:hover .pattern-layer-two { opacity: 1; } .service-block-two .inner-box .icon-box { position: relative; color: #ffffff; z-index: 1; font-size: 60px; line-height: 1em; padding: 10px 10px; margin-bottom: 20px; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; background: url(../images/icons/icon-5.png); background-position: left center; background-repeat: no-repeat; } .service-block-two .inner-box .icon-five { position: absolute; left: 0px; top: 22px; bottom: 0px; width: 74px; height: 56px; z-index: -1; opacity: 0; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block-two .inner-box:hover .icon-five { opacity: 1; } .service-block-two .inner-box:hover .icon-box { color: #742bb9; } .service-block-two .inner-box:hover .icon-box { background: none; } .service-block-two .inner-box:hover h5 a { color: #222222; } .service-block-two .inner-box:hover .text { color: #777777; } .service-block-two .inner-box h5 { position: relative; line-height: 1.3em; font-weight: 600; } .service-block-two .inner-box h5 a { position: relative; color: #ffffff; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block-two .inner-box .text { position: relative; color: #ffffff; font-size: 16px; line-height: 1.8em; margin-top: 10px; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block-two.style-two .inner-box { text-align: center; } .service-block-two.style-two .inner-box .icon-box { padding: 16px 10px; font-size: 50px; background: url(../images/icons/icon-18.png) no-repeat; background-position: center center; } .service-block-two.style-two .inner-box h5 a { color: #222222; } .service-block-two.style-two .inner-box .text { color: #555555; } .service-block-two.style-two .inner-box:hover .icon-box { color: #ffffff; } .service-block-two.style-two .inner-box:hover .text, .service-block-two.style-two .inner-box:hover h5 a { color: #ffffff; } .service-block-two.style-two .inner-box .color-layer:before { background-color: #ff8c00; background: -webkit-linear-gradient(to bottom, #ff8c00 0%, #ff0200 100%); background: -moz-linear-gradient(to bottom, #ff8c00 0%, #ff0200 100%); background: linear-gradient(to bottom, #ff8c00 0%, #ff0200 100%); } .service-block-two.style-two .inner-box .color-layer:after { background-color: #ff8c00; background: -webkit-linear-gradient(to bottom, #ff8c00 0%, #ff0200 100%); background: -moz-linear-gradient(to bottom, #ff8c00 0%, #ff0200 100%); background: linear-gradient(to bottom, #ff8c00 0%, #ff0200 100%); } /*******************************************/ @font-face { font-family: "Flaticon"; src: url("flaticon.woff") format("woff"); font-weight: normal; font-style: normal; } /* @font-face { font-family: "Flaticon"; src: url("../fonts/flaticon.eot"); src: url("../fonts/flaticon.eot?#iefix") format("embedded-opentype"), url("../fonts/flaticon.woff") format("woff"), url("../fonts/flaticon.ttf") format("truetype"), url("../fonts/flaticon.svg#Flaticon") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: "Flaticon"; src: url("../fonts/flaticon.svg#Flaticon") format("svg"); } } */ [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-family: Flaticon; font-style: normal; } .flaticon-placeholder:before { content: "\f100"; } .flaticon-phone-call:before { content: "\f101"; } .flaticon-timetable:before { content: "\f102"; } .flaticon-unlink:before { content: "\f103"; } .flaticon-play-arrow:before { content: "\f104"; } .flaticon-money-bag:before { content: "\f105"; } .flaticon-trophy:before { content: "\f106"; } .flaticon-magnifying-glass:before { content: "\f107"; } .flaticon-menu:before { content: "\f108"; } .flaticon-shopping-cart:before { content: "\f109"; } .flaticon-settings:before { content: "\f10a"; } .flaticon-share:before { content: "\f10b"; } .flaticon-headphones:before { content: "\f10c"; } .flaticon-garbage:before { content: "\f10d"; } .flaticon-shopping-cart-1:before { content: "\f10e"; } .flaticon-email:before { content: "\f10f"; } .flaticon-message:before { content: "\f110"; } .flaticon-full-screen:before { content: "\f111"; } .flaticon-multiply:before { content: "\f112"; } .flaticon-media-play-symbol:before { content: "\f113"; } .flaticon-arrow-pointing-to-right:before { content: "\f114"; } .flaticon-back:before { content: "\f115"; } .flaticon-pdf:before { content: "\f116"; } .flaticon-loupe:before { content: "\f117"; } .flaticon-menu-1:before { content: "\f118"; } .flaticon-big-anchor:before { content: "\f119"; } .flaticon-tick:before { content: "\f11a"; } .flaticon-email-1:before { content: "\f11b"; } .flaticon-placeholder-1:before { content: "\f11c"; } .flaticon-home-page:before { content: "\f11d"; } .flaticon-safe:before { content: "\f11e"; } .flaticon-paper-plane:before { content: "\f11f"; } .flaticon-smartphone:before { content: "\f120"; } .flaticon-edit:before { content: "\f121"; } .flaticon-plus-symbol:before { content: "\f122"; } .flaticon-user:before { content: "\f123"; } .flaticon-checked:before { content: "\f124"; } .flaticon-menu-2:before { content: "\f125"; } .flaticon-search:before { content: "\f126"; } .flaticon-plus:before { content: "\f127"; } .flaticon-maps-and-flags:before { content: "\f128"; } .flaticon-email-2:before { content: "\f129"; } .flaticon-user-1:before { content: "\f12a"; } .flaticon-tick-1:before { content: "\f12b"; } .flaticon-right-arrow:before { content: "\f12c"; } .flaticon-left-arrow:before { content: "\f12d"; } .flaticon-call:before { content: "\f12e"; } .flaticon-comment:before { content: "\f12f"; } .flaticon-left-quote:before { content: "\f130"; } .flaticon-blocks-with-angled-cuts:before { content: "\f131"; } .flaticon-straight-quotes:before { content: "\f132"; } .flaticon-left-arrow-1:before { content: "\f133"; } .flaticon-right-arrow-1:before { content: "\f134"; } .flaticon-down-arrow:before { content: "\f135"; } .flaticon-grid:before { content: "\f136"; } .flaticon-user-2:before { content: "\f137"; } .flaticon-chat-bubble:before { content: "\f138"; } .flaticon-call-1:before { content: "\f139"; } .flaticon-quote:before { content: "\f13a"; } .flaticon-quote-1:before { content: "\f13b"; } .flaticon-down-arrow-1:before { content: "\f13c"; } .flaticon-time:before { content: "\f13d"; } .flaticon-play:before { content: "\f13e"; } .flaticon-check:before { content: "\f13f"; } .flaticon-check-1:before { content: "\f140"; } .flaticon-close:before { content: "\f141"; } .flaticon-call-2:before { content: "\f142"; } .flaticon-trash:before { content: "\f143"; } .flaticon-check-2:before { content: "\f144"; } .flaticon-call-3:before { content: "\f145"; } .flaticon-send:before { content: "\f146"; } .flaticon-big-envelope:before { content: "\f147"; } .flaticon-email-3:before { content: "\f148"; } .flaticon-play-button:before { content: "\f149"; } .flaticon-play-1:before { content: "\f14a"; } .flaticon-worldwide:before { content: "\f14b"; } .flaticon-trophy-1:before { content: "\f14c"; } .flaticon-quotation:before { content: "\f14d"; } .flaticon-sketch:before { content: "\f14e"; } .flaticon-magnifying-glass-1:before { content: "\f14f"; } .flaticon-avatar:before { content: "\f150"; } .flaticon-heart:before { content: "\f151"; } .flaticon-like:before { content: "\f152"; } .flaticon-back-1:before { content: "\f153"; } .flaticon-chat:before { content: "\f154"; } .flaticon-shopping-bag:before { content: "\f155"; } .flaticon-cancel:before { content: "\f156"; } .flaticon-download:before { content: "\f157"; } .flaticon-next:before { content: "\f158"; } .flaticon-house:before { content: "\f159"; } .flaticon-link:before { content: "\f15a"; } .flaticon-padlock:before { content: "\f15b"; } .flaticon-chat-1:before { content: "\f15c"; } .flaticon-envelope:before { content: "\f15d"; } .flaticon-home:before { content: "\f15e"; } .flaticon-placeholder-2:before { content: "\f15f"; } .flaticon-megaphone:before { content: "\f160"; } .flaticon-eye:before { content: "\f161"; } .flaticon-play-button-1:before { content: "\f162"; } .flaticon-padlock-1:before { content: "\f163"; } .flaticon-planet-earth:before { content: "\f164"; } .flaticon-chat-2:before { content: "\f165"; } .flaticon-magnifying-glass-2:before { content: "\f166"; } .flaticon-quote-2:before { content: "\f167"; } .flaticon-next-1:before { content: "\f168"; } .flaticon-cancel-1:before { content: "\f169"; } .flaticon-menu-3:before { content: "\f16a"; } .flaticon-map:before { content: "\f16b"; } .flaticon-location-pin:before { content: "\f16c"; } .flaticon-notepad:before { content: "\f16d"; } .flaticon-web-search-engine:before { content: "\f16e"; } .flaticon-pen:before { content: "\f16f"; } .flaticon-chat-bubbles-with-ellipsis:before { content: "\f170"; } .flaticon-angle-arrow-pointing-to-right:before { content: "\f171"; } .flaticon-wall-clock:before { content: "\f172"; } .flaticon-shuttle:before { content: "\f173"; } .flaticon-globe:before { content: "\f174"; } .flaticon-network:before { content: "\f175"; } .flaticon-bar-chart:before { content: "\f176"; } .flaticon-pie-chart:before { content: "\f177"; } .flaticon-line-chart:before { content: "\f178"; } .flaticon-search-1:before { content: "\f179"; } .flaticon-gear:before { content: "\f17a"; } .flaticon-cloud-computing:before { content: "\f17b"; } .flaticon-cart:before { content: "\f17c"; } .flaticon-soccer-cup:before { content: "\f17d"; } .flaticon-badge:before { content: "\f17e"; } .flaticon-conversation:before { content: "\f17f"; } .flaticon-chat-3:before { content: "\f180"; } .flaticon-bar-graph:before { content: "\f181"; } .flaticon-growth:before { content: "\f182"; } .flaticon-management:before { content: "\f183"; } .flaticon-in-love:before { content: "\f184"; } .flaticon-mentor:before { content: "\f185"; } .flaticon-target:before { content: "\f186"; } .flaticon-united:before { content: "\f187"; } .flaticon-pdf-1:before { content: "\f188"; } .flaticon-clock:before { content: "\f189"; } .flaticon-pin:before { content: "\f18a"; } .counter-bg { z-index: 1; background: #151ab2; background: -webkit-linear-gradient(to right, #151ab2 0%, #4c68e2 100%); background: -moz-linear-gradient(to right, #151ab2 0%, #4c68e2 100%); background: linear-gradient(to right, #151ab2 0%, #4c68e2 100%); } /************* Your right choice ****************/ .floating-overlay { position: absolute; /* position: relative;*/ bottom: -100px; right: 20px; /* width: 40%;*/ z-index: 2; animation: floatAnimation 3s ease-in-out infinite; } @keyframes floatAnimation { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } } /*** ==================================================================== Team Section Two ==================================================================== ***/ .team-section-two{ position:relative; padding:0px 0px 100px; background-color:#f3f4ff; } .team-block-two{ position:relative; margin-bottom:30px; } .team-block-two .inner-box{ position:relative; padding:0px 0px 28px 70px; } .team-block-two .inner-box:before{ position:absolute; content:''; right:40px; top:55px; left:0px; bottom:0px; border-radius:10px; background-color:#ffffff; -webkit-transition:all 600ms ease; -moz-transition:all 600ms ease; -ms-transition:all 600ms ease; -o-transition:all 600ms ease; transition:all 600ms ease; } .team-block-two .inner-box::after{ position:absolute; content:''; top:55px; left:0px; bottom:0px; width:0%; border-radius:10px; -webkit-transition:all 600ms ease; -moz-transition:all 600ms ease; -ms-transition:all 600ms ease; -o-transition:all 600ms ease; transition:all 600ms ease; background: #ff0300; background: -webkit-linear-gradient(to right, #ff0300 0%, #ff8f00 100%); background: -moz-linear-gradient(to right, #ff0300 0%, #ff8f00 100%); background: linear-gradient(to right, #ff0300 0%, #ff8f00 100%); } .team-block-two .inner-box:hover::after{ width:90%; } .team-block-two .inner-box:hover .lower-content h3 a, .team-block-two .inner-box:hover .lower-content .designation{ color:#ffffff; } /* .team-block-two .inner-box .image{ position:relative; z-index:1; overflow:hidden; border-radius:5px; background-color:#ffffff; box-shadow:inset 0px 0px 35px rgba(0,0,0,0.20); } .team-block-two .inner-box .image img{ position:relative; width:100%; display:block; } */ .team-block-two .inner-box .lower-content{ position:relative; text-align:left; z-index:1; padding:30px 15px 0px 20px; } .team-block-two .inner-box .lower-content h3{ position:relative; color:#222222; font-size:24px; font-weight:600; line-height:1.3em; font-family: 'Poppins', sans-serif; } .team-block-two .inner-box .lower-content h3 a{ position:relative; color:#222222; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .team-block-two .inner-box .lower-content .designation{ position:relative; margin-top:5px; color:#777777; font-size:14px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } /* .team-block-two .inner-box .team-social-box{ position: absolute; left: 18px; top: 80px; z-index:10; } .team-block-two .inner-box .team-social-box li{ position: relative; left: 0px; margin-bottom: 10px; transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; } .team-block-two .inner-box .team-social-box li a{ position: relative; width: 36px; height: 36px; color: #333; z-index: 1; font-size: 15px; line-height: 36px; text-align: center; border-radius: 50%; display: inline-block; background-color: #ffffff; box-shadow:0px 0px 15px rgba(0,0,0,0.10); } .team-block-two .inner-box .team-social-box li .social-name{ position: relative; padding: 0px 10px; top: 0px; left:24px; opacity: 0; width:80px; visibility: hidden; font-size: 12px; margin-left: -32px; text-transform: capitalize; display: inline-block; border-radius: 0px 50px 50px 0px; background-color: #ffffff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .team-block-two .inner-box .team-social-box li:last-child{ margin-bottom:0px; } .team-block-two .inner-box .team-block .inner-box:hover .image .overlay-box .team-social-box li{ left:0px; } .team-block-two .inner-box .team-block .inner-box:hover .image .overlay-box .team-social-box li:nth-child(2){ left:0px; transition-delay: 500ms; } .team-block-two .inner-box .team-block .inner-box:hover .image .overlay-box .team-social-box li:nth-child(3){ left:0px; transition-delay: 750ms; } .team-block-two .inner-box .team-block .inner-box:hover .image .overlay-box .team-social-box li:nth-child(4){ left:0px; transition-delay: 1000ms; } .team-block-two .inner-box .team-social-box li:hover .social-name{ opacity:1; visibility:visible; } .team-block-two .inner-box .team-social-box li a{ position:relative; width:36px; height:36px; color:#333; z-index:1; font-size:15px; line-height:36px; text-align:center; border-radius:50%; display:inline-block; background-color:#ffffff; } .team-block-two .inner-box .team-social-box li.youtube a{ color:#ff0000; } .team-block-two .inner-box .team-social-box li.youtube .social-name{ color:#ffffff; padding:4px 14px 4px 15px; top: -1px; background-color:#ff0000; } .team-block-two .inner-box .team-social-box li.linkedin a{ color:#0077b5; } .team-block-two .inner-box .team-social-box li.linkedin .social-name{ color:#ffffff; padding:4px 14px 4px 15px; top: -1px; background-color:#0077b5; } .team-block-two .inner-box .team-social-box li.facebook a{ color:#3b5998; } .team-block-two .inner-box .team-social-box li.facebook .social-name{ color:#ffffff; padding:4px 14px 4px 15px; top: -1px; background-color:#3b5998; } .team-block-two .inner-box .team-social-box li.twitter a{ color:#1da1f2; } .team-block-two .inner-box .team-social-box li.twitter .social-name{ color:#ffffff; padding:4px 14px 4px 15px; top: -1px; background-color:#1da1f2; } */ /*Верхнее меню */ #fixed-header { background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 30px rgba(0, 0, 0, 0.15); transition: opacity 0.5s ease, transform 0.5s ease !important; will-change: opacity, transform; opacity: 0; transform: translateY(-100%); pointer-events: none; } /* Убедимся, что фиксированное меню поверх всего */ #fixed-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; } #fixed-header.show { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Адаптация для мобильных */ @media (max-width: 991.98px) { #fixed-header { background: rgba(255, 255, 255, 0.98) !important; } #fixed-header .navbar-collapse { max-height: 70vh; /* overflow-y: auto;*/ } } /* Предотвращение мерцания в Safari */ @supports (-webkit-touch-callout: none) { #fixed-header { -webkit-transform: translateZ(0); } } .static-menu .nav-link { border-radius: 40px; color: white; } .static-menu .nav-link:hover { background-color: rgb(21, 25, 178); color: rgb(255, 255, 255); } /* color menu active */ .static-menu .nav-link.active { color: white; background-color: rgb(21, 25, 178); } .navbar-expand-lg .navbar-nav .nav-link { padding-left: 20px; padding-right: 20px; } .next-level { background-image: url(../images/pages/map-pattern.png); background-position: center center; background-repeat: no-repeat; position: relative; margin-top: -180px; padding: 150px 0px 60px; background-color: #f3f4ff; z-index: -1; } /**************************************************/ /*** ==================================================================== Pricing Section ==================================================================== ***/ .pricing-section{ position:relative; padding:0px 0px 100px; background-color:#f3f4ff; } .pricing-section.style-two{ background:none; padding:100px 0px 60px; } .pricing-section.style-three{ padding:120px 0px 80px; } .pricing-section .pattern-layer{ position:absolute; left:0px; top:0px; right:0px; bottom:0px; background-repeat:no-repeat; background-position:center center; } .pricing-section .pattern-layer-two{ position:absolute; left:-40px; top:-150px; width:342px; height:281px; background-repeat:no-repeat; } .pricing-section .pricing-tabs .price-block{ transform:rotateY(90deg); } .pricing-section .pricing-tabs .tabs-content .tab.active-tab .price-block{ transform:rotateY(0deg); } .pricing-section .pricing-tabs .price-block:nth-child(3) .inner-box{ border-color:#eb3967; } .pricing-section .pricing-tabs .price-block:nth-child(3) .inner-box .title{ background: #151ab2; background: -webkit-linear-gradient(to right, #151ab2 0%, #4c68e2 100%); background: -moz-linear-gradient(to right, #151ab2 0%, #4c68e2 100%); background: linear-gradient(to right, #151ab2 0%, #4c68e2 100%); } .pricing-tabs{ position:relative; z-index:2; } .pricing-tabs .tabs-content .tab{ position:relative; display:none; } .pricing-tabs .tabs-content .tab.active-tab{ display:block; } .pricing-tabs .buttons-outer{ text-align:center; } .pricing-tabs .tab-buttons{ position:relative; overflow:hidden; text-align:center; border-radius:5px; margin-top:30px; display:inline-block; background-color:#ffffff; box-shadow:0px 0px 15px rgba(0,0,0,0.10); } .pricing-tabs .tab-buttons .tab-btn{ position:relative; color:#777777; font-size:18px; font-weight:400; float:left; cursor:pointer; padding:16px 48px; border-radius:5px; background-color:#ffffff; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease; } .pricing-tabs .tab-buttons .tab-btn:hover, .pricing-tabs .tab-buttons .tab-btn.active-btn{ color:#ffffff; background: #ff0300; background: -webkit-linear-gradient(to right, #ff0300 0%, #ff8f00 100%); background: -moz-linear-gradient(to right, #ff0300 0%, #ff8f00 100%); background: linear-gradient(to right, #ff0300 0%, #ff8f00 100%); } /* Price Block */ .price-block{ position:relative; margin-bottom:30px; transition:all 900ms ease; -moz-transition:all 900ms ease; -webkit-transition:all 900ms ease; -ms-transition:all 900ms ease; -o-transition:all 900ms ease; } .price-block .inner-box{ position:relative; text-align:center; padding:50px 45px 85px; border-radius:9px; overflow:hidden; border:1px solid #4660dd; background-color:#ffffff; } @media (max-width: 767px) { .price-block .inner-box{ width: 100%; } } @media (min-width: 768px) { .price-block .inner-box{ width: 91%; } } .price-block .inner-box .price-pattern-layer{ position:absolute; left:0px; bottom:0px; right:0px; height:44px; } .price-block .inner-box .price-pattern-layer.style-two{ height:70px; } @keyframes slide{ from { background-position: 0 0; } to { background-position: 3000px 0; } } .price-block .inner-box .title{ position:relative; font-size:16px; color:#ffffff; z-index:1; font-weight:600; border-radius:50px; display:inline-block; padding:10px 30px; background: #ff0300; text-transform: capitalize; font-family: 'Poppins', sans-serif; background: -webkit-linear-gradient(to right, #ff0300 0%, #ff8f00 100%); background: -moz-linear-gradient(to right, #ff0300 0%, #ff8f00 100%); background: linear-gradient(to right, #ff0300 0%, #ff8f00 100%); } .price-block .inner-box .price{ position:relative; font-size:48px; font-weight:600; color:#222222; line-height:1em; margin-top:30px; padding-bottom:20px; border-bottom:1px solid #bbbbbb; font-family: 'Poppins', sans-serif; } .price-block .inner-box .price-list{ position:relative; margin-top:35px; margin-bottom:30px; } .price-block .inner-box .price-list li{ position:relative; color:#555555; font-size:16px; margin-bottom:12px; } .price-block .inner-box .price-list li:last-child{ margin-bottom:0px; } .price-block.active .inner-box{ border:none; background: #151ab2; background: -webkit-linear-gradient(to right, #151ab2 0%, #4c68e2 100%); background: -moz-linear-gradient(to right, #151ab2 0%, #4c68e2 100%); background: linear-gradient(to right, #151ab2 0%, #4c68e2 100%); } .price-block.active .inner-box .title{ color:#4f1d99; background: -webkit-linear-gradient(to right, #ffffff 0%, #ffffff 100%); background: -moz-linear-gradient(to right, #ffffff 0%, #ffffff 100%); background: linear-gradient(to right, #ffffff 0%, #ffffff 100%); } .price-block.active .inner-box .price-list li, .price-block.active .inner-box .price{ color:#ffffff; } /* Btn Style Five */ .btn-style-five{ position: relative; display: inline-block; font-size: 16px; line-height: 30px; color: #ffffff; padding: 14px 44px; font-weight: 400; overflow: hidden; border-radius: 6px; overflow:hidden; text-transform: capitalize; background: #6917B4; background: -webkit-linear-gradient(to right, #6917B4 0%, #d54be1 100%); background: -moz-linear-gradient(to right, #6917B4 0%, #d54be1 100%); background: linear-gradient(to right, #6917B4 0%, #d54be1 100%); } .btn-style-five:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); background: #6917B4; background: -webkit-linear-gradient(to left, #6917B4 0%, #D54BE1 100%); background: -moz-linear-gradient(to left, #6917B4 0%, #D54BE1 100%); background: linear-gradient(to left, #6917B4 0%, #D54BE1 100%); } .btn-style-five .txt{ position:relative; z-index:1; } .btn-style-five:hover::before{ opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .btn-style-five:hover{ color: #ffffff; } /* Btn Style Six */ .btn-style-six{ position: relative; display: inline-block; font-size: 16px; line-height: 30px; color: #6615b3; padding: 14px 44px; font-weight: 400; overflow: hidden; border-radius: 6px; overflow:hidden; text-transform: capitalize; background: #ffffff; text-decoration: none; } .btn-style-six:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); background: #6917B4; background: -webkit-linear-gradient(to left, #6917B4 0%, #D54BE1 100%); background: -moz-linear-gradient(to left, #6917B4 0%, #D54BE1 100%); background: linear-gradient(to left, #6917B4 0%, #D54BE1 100%); } .btn-style-six .txt{ position:relative; z-index:1; } .btn-style-six:hover::before{ opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .btn-style-six:hover{ color: #ffffff; } /* Btn Style Eleven */ .btn-style-eleven{ position: relative; text-decoration: none; display: inline-block; font-size: 16px; line-height: 30px; color: #ffffff; padding: 14px 44px; font-weight: 400; overflow: hidden; border-radius: 6px; overflow:hidden; text-transform: capitalize; background: #1519b2; background: -webkit-linear-gradient(to right, #1519b2 0%, #4c67e2 100%); background: -moz-linear-gradient(to right, #1519b2 0%, #4c67e2 100%); background: linear-gradient(to right, #1519b2 0%, #4c67e2 100%); } .btn-style-eleven:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); background: #1519b2; background: -webkit-linear-gradient(to left, #1519b2 0%, #4c67e2 100%); background: -moz-linear-gradient(to left, #1519b2 0%, #4c67e2 100%); background: linear-gradient(to left, #1519b2 0%, #4c67e2 100%); } .btn-style-eleven .txt{ position:relative; z-index:1; } .btn-style-eleven:hover::before{ opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .btn-style-eleven:hover{ color: #ffffff; } /*** ==================================================================== News Section ==================================================================== ***/ .news-section{ position:relative; overflow:hidden; padding:120px 0px 80px; } .news-section .sec-title .theme-btn{ margin-top:95px; } .news-section .pattern-layer{ position:absolute; right:-50px; top:280px; width:304px; height:281px; background-repeat:no-repeat; } .news-block{ position:relative; margin-bottom:30px; } .news-block .inner-box{ position:relative; } .news-block .inner-box .image{ position:relative; } .news-block .inner-box .image img{ position:relative; width:100%; display:block; } .news-block .inner-box .image .overlay-box{ position:absolute; left:0px; top:0px; width:100%; height:100%; color:#ffffff; text-align:center; background-color:rgba(235,53,103,0.80); transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease,-webkit-transform 0.4s ease; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } .news-block .inner-box:hover .overlay-box{ -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; } .news-block .inner-box .overlay-inner{ position:absolute; left:0px; top:0px; width:100%; height:100%; display:table; vertical-align:middle; padding:10px 0px; } .news-block .inner-box .overlay-inner .content{ position:relative; display:table-cell; vertical-align:middle; } .news-block .inner-box .image .overlay-box .icon{ position:relative; width:60px; height:60px; color:#eb3567; line-height:60px; font-size:18px; text-align:center; border-radius:50px; font-weight:700; display:inline-block; background-color:#ffffff; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease; } .news-block .inner-box .image .overlay-box .icon:hover{ background-color:#6615b2; color:#ffffff; } .news-block .inner-box .lower-content{ position:relative; padding-top:25px; } .news-block .inner-box .lower-content .post-meta{ position:relative; } .news-block .inner-box .lower-content .post-meta li{ position:relative; margin-right:15px; display:inline-block; } .news-block .inner-box .lower-content .post-meta li a{ position:relative; color:#555555; font-size:14px; padding-left:25px; } .news-block .inner-box .lower-content .post-meta li:last-child{ margin-right:0px; } .news-block .inner-box .lower-content .post-meta li a .icon{ position:absolute; left:0px; top: 0; color:#c945dc; } .news-block .inner-box .lower-content h5{ position:relative; line-height:1.6em; font-weight:600; margin-top:10px; } .news-block .inner-box .lower-content h5 a{ position:relative; color:#222222; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease; } .news-block .inner-box .lower-content h5 a:hover{ color:#6615b2; } .news-block.style-two .inner-box .lower-content h5 a:hover{ color:#ff0200; } .news-block.style-two .inner-box .lower-content .post-meta li a .icon{ color:#161cb7; } .news-block.style-two .inner-box .image .overlay-box{ background-color:rgba(255,5,0,0.80); } .news-block.style-two .inner-box .image .overlay-box .icon{ color:#ff0e00; } .news-block.style-two .inner-box .image .overlay-box .icon:hover{ color:#ffffff; background-color:#ff8d00; } /*** ==================================================================== Main Footer ==================================================================== ***/ .main-footer{ position:relative; background: #6917B4; background: -webkit-linear-gradient(to right, #6917B4 0%, #d54be1 100%); background: -moz-linear-gradient(to right, #6917B4 0%, #d54be1 100%); background: linear-gradient(to right, #6917B4 0%, #d54be1 100%); } .main-footer.style-three{ background: #151ab2; background: -webkit-linear-gradient(to right, #151ab2 0%, #4c68e2 100%); background: -moz-linear-gradient(to right, #151ab2 0%, #4c68e2 100%); background: linear-gradient(to right, #151ab2 0%, #4c68e2 100%); } .main-footer .pattern-layer{ position:absolute; left:0px; top:0px; width:100%; height:106px; background-repeat:repeat-x; } /***************************************************/ .page-title .pattern-layer-three{ animation-name: zoom-fade; animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: zoom-fade; -webkit-animation-duration: 8s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: zoom-fade; -moz-animation-duration: 8s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: zoom-fade; -ms-animation-duration: 8s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: zoom-fade; -o-animation-duration: 8s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } @-webkit-keyframes zoom-fade { 0% { -webkit-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes zoom-fade { 0% { -webkit-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); transform: scale(0.8); } } .page-title{ position:relative; text-align:center; overflow:hidden; /*padding:120px 0px 160px;*/ padding:100px 0px 160px; background-image: url(../images/pages/pattern-16.webp); background-repeat:no-repeat; background-position:center bottom; background-size:cover; } .page-title .pattern-layer-one{ position: absolute; left: 0px; top: 0px; width: 260px; height: 330px; background-image: url(../images/pages/pattern-1.png); background-position: center bottom; background-repeat: no-repeat; background-size:cover; transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; } .page-title .pattern-layer-two{ position:absolute; right:0px; bottom:0px; top:0px; width:100%; height:672px; background-image: url(../images/pages/pattern-17.png); background-repeat:repeat-x; } .page-title .pattern-layer-three{ position:absolute; left:8%; bottom: 10%; /*bottom:28%;*/ /* bottom: 50%;*/ width:97px; height:97px; background-image: url(../images/pages/pattern-18.png); background-repeat:repeat-x; } @media (min-width: 992px) { .page-title .pattern-layer-three{ bottom:20%; } .page-title{ padding:120px 0px 160px; } } .page-title .pattern-layer-four{ position:absolute; right:8%; bottom:28%; width:46px; height:46px; background-image: url(../images/pages/cross-icon.png); background-repeat:repeat-x; } .page-title .pattern-layer-two { animation-name: float_left_right_two; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: float_left_right_two; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: float_left_right_two; -moz-animation-duration: 5s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float_left_right_two; -ms-animation-duration: 5s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float_left_right_two; -o-animation-duration: 5s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } @-webkit-keyframes float_left_right_two { 0% { -webkit-transform: translateX(-30px); opacity: 1; } 50% { -webkit-transform: translateX(0px); opacity: 0.80; } 100% { -webkit-transform: translateX(-30px); opacity: 1; } } @keyframes float_left_right_two { 0% { transform: translateX(-30px); opacity: 1; } 50% { transform: translateX(0px); opacity: 0.80; } 100% { transform: translateX(-30px); opacity: 1; } } .page-pattern { position:relative; text-align:center; background-image: url(../images/pages/pattern-16.webp); background-repeat:no-repeat; background-position:center bottom; background-size:cover; } /***************************************************/ .mission-list{ position:relative; list-style: none; } .mission-list li{ position:relative; color:#555555; font-size:18px; line-height:1.9em; padding-left:90px; margin-bottom:30px; } .mission-list li .icon{ position:absolute; left:0px; top:0px; transition:all 600ms ease; -webkit-transition:all 600ms ease; -ms-transition:all 600ms ease; -o-transition:all 600ms ease; -moz-transition:all 600ms ease; } .mission-list li:hover .icon{ -webkit-transform: scale(-1) rotate(180deg); -moz-transform: scale(-1) rotate(180deg); -ms-transform: scale(-1) rotate(180deg); -o-transform: scale(-1) rotate(180deg); transform: scale(-1) rotate(180deg); } @media (min-width: 768px) { .creation-overlay { position: absolute; bottom: 290px; right: 0px; /* opacity: 0.3;*/ /* z-index: -2;*/ animation: floatAnimation 3s ease-in-out infinite; } } .inner-box:hover .text-hover-white { color: white !important; position: relative; } /******* -Creation Site- ********/ .tech-card { background: linear-gradient(to right, #f3f6ff, #e6eeff); padding: 15px; margin-bottom: 15px; border-radius: 8px; border-left: 4px solid #3498db; transition: transform 0.3s ease; } .tech-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .chart-container { height: 200px; display: flex; align-items: flex-end; justify-content: space-around; padding: 20px; background: #f9f9f9; border-radius: 8px; margin: 20px 0; } .bar { width: 50px; background: linear-gradient(to top, #3498db, #2c3e50); border-radius: 5px 5px 0 0; position: relative; transition: height 0.5s ease; } .bar-label { position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); font-weight: bold; } .workflow { display: flex; flex-direction: column; align-items: center; margin: 30px 0; } .step { width: 80%; padding: 20px; background: #e8f4fc; margin: 10px 0; border-radius: 8px; position: relative; text-align: center; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); } .step:not(:last-child):after { content: '↓'; position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); font-size: 24px; color: #3498db; } .code-example { background: #2d3a4b; color: #f8f8f2; padding: 15px; border-radius: 8px; margin: 15px 0; overflow-x: auto; font-family: 'Courier New', monospace; } .tag { color: #f92672; } .attribute { color: #a6e22e; } .value { color: #e6db74; } .comment { color: #75715e; } .animation-demo { height: 100px; background: #e8f4fc; border-radius: 8px; display: flex; justify-content: center; align-items: center; margin: 20px 0; position: relative; overflow: hidden; } .animated-box { width: 50px; height: 50px; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); border-radius: 8px; animation: move 3s infinite alternate; } @keyframes move { 0% { transform: translateX(-100px); } 100% { transform: translateX(100px); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .container { flex-direction: column; } .step { width: 100%; } }