/* ----------------------------------

Template Name: Metize - Startup & SaaS Template
Author: validtheme
Description:
Version: 1.0

Main Font    : Manrope
Main Color   : #2667FF

-------------------------------------

[Typography]

Body copy:    15px 'Manrope', sans-serif
Header:     36px 'Manrope', sans-serif
Input, textarea:  16px 'Manrope', sans-serif
Sidebar heading:  22px 'Manrope', 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
        - Banner Creative
        - Banner Digital Agency
        - Banner Portfolio
    05. Services
        - Version One
        - Version Two
        - Service Single
	06. About
        - Version One
        - Version Two
    07. Project
        - Project Carousel
        - Project Grid
        - Project Single
    08. Why Choose Us
    09. Team
        - Team Version One
        - Team Single
    10. Testimonials
    11. Why Choose Us
    12. Faq
    13. Progress
    14. Brand / Partner
    15. Feature
    16. What We Offer
    17. Pricing
    18. Blog
        - Standard
        - Grid
        - Left Sidebar
        - Right Sidebar
        - Single
    21. Error 404
    22. Footer
    23. PHP Contact Form
    24. Others

*/

/*
** General Styles for HTML tags
*/

.starfox-section>[class*=starfox-] {
    width: 100%;
    flex: 0 0 auto;
    max-width: 768px;
}
.hero-text {
    max-width: 100% !important;
    z-index: 2 !important;
}
.starfox-section>[class*=starfox-].alignwide {
    max-width: 1110px;
}
.starfox-section>[class*=starfox-] {
    width: 100%;
    flex: 0 0 auto;
    max-width: 768px;
}
.starfox-section>:last-child {
    margin-bottom: 0;
}
.starfox-columns {
    display: flex;
    flex-wrap: wrap;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 0;
    padding-right: 0;
}
.starfox-flex-justify-content-left {
    justify-content: flex-start;
}

.starfox-flex-align-items-top {
    align-items: flex-start;
}
.starfox-section--dark-blue {
    background-color: #001751;
    color: #fff;
}
.starfox-section__video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    max-width: unset !important;
    width: auto;
    height: auto;
    padding: 0 !important;
    -o-object-fit: cover;
    object-fit: cover;
}
.entry-content>[class*=starfox-]:not(.starfox-modal):not(.starfox-cards):not(.starfox-columns):not(.starfox-list):not(.starfox-slides):not(.starfox-spacer) {
    padding-left: 16px;
    padding-right: 16px;
}
.black-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}
.starfox-section {
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 16px;
    padding-left: 16px;
}
.starfox-py-xs {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.starfox-columns {
    display: flex;
    flex-wrap: wrap;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 0;
    padding-right: 0;
}
.starfox-section>:last-child {
    margin-bottom: 0;
}
.full-width {
    max-width: 100% !important;
}
.starfox-section--lg {
    height: 100vh;
	overflow: hidden;
}
.starfox-section--lg1 {
    max-height: 420px;
	overflow: hidden;
}
.starfox-py-lg {
    padding-top: 8rem !important;
    padding-bottom: 5rem !important;
}

.starfox-heading__h0 {
    font-family: "Ivar Headline", "Times New Roman", serif;
    font-size: 50px;
    font-weight: 600;
    line-height: 72px;
	color: #fff;
}
.has-pale-cyan-blue-color {
    color: #fff !important;
}

@media (min-width: 768px) {
    .starfox-column {
        margin-bottom: 1px;
    }
	.starfox-column-6 {
    flex: 0 0 50%;
    max-width: 50%;
}
.starfox-align-left {
    text-align: left;
}
.black-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

}
@media (max-width: 767.98px) {
    .starfox-align-sm-center {
        text-align: center;
    }
	.starfox-column-6 {
    flex: 0 0 100%;
    max-width: 100%;
}
.starfox-align-left {
    text-align: center;
}
.black-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 100%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}
}


.starfox-flex-order-1 {
    order: 1;
}
.starfox-buttons>li:last-child {
    margin-right: 0;
    margin-bottom: 0;
}
.starfox-buttons:after {
    content: "";
    display: table;
    clear: both;
}
.entry-content a {
    font-weight: 600;
}
.starfox-button--primary {
    color: #fff;
    background-color: #00c0ff;
}
.starfox-button--md {
    font-size: 16px;
    padding: 14px 36px;
}
.starfox-button {
    display: inline-block;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0);
    text-decoration: none;
    transition: all .25s ease-in-out;
    min-width: 184px;
    text-align: center;
    font-weight: 600;
}
.starfox-button:hover {
	color:#fff;	
}


.starfox-buttons>li {
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.starfox-heading {
    text-transform: none;
    margin: 0 0 16px;
}
.tool{
	background-color:#383838;
}
.service-three-item1 > a {
    display: inline-block;
    border: 2px solid #dddddd;
    padding: 5px 25px;
    border-radius: 30px;
    margin-top: 15px;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
	background-color:var(--white);
}

@media screen and (max-width: 767px) {
	.service-three-item1 > a {
    display: inline-block;
    border: 2px solid #dddddd;
    padding: 5px 25px;
    border-radius: 30px;
    margin-top: 15px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 8px;
    text-align: center;
	background-color:var(--white);
}
}

.service-three-item1 > a:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--white);
}

.bg-black {
    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}