/* ---------------------------------- Template Name: Anaton - SaaS Landing Page Template Author: validtheme Description: Version: 1.0 Main Font : Outfit Main Color : #ff8a43 ------------------------------------- [Typography] Body copy: 15px 'Outfit', sans-serif Header: 36px 'Outfit', sans-serif Input, textarea: 16px 'Outfit', sans-serif Sidebar heading: 22px 'Outfit', sans-serif >>> TABLE OF CONTENTS: ======================= 01. Template default css - Animations - General - Section Title - Video Button - Typography - Tables - Forms - Buttons - Pagination - Colors - Accordion - Tabs 02. Preloader 03 Navbar - Navbar Default - Navbar Transparent - Navbar Sticky 04. Banner - Content Double (Version One) - Software Banner (Version Two) - Animated Banner (Version Three) 05. Feature - Version One - Version Two - Version Three 06. Brand / Partner 07. Overview / Software Details 08. Services - Version One - Version Two - Version Three - Service Details 09. World Wide user / Total Customers 10. Pricing - Version One - Version Two - Version Three 11. Testimonials - Version One - Version Two 12. Faq - Version One - Version Two 13. Work Process 13. Why Choose Us 15. Sign Up Form 16. Technology / Featured With 17. Software Premium Content 18. Team 19. Team Details 20. Projects 21. Projects Details 22. Blog - Standard - Left Sidebar - Right Sidebar - Single 23. Error 404 24. Footer 25. PHP Contact Form 26. Others */ /* Fuente Outfit: ahora se carga desde el (preconnect + link) en BaseLayout.astro para evitar el render-blocking encadenado del @import y reducir los pesos a los usados. */ /* Varialbes */ :root { --font-default: 'Outfit', sans-serif; --font-heading: 'Outfit', sans-serif; --fontawesome: "Font Awesome 5 Pro"; --black: #000000; --dark: #10393b; --dark-secondary: #041637; --white: #ffffff; --color-primary: #ff8a43; --color-secondary: #fa7070; --color-optional: #5153ff; --color-heading: #04000b; --color-paragraph: #666666; --box-shadow-primary: -1px 3px 10px 0 rgba(0, 0, 0, 0.6); --box-shadow-secondary: 0 10px 30px 0 rgba(44, 130, 237, 0.4); --box-shadow-regular: 0px 2px 12px 0px #e7e7e7; --bg-gray: #efefff; --bg-gradient: linear-gradient(90deg, #ff8a43 20%, #fa7070 100%); --bg-gradient-reverse: linear-gradient(90deg, var(--color-optional) 0%, #a60599 100%); } /* ============================================================== # Reset Browsers =================================================================== */ * { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } body, html { height: 100%; } html { margin: 0; padding: 0; width: 100%; height: 100%; scroll-behavior: smooth; } html, body, div, span, img, ol, ul, li, a, p, h1, h2, h3, h4, h5, article, footer, header, nav, section, time { margin: 0; padding: 0; border: 0; outline: 0; } img { border: none; outline: none; max-width: 100%; } a { outline: none; text-decoration: none; color: var(--color-heading); } a img { border: none; } a:active { outline: none; text-decoration: none; color: var(--color-heading); opacity: 1; } a:focus { outline: none; text-decoration: none; color: var(--color-heading); } a:hover { outline: none; text-decoration: none; color: var(--color-primary); opacity: 1; } .secondary a:hover { color: var(--color-optional); } button { outline: medium none; } input { border: 1px solid #e7e7e7; border-radius: inherit; -webkit-box-shadow: inherit; box-shadow: inherit; min-height: 50px; } input:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; } textarea:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; } ul { list-style-type: none; } ul, li { margin: 0; padding: 0; list-style: none; } b { font-weight: 800; } strong { font-weight: 800; } .row { --bs-gutter-x: 30px; } /* ============================================================== # Template Default Styles =================================================================== */ body { font-family: var(--font-default); font-size: 17px; font-weight: 400; line-height: 1.8; overflow-x: hidden; background-color: var(--white); color: var(--color-paragraph); } h1, h2, h3, h4, h5 { color: var(--color-heading); font-weight: normal; line-height: 1.2; font-family: var(--font-heading); letter-spacing: 0; margin: 0; margin-bottom: 15px; } h1 { font-size: 40px; } h2 { font-size: 36px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 22px; } a, .btn, button { -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; outline: medium none; text-decoration: none; font-weight: 600; } p { color: var(--color-paragraph); margin: 0 0 15px; text-transform: none; font-weight: 400; font-family: var(--font-default); } /* ============================================================== # Helper CSS =================================================================== */ @media only screen and (max-width: 767px) { .row { --bs-gutter-x: 1.5rem; } } .bg-cover { background-position: center center !important; background-size: cover !important; } .bg-gray { background: var(--bg-gray); } .bg-dark { background-color: var(--dark) !important; } .bg-gradient { background-color: var(--color-primary); background: var(--bg-gradient) !important; } .text-light { color: var(--white); } .text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5, .text-light p, .text-light span, .text-light a { color: var(--white); } .default-padding, .default-padding-top, .default-padding-bottom { position: relative; } .default-padding { padding-top: 120px; padding-bottom: 120px; } @media only screen and (max-width: 767px) { .default-padding { padding-top: 50px; padding-bottom: 50px; } } .default-padding-top { padding-top: 120px; } @media only screen and (max-width: 767px) { .default-padding-top { padding-top: 50px; } } .default-padding-bottom { padding-bottom: 120px; } @media only screen and (max-width: 767px) { .default-padding-bottom { padding-bottom: 50px; } } @media only screen and (min-width: 1200px) { .align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .overflow-hidden { overflow: hidden; } .border-top { border-top: 1px solid #e7e7e7; } .heading { font-weight: 600; margin-bottom: 25px; margin-top: -5px; font-size: 42px !important; line-height: 1.3; } @media (min-width: 1400px) { .heading { font-size: 55px !important; } } .heading span { font-weight: 400; } .site-heading { margin-bottom: 60px; } .site-heading strong { display: inline-block; font-weight: 600; position: relative; z-index: 1; } .site-heading strong::after { position: absolute; left: 0; bottom: -5px; content: ""; height: 100%; width: 100%; background: url(../img/shape/35.png); background-size: contain; background-repeat: no-repeat; background-position: bottom center; z-index: -1; } .title { font-weight: 600; font-size: 42px; line-height: 1.3; } @media (min-width: 1400px) { .title { font-size: 55px; } } .site-heading .title { margin-bottom: 0; } .site-heading p { margin-bottom: 0; margin-top: 25px; padding: 0 10%; } @media (max-width: 767px) { .site-heading p { padding: 0; } } @media only screen and (max-width: 767px) { .site-heading { margin-bottom: 30px; } } .sub-heading { text-transform: uppercase; color: var(--color-primary); font-weight: 600; background: var(--bg-gradient-reverse); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; position: relative; z-index: 1; margin-bottom: 20px; } .bg-gradient .sub-heading { color: var(--white); background: transparent; -webkit-background-clip: inherit; background-clip: inherit; -webkit-text-fill-color: inherit; opacity: 0.9; } .bg-gradient .sub-heading { -webkit-text-fill-color: inherit; color: var(--white); } /* ============================================================== # Video Play Button =================================================================== */ @-webkit-keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } /* ============================================================== # Template Animation =================================================================== */ /* Video Paly */ @-webkit-keyframes video-play { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @keyframes video-play { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } /*Zoom Animation */ /* Slider Zoom Effect */ @-webkit-keyframes zoom { from { -webkit-transform: scale(1, 1); } to { -webkit-transform: scale(1.2, 1.2); } } @keyframes zoom { from { -webkit-transform: scale(1, 1); transform: scale(1, 1); } to { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } } /* Spiner Animation */ /*Preloader Spiner Animation */ @-webkit-keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } /* Spiner Animation */ /*Preloader Spiner Animation */ @-webkit-keyframes spinnerReverse { to { -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg); } } @keyframes spinnerReverse { to { -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg); } } /* Infinite Up Down Animation */ @keyframes UpDown { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(-25px); transform: translateY(-25px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } /* Animation UpDown */ @-webkit-keyframes UpDown { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(-25px); transform: translateY(-25px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } /* Animation Left Right */ /* Fade Left Right */ @keyframes fadeLeftRight { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(100px); transform: translateX(100px); } } @-webkit-keyframes fadeLeftRight { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(100px); transform: translateX(100px); } } /* Animation Right Left */ @keyframes fadeRightLeft { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(-50px); transform: translateX(-50px); } } @-webkit-keyframes fadeRightLeft { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(-50px); transform: translateX(-50px); } } /* Animation Zoom Up Down */ /* Zoom Up Down */ @keyframes zoomUpDown { 0%, 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } 50% { -webkit-transform: scale(0.7); transform: scale(0.7); } } @-webkit-keyframes zoomUpDown { 0%, 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } } /* Animation Moving */ /* Mooving Animation */ @-webkit-keyframes moving { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 20% { -webkit-transform: translate(0px, -30px); transform: translate(0px, -30px); } 50% { -webkit-transform: translate(-100px, -30px); transform: translate(-100px, -30px); } 70% { -webkit-transform: translate(-100px, 0px); transform: translate(-100px, 0px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes moving { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 20% { -webkit-transform: translate(0px, -30px); transform: translate(0px, -30px); } 50% { -webkit-transform: translate(-100px, -30px); transform: translate(-100px, -30px); } 70% { -webkit-transform: translate(-100px, 0px); transform: translate(-100px, 0px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } /* Animation Rotation */ @keyframes infinite-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes infinite-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Button Border Animation */ @-webkit-keyframes open { 0% { width: 0; height: 0; } 50% { width: 100px; height: 0; } 100% { width: 100px; height: 55px; } } @keyframes open { 0% { width: 0; height: 0; } 50% { width: 100px; height: 0; } 100% { width: 100px; height: 55px; } } @-webkit-keyframes openB { 0% { width: 0px; } 100% { width: 100px; } } @keyframes openB { 0% { width: 0px; } 100% { width: 100px; } } /* Animation Shine (A shine color will move inside the text) */ @-webkit-keyframes shine { 0% { background-position: 0; } 60% { background-position: 180px; } 100% { background-position: 180px; } } @keyframes shine { 0% { background-position: 0; } 60% { background-position: 180px; } 100% { background-position: 180px; } } @-webkit-keyframes infiniteMove { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } } @keyframes infiniteMove { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } } @-webkit-keyframes infiniteMove2 { 0% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } 50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; } 100% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } } @keyframes infiniteMove2 { 0% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } 50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; } 100% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } } /* ============================================================== # Button Styles =================================================================== */ .btn { display: inline-block; font-weight: 500; text-transform: capitalize; transition: all 0.35s ease-in-out; overflow: hidden; border-radius: 7px; border: 2px solid transparent; -webkit-box-shadow: inherit; box-shadow: none !important; font-size: 16px; letter-spacing: 0; padding: 13px 30px; background: #E7EDF8; position: relative; z-index: 1; } .btn:focus, .btn.active { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; -webkit-box-shadow: inherit; box-shadow: inherit; border: 2px solid transparent; } .btn:hover { background-color: var(--color-primary); color: var(--white); } .btn.btn-border { border: 2px solid #dddddd; background: transparent; position: relative; z-index: 1; overflow: hidden; font-weight: 600; } .btn.btn-border::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .btn.btn-border:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-border:hover { border-color: var(--dark); } .btn.btn-border.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: #e7e7e7; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-border.animation:hover { border-color: #e7e7e7; color: var(--dark); } .btn.btn-border.animation:hover::after { width: 100%; } .btn.btn-gradient { border: none; color: var(--white); } .btn.btn-gradient::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 100%; z-index: -1; background-image: linear-gradient(to left, #ff8a43 , #e03535, #ff8a43 ); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; background-size: 220%; } .btn.btn-gradient:hover::after { background-position: -70% 0; } .btn.btn-gradient.active { background-position: -70% 0; } .btn.btn-theme { color: var(--white); border: none; background: var(--color-primary); } .btn.btn-theme::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .btn.btn-theme:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } button { display: inline-block; font-weight: 500; text-transform: capitalize; transition: all 0.35s ease-in-out; overflow: hidden; border-radius: 7px; border: 2px solid transparent; -webkit-box-shadow: inherit; box-shadow: inherit; font-size: 16px; letter-spacing: 0; padding: 14px 40px; background: #E7EDF8; position: relative; z-index: 1; color: var(--white); border: none; background: var(--color-primary); } button::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } button:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } button i { margin-right: 4px; } .btn.btn-theme.secondary { color: var(--white); border: none; background: var(--color-optional); } .btn.btn-theme.secondary::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .text-light .btn.btn-theme.secondary::after { background-color: var(--white); } .text-light .btn.btn-theme.secondary:hover { color: var(--color-heading); } .btn.btn-theme.secondary:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn i { position: relative; top: 1px; margin-left: 5px; } .btn.circle { border-radius: 30px !important; } .btn-sm { padding: 16px 50px; font-size: 14px; } /* ============================================================== # Nice Select Styles =================================================================== */ /* ============================================================== # Breadcrumb Styles =================================================================== */ /* ============================================================== # Topbar Styles =================================================================== */ /* ============================================================== # Banner Styles =================================================================== */ /* ============================================================== # Banner Custom Style =================================================================== */ /* Banner Style Two */ /* Banner Style Three */ /* ============================================================== # Feature =================================================================== */ .feature-style-one { padding: 50px 30px; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); border-radius: 10px; margin-top: 30px; background: var(--white); } .feature-style-one:first-child { margin-top: 0; } .feature-style-one h4 { font-weight: 600; margin: 0; } .feature-style-one p { margin: 0; margin-top: 15px; } .feature-style-one i { display: inline-block; font-size: 60px; margin-bottom: 20px; color: var(--color-heading); line-height: 1; } .feature-style-one.active { position: relative; border: 1px solid var(--color-primary); z-index: 1; box-shadow: inherit; } .feature-style-one.active i { color: var(--color-primary); margin-bottom: 30px; } .feature-style-one.active::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--color-primary); z-index: -1; opacity: 0.1; } /* Feature Style Two */ /* Feature Style Three */ /* ============================================================== # About Style =================================================================== */ /* ============================================================== # Brand Style =================================================================== */ /* ============================================================== # Soft Info Style =================================================================== */ .soft-info-area { background-size: 51%; background-repeat: no-repeat; background-position: right bottom; overflow: hidden; } .go-premium { background: var(--white); padding: 40px; border-radius: 10px; display: inline-block; position: absolute; left: 0; top: 0; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); max-width: 330px; } .go-premium span { display: inline-block; color: var(--color-optional); text-transform: uppercase; font-weight: 600; margin-bottom: 10px; font-size: 15px; } .go-premium h5 { font-weight: 600; margin-bottom: 15px; font-size: 20px; } .user-lists { display: flex; align-items: center; margin-left: 15px; margin-top: 30px; } .user-lists img, .user-lists i { height: 50px; width: 50px; border: 2px solid var(--white); border-radius: 50% !important; box-shadow: 0 3px 10px 0 rgb(0 0 0 / 20%); position: relative; display: inline-block; background: var(--white); text-align: center; line-height: 46px; color: var(--color-optional); } .user-lists li { margin-left: -15px; } .soft-info-thumb img { max-width: 130%; } .soft-info-thumb { position: relative; padding-left: 120px; padding-top: 100px; } .soft-info-thumb img { border-radius: 15px; } .go-premium p { display: block; margin: 0; margin-top: 15px; font-weight: 600; } .soft-info-list h3 { font-weight: 600; } .soft-info-list ul { list-style: disc; } .soft-info-list ul li { margin-top: 15px; position: relative; z-index: 1; padding-left: 25px; } .soft-info-list ul li::after { position: absolute; left: 0; top: 10px; content: ""; height: 10px; width: 10px; background: var(--color-optional); border-radius: 3px; opacity: 0.6; } /* ============================================================== # Integrated Tools Style =================================================================== */ /* ============================================================== # Choose Us Style =================================================================== */ /* Choose Us Right Info */ /* ============================================================== # Trial From Style =================================================================== */ .free-trial-area { background-repeat: no-repeat; background-position: right bottom; } .free-trial-style-one .title strong { display: inline-block; font-weight: 600; position: relative; z-index: 1; } .free-trial-style-one .title strong::after { position: absolute; left: 0; bottom: 0; content: ""; height: 100%; width: 100%; background: url(../img/shape/29.png); background-size: contain; background-repeat: no-repeat; background-position: bottom center; z-index: -1; } .check-list li { position: relative; z-index: 1; padding-left: 30px; margin-top: 8px; font-weight: 500; } .check-list li::after { position: absolute; left: 0; top: 5px; content: "\f00c"; font-family: "Font Awesome 5 Pro"; height: 20px; width: 20px; text-align: center; line-height: 20px; border: 1px solid #e7e7e7; border-radius: 5px; font-size: 12px; } /* ============================================================== # Software Details Style =================================================================== */ /* ============================================================== # Services Style =================================================================== */ /* Services Style TWo */ /* Services Details */ /* ============================================================== # Team Style =================================================================== */ /* ============================================================== # Team Single =================================================================== */ /* ============================================================== # App Type Style =================================================================== */ /* ============================================================== # Current User Style =================================================================== */ .fun-fact .medium { font-weight: 400; } .fun-fact.flex { display: flex; align-items: center; } .fun-fact.flex img { height: 90px; margin-right: 30px; border-right: 1px solid #d8d5d5; padding-right: 30px; } /* Animation Rotation */ @keyframes rotate-animation { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } /* ============================================================== # Pricing Style =================================================================== */ .pricing-style-one { overflow: hidden; padding: 0; border-right: 2px solid var(--bg-gray); background: var(--white); } .pricing-style-one .item { background: var(--white); } .pricing-style-one .pricing-header { padding: 50px 30px; background: var(--dark); } .pricing-style-one:last-child { border: none; padding-left: 15px; } .pricing-style-one.active { transform: scale(1.1); border: 2px solid var(--color-primary); border-radius: 10px; } .pricing-style-one.active .pricing-header { background: var(--bg-gradient); padding: 53px 30px; } .pricing-style-one:first-child { border-radius: 10px 0 0 10px; } .pricing-style-one:last-child { border-radius: 0 10px 10px 0; } .pricing-style-one .pricing-header h4 { text-transform: capitalize; font-weight: 600; color: var(--white); } .pricing-style-one .pricing-header p { margin-bottom: 0; color: #cccccc; } .pricing-style-one.active .pricing-header p { color: var(--white); } .pricing-style-one span { display: block; font-weight: 500; color: var(--color-heading); margin-top: 15px; font-size: 15px; } .pricing-style-one li { display: flex; margin-top: 7px; } .pricing-style-one li i { display: inline-block; font-weight: 100; margin-right: 10px; position: relative; top: 7px; font-size: 15px; } .pricing-style-one li:first-child { margin-top: 0; } /* Pricing Style Two */ /* ============================================================== # Gallery =================================================================== */ /* ============================================================== # Testimonails Style =================================================================== */ /* Testimonial Style Two */ /* ============================================================== # Process Style =================================================================== */ /* ============================================================== # Faq Style =================================================================== */ /* Faq Style Two */ /* ============================================================== # Contact Style =================================================================== */ /* ============================================================== # Footer Style =================================================================== */ footer { overflow: hidden; } .footer-item { margin-top: 50px; } footer .f-items { padding-top: 70px; } .f-item.about { position: relative; z-index: 1; padding-right: 50px; } .f-item.about::after { position: absolute; right: 0; top: -50%; content: ""; height: 200%; width: 500%; background: var(--bg-gray); z-index: -1; } footer .logo { height: 60px; margin-bottom: 30px; } footer .widget-title { font-weight: 600; margin-bottom: 30px; } footer .f-item.link li { margin-top: 10px; font-size: 15px; } footer .f-item.link li a { display: inline-block; color: #d2d2d4; font-weight: 400; } footer .f-item.link li a:hover { color: var(--white); } footer .about p { color: var(--color-paragraph); } footer { position: relative; z-index: 1; } .f-item.about::before { position: absolute; right: 0; top: -120px; content: ""; height: 1px; width: 500%; background: #e7e7e7; z-index: 1; } .newsletter form { position: relative; border-radius: 50%; display: flex; align-items: center; justify-content: space-between; } .newsletter form input { width: 100%; position: relative; border: none; padding: 0 20px; border-radius: 5px; box-shadow: 0 3px 10px 0 rgb(0 0 0 / 10%); margin-right: 15px; min-height: 55px; } .newsletter button { background: var(--color-primary); border: none; color: var(--white); border-radius: 5px; height: 53px; padding: 0 30px; font-weight: 600; font-size: 15px; min-width: 130px; } .secondary .newsletter button { background: var(--color-optional); } .newsletter button:hover { background: var(--dark); } .copyright-text p { margin: 0; font-size: 14px; } .copyright-text p a { color: var(--color-primary); } .secondary .copyright-text p a { color: var(--color-optional); } .footer-social li { display: inline-block; margin-right: 10px; } .footer-social li a { display: inline-block; height: 40px; width: 40px; line-height: 42px; background: var(--dark); text-align: center; border-radius: 50%; } .footer-item.contact li { display: flex; margin-top: 30px; } .footer-item.contact li strong { display: block; text-transform: uppercase; color: var(--white); font-size: 14px; } .footer-item.contact li i { display: inline-block; height: 45px; width: 45px; text-align: center; line-height: 45px; border-radius: 50%; margin-right: 20px; background: rgba(255, 255, 255, 0.1); color: var(--white); font-weight: 300; font-size: 18px; } .footer-item.contact li { color: #dedede; } .footer-item.contact li p { margin: 0; color: #dedede; } .footer-item.contact li a { color: #dedede; font-weight: 500; } .footer-item.contact li a:hover { color: var(--color-secondary); } .secondary .footer-item.contact li a:hover { color: var(--color-optional); } .foter-shape-right-bottom { position: absolute; right: 2%; bottom: 120px; z-index: -1; max-width: 10%; opacity: 0.1; } .footer-bottom { position: relative; z-index: 1; padding: 25px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); display: none; } .footer-bottom p { margin: 0; } @media (max-width: 1023px) { .footer-bottom { display: block; } } /* ============================================================== # 404 page =================================================================== */ /* ============================================================== # Dark CSS =================================================================== */ /* ============================================================== # Responsive CSS =================================================================== */ /* Tablet Layout: 768px.*/ @media only screen and (min-width: 768px) and (max-width: 991px) { /* Banner */ /* Banner Two */ /* Banner Three */ /* About */ /* Feature */ .feature-style-one { margin: 0; text-align: center; } .feature-style-one { width: 50%; } .feature-style-one.active { width: 48%; } .feature-style-one.active p { padding: 0 10%; } /* Brand */ /* Soft Premium Info */ .soft-info-thumb { padding: 0; margin-top: 50px; padding-left: 20%; } .soft-info-thumb > img { max-width: 100%; margin-top: 60px; } /* Team Details */ /* Software Details */ /* Active Current User */ /* Pricing */ .pricing-style-one { padding: 0 15px; border: none; background: transparent; overflow: inherit; } .pricing-style-one { margin-top: 30px; } .pricing-style-one .item { border-radius: 10px; overflow: hidden; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); } .pricing-style-one.active { transform: inherit; border: none; } /* Pricing Style Two */ /* Testimonials */ /* Choose Us */ /* Free Trial */ .free-trial-area { background-color: var(--bg-gray); padding-top: 120px; } /* Fun Fact */ /* Process */ /* Feature Style Two */ /* Feature Style Three */ /* Team */ /* Portfolio */ /* Contact */ /* Footer */ .f-item.about::after { display: none; } footer .logo { filter: brightness(0) invert(1); } .newsletter form { display: block; margin-top: 30px; } .newsletter button { width: 100%; margin-top: 13px; } footer .about p { color: #d2d2d4; } .f-item .copyright-text { display: none; } .footer-social { display: none; } .f-item.about::before { display: none; } } /* Mobile Layout: 320px. */ @media only screen and (max-width: 767px) { /* Defautl */ .title { font-size: 36px; line-height: 1.2; } /* Banner */ /* Banner Two */ /* Banner Three */ /* About */ /* Feature */ /* Brand */ /* Software Details */ /* Choose us */ /* Free Trial */ .free-trial-area { background-color: var(--bg-gray); padding-top: 50px; } /* Service */ /* Feature Style Two */ /* Fun Fact */ /* Soft Premium Info */ .soft-info-thumb { padding: 0; margin-top: 30px; } .go-premium { max-width: 100%; position: inherit; margin-top: 30px; } .soft-info-thumb img { max-width: 100%; } /* Pricing */ .pricing-style-one { padding: 0 15px; border: none; background: transparent; overflow: inherit; } .pricing-style-one:first-child { margin-top: 0; } .pricing-style-one { margin-top: 30px; } .pricing-style-one .item { border-radius: 10px; overflow: hidden; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); } .pricing-style-one.active { transform: inherit; border: none; } /* Pricing Style Two */ /* Feature Style Three */ /* Team */ /* Team Single */ /* Testimonials */ /* Active Current User */ /* Accordion */ /* Tools List */ /* Process */ /* Contact */ /* Portfolio */ /* Footer */ footer .f-items { padding-top: 0; } .f-item.about::after { display: none; } footer .logo { filter: brightness(0) invert(1); } .newsletter form { display: block; margin-top: 30px; } .newsletter button { width: 100%; margin-top: 13px; } footer .about p { color: #d2d2d4; } .f-item .copyright-text { display: none; } .footer-social { display: none; } .f-item.about { padding-right: 0; } .f-item.about::before { display: none; } } /* Max Wide Mobile Layout: 600px. */ @media only screen and (min-width: 600px) and (max-width: 767px) { /* Portfolio */ } /* Max Wide Mobile Layout: 600px. */ @media only screen and (min-width: 600px) and (max-width: 1200px) { /* Portfolio */ } /* Wide Mobile Layout: 480px. */ @media screen and (max-width: 991px) { /* global reset - start */ } /* Custom Layout */ @media only screen and (max-width: 480px) { /* Brand */ /* Free Trial */ } /* Desktop Mini */ @media only screen and (min-width: 992px) and (max-width: 1199px) { /* Team Single */ /* Software Details */ /* Banner Two */ /* Portfolio */ } /* ============================================================== # Home Ai Writer =================================================================== */ /* Banner */ /* -------------------------------- xclip -------------------------------- */ /* Process Style Two */ /* ============================================================== # Service Overview =================================================================== */ /* ============================================================== # Choose Us Style Two =================================================================== */ .btn.btn-border.secondary::after { background: var(--color-optional); } .btn.btn-border.secondary:hover { border-color: var(--color-optional); } .site-heading.secondary strong::after { position: absolute; left: -10%; bottom: -5px; content: ""; height: 120%; width: 120%; background: url(../img/shape/33.png); background-size: contain; background-repeat: no-repeat; background-position: bottom center; z-index: -1; } /* ============================================================== # Testimonial =================================================================== */ /* ============================================================== # Pricing =================================================================== */ .btn.btn-border.btn-sm { padding: 14px 50px; } /* ============================================================== # Faq =================================================================== */ /* Tablet */ /* Mobile */ @media only screen and (max-width: 767px) { .heading { font-size: 36px !important; } } /* Custom Mobile */ /* ============================================================== # Home Personal Portfolio =================================================================== */ /* Performance */ /* About */ /* Services */ body { overflow: unset; } /* Portfolio */ /* Pricing */ .secondary button { background: var(--color-optional); } /* Responsive */ @media only screen and (min-width: 992px) and (max-width: 1199px) { /* Banner */ } @media only screen and (min-width: 768px) and (max-width: 991px) { /* Banner */ } @media only screen and (max-width: 767px) { /* Banner */ /* About */ /* Portfolio */ } @media only screen and (max-width: 480px) { } /* ============================================================== # Home Comming Soon =================================================================== */ /* ============================================================== # Preloader =================================================================== */ @-webkit-keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-webkit-keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } /* ============================================================== # Home Creative Agency =================================================================== */ .bg-dark .sub-heading { color: var(--color-optional); background: linear-gradient(90deg, var(--color-optional) 0%, #00ff8c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Services */ /* About */ /* Portfolio */ /* Fun Factor */ /* ============================================================== # Home Chatbot =================================================================== */ /* Feature */ /* About */ /* Technology */ /* Faq Style Four */ /* Pricing */ /* ============================================================== # Home App Landing =================================================================== */ .banner-style-seven-area { padding-top: 200px; padding-bottom: 70px; background-position: bottom center !important; } .banner-style-seven .thumb img { max-width: 80%; margin: auto; } .banner-style-seven .thumb { text-align: right; } .banner-style-seven h2 { font-size: 55px; font-weight: 600; margin-bottom: 30px; } @media (min-width: 1400px) { .banner-style-seven h2 { font-size: 65px; line-height: 1.1; } } .banner-style-seven p { font-size: 20px; line-height: 1.7; opacity: 0.9; } @media (min-width: 1400px) { .banner-style-seven p { padding-right: 20%; } } .soft-info-thumb .btn::after { background: var(--dark) !important; } .soft-info-thumb .btn:hover { color: var(--white) !important; } /* Fun Factor */ /* Feture */ /* Free Trial */ .subscribe-form form { border: 1px solid rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; border-radius: 30px; margin-top: 40px; width: 80%; } .subscribe-form form input, .subscribe-form form input:focus { background: transparent; box-shadow: none; border: none; height: 60px; border-radius: 30px; padding-left: 30px; color: var(--white); } .subscribe-form form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #cccccc; } .subscribe-form form input::-moz-placeholder { /* Firefox 19+ */ color: #cccccc; } .subscribe-form form input:-ms-input-placeholder { /* IE 10+ */ color: #cccccc; } .subscribe-form form input:-moz-placeholder { /* Firefox 18- */ color: #cccccc; } .subscribe-form form button { position: absolute; right: 5px; top: 5px; text-transform: uppercase; height: 50px; width: 50px; background: var(--color-optional); border-radius: 50%; padding: 0; } .subscribe-form form button::after { background: var(--color-optional); } /* App Process */ .app-process-items { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 80px; position: relative; z-index: 1; } .process-style-three i { display: inline-block; font-size: 35px; font-weight: 100; margin-bottom: 30px; height: 80px; width: 80px; line-height: 82px; text-align: center; border-radius: 50%; position: relative; z-index: 1; color: var(--color-heading); background: var(--white); border: 1px solid #0082ff; } .process-style-three i::after { position: absolute; left: 50%; transform: translateX(-50%); top: -2px; content: ""; height: 15px; width: 30px; z-index: -1; background: var(--white); } .process-style-three-area { overflow: hidden; } .app-process-items::after { position: absolute; right: 0; top: 41px; content: ""; height: 1px; width: 500%; border-top: 2px dashed #d7dbe0; } .process-style-three h4 { font-weight: 600; } .process-style-three p { margin: 0; } .process-style-three:nth-child(2) i::after { top: auto; bottom: -1px; } .bg-dark .go-premium h5 { color: var(--color-heading); } .bg-dark .go-premium p { color: var(--color-paragraph); } .bg-dark .soft-info-thumb img { max-width: 120%; } .bg-dark .soft-info-list ul li::after { background: var(--white); } .secondary .pricing-style-one.active .pricing-header { background: var(--color-optional); } .secondary .pricing-style-one.active { border-color: var(--color-optional); } .secondary .btn.btn-theme { background: var(--color-optional); color: var(--white); } .secondary .btn:hover { color: var(--white); } /* ============================================================== # Responsive CSS =================================================================== */ /* Desktop Mini */ @media only screen and (min-width: 992px) and (max-width: 1199px) { /* Home Chatbot */ /* Home Creative Agency */ /* Home App Landing */ .banner-style-seven .align-center { align-items: center; } .banner-style-seven h2 { font-size: 46px; } .bg-dark .soft-info-thumb img { max-width: 100%; } } /* Tablet To Mobile */ @media (max-width: 991px) { } /* Tablet Layout: 768px.*/ @media only screen and (min-width: 768px) and (max-width: 991px) { /* Home Chatbot */ /* Home Creative Agency */ /* Home App Landing */ .banner-style-seven .information { margin-top: 0; } .banner-style-seven-area { padding-top: 120px; } .banner-style-seven .thumb { text-align: center; margin-top: 80px; } .bg-dark .soft-info-thumb img { max-width: 100%; } .app-process-items { grid-template-columns: 1fr; text-align: center; grid-row-gap: 50px; } } /* Mobile */ @media (max-width: 767px) { /* Home Creative Agency */ .faq-area.bg-cover.text-light { background-image: none !important; padding-top: 0; } /* Home Software Landing */ .banner-style-seven-area { text-align: center; padding-top: 60px; } .banner-style-seven .information { margin: 0; } .banner-style-seven h2 { font-size: 36px; } .banner-style-seven .thumb { text-align: center; margin-top: 50px; } .subscribe-form form { width: 100%; } .app-process-items { grid-template-columns: 1fr; text-align: center; grid-row-gap: 50px; } .bg-dark .soft-info-thumb img { max-width: 100%; } /* Home ChatBot */ }