/* 
** Ce fichier regroupe toutes les class CSS utilisées pour le site ;
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Shadows+Into+Light+Two&display=swap');

:root {
    --color-primary: #30A1B7;
    --color-primary-rgb: 165, 27, 36;

    --color-secondary: #BFE6EE;
    --color-secondary-rgb: 46, 68, 133;

    --color-text: #383838;
    --color-border: #DCDCDC;

    --block-shadow: 15px 15px;
    --radius-small: 2px;
}

html,
body {
    font-family: 'Roboto', sans-serif;
    max-width: 100vw;
    overflow-x: hidden;
}
html,
body,
p {
    color: var(--color-text);
    font-size: 18px;
    line-height: 1.6rem;
    font-weight: 300;
}
section {
    padding-top: 60px;
    padding-bottom: 60px;
}
h1 {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 30px;
}
h2 {
    font-size: 38px;
    margin-bottom: 10px;
}
h3 {
    font-size: 18px;
    color: #000;
    font-weight: 500;
    margin-bottom: 20px;
}
h4 {
    font-size: 20px;
}

.color-primary {
    color: var(--color-primary) !important;
}
.color-secondary {
    color: var(--color-secondary) !important;
}
.bg-primary {
    background: var(--color-primary) !important;
}
.bg-secondary {
    background: var(--color-seondary) !important;
}
.bg-colored {
    background-color: #E3EDBF;
}
.bg-muted {
    background-color: #F2F2F2;
}

.img-featured {
    position: relative;
    overflow: hidden;
    height: 100%;
}
.img-featured img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Navigation & Navbar */

nav.nav-wrapper {
    position: relative;
    background: var(--color-bg);
    /* box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 5.8583px 0px; */
    padding: 15px 0;
}
nav.nav-wrapper .container {
    display: flex;
    align-items: center;
    flex-direction: row;
}

/* Header */

header {
    padding: 150px 0;
    position: relative;
    background-image: url('../images/featured.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}
header h1 {
    font-size: 40px;
    line-height: 1.2;
    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(0,0,0,.2);
}
header .container {
    z-index: 1;
}
header::before {
    content: " ";
    background-image: linear-gradient(to bottom, RGBA(0,0,0,0) 0%,RGBA(48,161,183,1) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Footer */

footer {
    font-size: 14px;
    padding: 20px 0;
}
footer * {
    color: var(--color-text);
}

/* Sections */

.contact-form {
    position: relative;
    z-index: 2;
}
.contact-form::before {
    content: " ";
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--color-primary);
    z-index: -1;
}
.section-py {
    padding-top: 120px;
    padding-bottom: 120px;
}

/* Buttons */

.btn {
    border: none;
    padding: 15px 30px;
    font-weight: 500;
    border-radius: var(--radius-small);
    transition: all .2s;
    font-size: 18px;
    line-height: 18px;
}
.btn.btn-primary {
    background-color: #BFE6EE;
    color: #30A1B7;
}
.btn.btn-primary:hover {
    background-color: #30A1B7;
    color: #fff;
}
.btn:focus,
button:focus {
    outline: none;
}

/* Inputs */

::placeholder {
    opacity: 0.5 !important;
}

.form-control {
    border-radius: var(--radius-small);
    height: 50px;
    padding: 18px 20px;
}
.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--color-secondary);
}
.form-control-responsive {
    height: auto;
    padding: 11px 20px;
}
.form-check-input {
    margin-top: 5px;
}
select.form-control {
    padding: 2px 18px;
}
input[type="file"] {
    appearance: none;
    -webkit-appearance: none;
    line-height: 20px;
    padding: 3px 44px;
    position: relative;
    cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
    width: 100%;
    display: block;
    height: 0;
}
input[type="file"]::before {
    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" color="darkgrey" width="16" height="16" fill="darkgrey" class="bi bi-file-earmark-text" viewBox="0 0 16 16"><path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/><path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/></svg>');
    width: 20px;
    height: 20px;
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-43%);
}
.form-group label {
    line-height: 1em;
}
label[required]::after,
label[required="required"]::after {
    content: "*";
    color: var(--color-primary);
}

/* Responsive ; Media Queries */

@media (max-width:767px) {
}

@media (min-width:768px) {
}

@media (min-width:768px) and (max-width:991px) {
}

@media (max-width:991px) {
    header h1 {
        font-size: 28px;
    }
    h2,
    .h3 {
        font-size: 22px;
    }
    .img-featured {
        height: 200px
    }
    .section-py {
        padding: 50px 30px;
    }
}

@media (min-width:992px) {
}

@media (min-width:992px) and (max-width:1199px) {
}

@media (max-width: 1199px) {
}

.success {
    background-color: #7be77b;
    width: fit-content;
    margin: auto;
}

.hidden {
    transition: all ease-in 0.3s;
    display: none;
}