/*
Theme Name: BlueTrack by domotics studio
Theme URI: http://www.domotics.studio/
Author: Domotics Studio team
Author URI: http://domotics.studio/
Description:

Version: 1.0
License: domotics.studio
License URI: http://www.domotics.studio
Tags:
Text Domain:

*/
@charset "UTF-8";
@charset "iso-8859-15";

@import './assets/css/font.css'; /*YES ಠ_ಠ */
@import './assets/css/vars.css';
/*
@font-face{
    font-family:"gilroy-extrabold";
    src:url("./assets/fonts/Gilroy-ExtraBold.otf") format("woff") ;
}
@font-face{
    font-family:"gilroy-light";
    src:url("./assets/fonts/Gilroy-Light.otf") format("woff") ;
}
*/
@font-face{
    font-family:"Source Sans Pro 300";
    src:url("./assets/fonts/source-sans-pro/source-sans-pro-v14-latin-300.woff2") format("woff2") ;
}
@font-face{
    font-family:"Source Sans Pro 600";
    src:url("./assets/fonts/source-sans-pro/source-sans-pro-v14-latin-600.woff2") format("woff2") ;
}
@font-face{
    font-family:"Source Sans Pro";
    src:url("./assets/fonts/source-sans-pro/source-sans-pro-v14-latin-regular.woff2") format("woff2") ;
}

@font-face {
	font-family: MuseoSans;  
	src: url("./assets/fonts/museo-sans/MuseoSans_700.otf");  
	font-weight: normal;  
}
@font-face {
	font-family: Sandwich Marker Pro;  
	src: url("./assets/fonts/sandwich-marker-pro/SandwichMarkerPro-Bold.ttf");  
	font-weight: bold;  
}
/*
The @charset CSS at-rule specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character; as it is not a nested statement, it cannot be used inside conditional group at-rules.
*/
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.animation {
    	animation: none;
	}
}



