/*
------------------------------------------------
Template Name: Link One Corp 2022
Template Author: @oxe.digital
Template Site: https://linkonecorp.com

01 : DEFAULT
02 : NAVEGAÇÃO
03 : START
04 : ABOUT US
05 : SERVICES
06 : CONTACT
------------------------------------------------
*/

/* 01 : DEFAULT */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --bg-geral: #fafafa;
    --color-primary: #2463B5;
}

* {
    outline: transparent !important;
    box-shadow: none !important;
}

html {
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
    scroll-padding-top: 75px;
    -webkit-scroll-padding-top: 75px;
}

body {
    background: var(--bg-geral);
    font-family: 'Open Sans', sans-serif;
}

main {
    margin-top: 75px;
}

.visuallyhidden {
    position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
}

h2 {
    font-size: calc(1.4rem + 1.5vw);
    font-weight: 600;
    margin-bottom: 30px;
}

h3 {
    color: var(--color-primary);
    font-weight: 600;
}

.btn-outline-primary {
    width: 160px;
    padding: 0.28rem 0.75rem !important;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    font-weight: 600;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* 02 : NAVEGAÇÃO */

header .nav-link {
    font-size: 17px;
    font-weight: 600;
}

header .nav-link:hover {
    color: var(--color-primary) !important;
    font-size: 17px;
    font-weight: 600;
}

/* 03 : START */

.carousel-item {
    height: 540px;
}

.carousel-caption {
    top: 50%;
    right: 5%;
    left: 5%;
    transform: translateY(-50%);
    max-width: 700px;
    text-align: center;
}

.carousel-caption h3 {
    animation: fadeInDown;
    animation-duration: .7s;
    animation-delay: .7s;
    animation-fill-mode: backwards;
}

.carousel-caption h2 {
    animation: fadeInUp;
    animation-duration: .7s;
    animation-delay: .7s;
    animation-fill-mode: backwards;
}

.carousel-item-1 {
    background-image: url('../images/start-banner-01.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.carousel-item-2 {
    background-image: url('../images/start-banner-02.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.carousel-indicators button {
    width: 16px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background-color: var(--color-primary) !important;
}

/* 04 : ABOUT US */

.start-about {
    background-image: url('../images/map.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 80%;
}

/* 05 : SERVICES */

/* #services .overlay {
    cursor: pointer;
    opacity: 0;
    background-color: var(--color-primary);
    transition: .5s ease;
}

#services .overlay:hover {
    opacity: .9;
    background-color: var(--color-primary);
    transition: .5s ease;
} */

.modal-automation {
    width: 100%;
    height: 320px;
    margin-top: -1px;
    background-image: url('../images/serv-automation.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.modal-cinema {
    width: 100%;
    height: 320px;
    margin-top: -1px;
    background-image: url('../images/serv-homecinema.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.modal-outdoor {
    width: 100%;
    height: 320px;
    margin-top: -1px;
    background-image: url('../images/serv-outdoor.jpg');
    background-size: cover;
    background-position: center center;
}

.modal-lighting {
    width: 100%;
    height: 320px;
    margin-top: -1px;
    background-image: url('../images/serv-lighting.jpg');
    background-size: cover;
    background-position: center center;
}

.modal-surveillance {
    width: 100%;
    height: 320px;
    margin-top: -1px;
    background-image: url('../images/serv-surveillance.jpg');
    background-size: cover;
    background-position: center center;
}

.modal-wifi {
    width: 100%;
    height: 320px;
    margin-top: -1px;
    background-image: url('../images/serv-wifi.jpg');
    background-size: cover;
    background-position: center center;
}

.modal-room {
    width: 100%;
    height: 320px;
    margin-top: -1px;
    background-image: url('../images/serv-room.jpg');
    background-size: cover;
    background-position: center center;
}

.modal-blinds {
    width: 100%;
    height: 320px;
    margin-top: -1px;
    background-image: url('../images/serv-blinds.jpg');
    background-size: cover;
    background-position: center center;
}

.modal-title {
    color: var(--color-primary);
}

.btn-close {
    opacity: .8 !important;
}

#services a {
    position: relative;
    top: 0;
    color: #666666;
    text-decoration: none;
    cursor: pointer;
    opacity: .8;
    transition: .3s;
}

#services a:hover {
    position: relative;
    top: -10px;
    color: var(--color-primary);
    text-decoration: none;
    opacity: 1;
    transition: .3s;
}

#services img {
    border-radius: 12px;
}

/* CONTACT */

#contact a {
    color: #333333;
    text-decoration: none;
}

#contact a:hover {
    color: #333333;
    text-decoration: underline;
}

footer {
    background-color: #333333;
}

footer a {
    color: white;
}

footer a:hover {
    color: white;
    text-decoration: none;
}

footer svg {
    fill: #d1d1d1;
    transition: .3s;
}

footer svg:hover {
    fill: #ffffff;
    transition: .3s;
}