@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700&family=Barlow:wght@400;600;700&family=Overpass:ital,wght@0,400;0,700;0,800;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700&family=Barlow:wght@400;600;700&family=Overpass:ital,wght@0,400;0,700;0,800;1,400&display=swap');

:root {
    --md-green: #00CB66;
    --md-aqua: #00A099;
    --lt-blue: #0096ff;
    --md-blue: #0069B2;
    --md-orange: #F29100;
    --lt-purple: #9866FF;
    --md-purple: #941B80;
    --dk-purple: #29235C;
    --p-font: 'Barlow','Barlow Condensed', 'Overpass', sans-serif;

}
body {font-family: var(--p-font);}


.bg-purple { 
    background: rgb(41,0,90);
    background: -moz-linear-gradient(60deg, rgba(41,0,90,1) 0%, rgba(81,0,217,1) 100%);
    background: -webkit-linear-gradient(60deg, rgba(41,0,90,1) 0%, rgba(81,0,217,1) 100%);
    background: linear-gradient(60deg, rgba(41,0,90,1) 0%, rgba(81,0,217,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#29005a",endColorstr="#5100d9",GradientType=1); 
}

.bg-00 {background: url('../img/xtech_1.jpg'); background-size: cover; background-position: center;}
.bg-01 {background: url('../img/xtech_2.jpg'); background-size: cover; background-position: center;}

.bg-md-blue {background: var(--md-blue);}
.bg-md-orange {background: var(--md-orange);}
.bg-lt-purple {background: var(--lt-purple);}
.bg-md-purple {background: var(--md-purple);}
.bg-md-green {background: var(--md-green);}
.bg-md-aqua {background: var(--md-aqua);}
.bg-dk-purple {background: var(--dk-purple);}

.tx-md-blue {color: var(--md-blue);}

.bd-md-blue {border-top: solid 15px var(--md-blue);}
.bd-md-orange {border-top: solid 15px var(--md-orange);}
.bd-lt-purple {border-top: solid 15px var(--lt-purple);}
.bd-md-purple {border-top: solid 15px var(--md-purple);}
.bd-md-green {border-top: solid 15px var(--md-green);}
.bd-aqua {border-top: solid 15px var(--md-aqua);}
.bd-dk-purple {border-top: solid 15px var(--dk-purple);}


.btn:hover { background: rgba(0,0,0,.8); color: inherit;}

a, a:hover, a:visited, .btn {color: inherit;}

.carousel-control-prev { left: -10px;}
.carousel-control-next { right: -10px;}
.carousel-control-next, .carousel-control-prev {width: 4%;}
.carousel-indicators {margin-bottom: 10px;}

.carousel .carousel-indicators [data-bs-target] {background-color: var(--md-purple);}

.carousel-indicators [data-bs-target] {
    width: 15px;
    height: 15px;
    border-radius: 100%;
}