@media print {
    @page {
        size: A4;
        margin: 25mm;
    }

    body {
        font-family: serif;
        border: 0; 
    }
    body:before, body:after {
      display: none; 
    }
    header, footer {
        display: none; 
    }
}
*{
    scroll-behavior: smooth;
}
:host {
    display: block;
    word-break: break-word;
    --image-fit: cover;
    --image-background-color: none;
}
:root{
    --blue: #0077FF;
    --black: #000000;
    --white: #ffffff;
    --primary-color: var(--black);
    --primary-background-color: hsl(207deg 56% 16%);
    --header-background-color: #F0F7FF;
    --text-color-color: var(--white);
}
[class="--font-size-xxl"]{font-size: 50%;}
svg{vertical-align: middle}
main .breadcrumbs svg {
    vertical-align: sub;
}
html {
  scroll-behavior: smooth;
}
body, html {
    height: 100%;
    color: #9193a8;
    background: #000;
}
body {
    /*font-family: 'gilroy-light', sans-serif;*/
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 23px;
    line-height: 1.4375rem;
    font-weight: normal;
    color: var(--text-color-color);
    background-color: var(--primary-background-color);
    hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
    font-family: 'gilroy-extrabold', sans-serif; 
    font-weight: 700;
}
h1,.h1,h2,.h2{
    font-weight: 900;
}
.navigation-header {
    color: var(--black);
    background-color: var(--white); 
    padding-bottom: 10px; 
}
picture{
    object-fit: var(--image-fit, cover);
    object-position: center center;
}
body >header{
    position: relative;
    margin-top: 6px;
    background-image: radial-gradient(#f3f1f1 1px, transparent 1px);
    background-size: calc(10 * 1px) calc(10 * 1px);
}
body >header::before{
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    width: 100%;
    height: 6px;
    z-index: 1;
    background-image: linear-gradient( 90deg, #419d78 33%, rgba(0, 0, 0, 0) 33%), linear-gradient( 90deg, #d9594c 66%, #ffd508 66%);
}
body >header .button:not(.clear){
    border-radius: 3px;
    background-color: #304ffe;
    box-shadow: rgb(68 76 247 / 40%) 0px 12px 16px -4px;
}
body >header .current-page .button:not(.clear){
    background-color: #F96B4C;
    background-image: linear-gradient(#F96B4C, #F23182);
    box-shadow: 0 2px 0 #d42d78, 0 3px 10px rgb(243 49 128 / 15%), 0 0px 10px rgb(243 49 128 / 15%), 0 0px 4px rgb(0 0 0 / 35%), 0 5px 20px rgb(243 49 128 / 25%), 0 15px 40px rgb(243 49 128 / 11%), inset 0 0 15px rgb(255 255 255 / 5%);
}

body >header li >a span{
    position: relative;
    border-bottom: 2px solid transparent;
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 14px;
    font-size: .875rem;
    color: black;
} 
body >header li >a span small{
    color: darkcyan;
    text-transform: capitalize;
}
body >header li.current-page > a span{
    border-bottom-color: hsl(194deg 100% 58%);
}
.dropdown.menu > li.is-dropdown-submenu-parent > a::after { 
    margin-top: 0px;
    right: 10px; 
}
body >header a,
body >footer{
    font-family: MuseoSans;
}
/*
 Hover Main Navigation underline animation
*/
body >header .menu li:not(.text-menu) a span:after {
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #3498db;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.5s;
  } 
body >header .menu li:not(.text-menu) a:hover span:after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
header .logo-wrapper li{    
    background-color: aliceblue;
}
header .logo-wrapper li img{
    transform: scale(1.5);
    will-change: transform;
    transition: all .3s ease;
}
header .logo-wrapper li:hover img{
    transform: scale(1);
}
main{
    min-height: 80vh;  
    background-color: #141526;
    font-size: clamp(1rem, 2.5vmin, 1.5rem);
}
main .marketing-hero { 
    position: relative;
}
main .background-blue {
    color: white;
    background-color: #73c7ff;
}

main .background-lightslategrey{
    background-color: rgb(119 136 153);
    color: white;
}
main .background-gainsboro{
    color: black;
    background-color: gainsboro;
}
main .background-gold{
    background-color: #ffcc16;
    color: black;
}
main .background-blueviolet{
    background-color: blueviolet;
}
main .background-green{
    background-color: #419d78;
}
main .background-yellow{
    background-color: #e0a458;
}
main .background-red{
    background-color: #d9594c;
}
main .background-skyblue{
    background-color: #53a2be;
}
a[href^="tel:"]:hover svg {
    -moz-animation: ring 0.3s 3;
    -webkit-animation: ring 0.3s 3;
    animation: ring 0.3s 3;
}
@keyframes ring {
    0%, 100% {
        transform: rotate(0deg) scale(1.2);
    }

    25%, 75% {
        transform: rotate(-20deg) scale(1.2);
    }

    50% {
        transform: rotate(20deg) scale(1.2);
    }
}
main .hero{
    position: relative;
    min-height: 320px;
}
main .hero-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
main .title{ 
    font-weight: 900;
}
main .title:after {
    content: "";
    display: block;
    height: .15em;
    width: 2em;
    margin: .5em 0;
    background-color: #ffe963;
}
main .title span {
    color: #00afdb;
}
[data-animation=fadeIn] {
    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-duration: .75s;
    animation-delay: 0s;
    animation-timing-function: ease;
    animation-fill-mode: both;
    backface-visibility: hidden;
    animation-direction: normal
}

@keyframes fadeIn {
    from{
        opacity: 0
    }
    to{
        opacity: 1;
    }
}

main .text-black{color: black;}
main .text-orange{ color: #ff671b}

main .breadcrumbs {
    margin: 0 0 0rem 0; 
}
/*The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.*/
[data-object-fit=cover],
[data-object-fit=contain],
[data-object-fit=fill],
[data-object-fit=scale-down]{
    width: 100%;
    height: 100%; 
    object-position: 50% 50%;
}
[data-object-fit=cover]{
    object-fit: cover; 
}
[data-object-fit=contain]{
    object-fit: contain; 
}
[data-object-fit=fill]{
    object-fit: fill; 
}
[data-object-fit=scale-down]{
    object-fit: scale-down; 
}
[data-has-object]{
    height: 100%; 
}
[data-list-style] li{
    position: relative;
    list-style: none;
    text-indent: 1rem;
}
[data-list-style=square] li:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0px;
    width: 10px;
    height: 10px;
    transform: translate(0px, 8px);
}
[data-list-style-color=red] li:before{ 
    background-color: red;
}

.marker-pro{
    font-family: Sandwich Marker Pro,sans-serif;
} 


.fluid-gradient-heading {
    background: linear-gradient(91.36deg, #ECA658 0%, #F391A6 13.02%, #E188C3 25.52%, #A58DE3 37.5%, #56ABEC 49.48%, #737EB7 63.02%, #C8638C 72.92%, #DD5D57 84.38%, #DF6C51 97.92%);
    background-size: 200% 200%;
	-webkit-background-clip: text;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-animation: gradient-motion 10s infinite ease both;
    -moz-animation: gradient-motion 10s infinite ease both;
    animation: gradient-motion 10s infinite ease both;
}

@-webkit-keyframes gradient-motion {
    0%{background-position:0% 4%}
    50%{background-position:100% 97%}
    100%{background-position:0% 4%}
}
@-moz-keyframes gradient-motion {
    0%{background-position:0% 4%}
    50%{background-position:100% 97%}
    100%{background-position:0% 4%}
}
@keyframes gradient-motion { 
    0%{background-position:0% 4%}
    50%{background-position:100% 97%}
    100%{background-position:0% 4%}
}

[data-underline]{
    position: relative;
}
[data-underline]:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    background-color: black;
    height: 5px;
    width: 60px;
    transform: translate3d(-30px, 0, 0);
}
[data-underline=blue]:after{
    background-color: #289dbd;
}
[data-underline=red]:after{
    background-color: #ff5950;
}
[data-underline=green]:after{
    background-color: #599d78;
}
 
.text-parallax {
    background-clip: text;
    -webkit-background-clip: text;
    background-position: center;
    background-size: 100% auto;
    color: transparent;
    background-attachment: fixed;
}