@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic');
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Marcellus&display=swap');

:root { --bg: #212122; --color1: #ddab99; --color2: #5e5e5e; }

html { scroll-behavior: smooth; }
body { background:#f6f4ef; font-family: 'Marcellus'; font-weight: 400; font-style: normal; color: #000; font-size: 19px; }
.container { max-width: 1500px; }

h1, h2 { font-family: 'Alex Brush'; font-weight: bold; }
h1, .h1 { font-size: 1.5em; font-weight: 600; margin-bottom: 1rem; }
h2, section h1 { font-size: 3.3em; line-height: 0.8em; margin-bottom: 2rem; }
h2 span, section h1 span, section p span { color: var(--color1); }
h2::after, _section h1:after { content: '';  width: 60px; height: 3px; background: var(--color1); display: block; margin-top: 10px; }
h2.text-center::after { margin: 13px auto 0 auto; }
h3 { font-size: 1.2em; margin: 2rem 0 1.5rem; }
h4 { font-size: 1em; margin-bottom: 1.2rem; }

label { font-weight: 600; }
a { color: #000; text-decoration: none; transition: all 0.3s ease-out; }
a:hover { color: var(--color1); }
.bold { font-weight: bold; }
.uppercase { text-transform: uppercase; }
.small { font-size: 0.7em; }
.intro { font-style: italic; text-align: right; }
.fluid { width: 100%; }
.green { color: green; }
.grey { color: var(--color2); }
.nomargin { margin: 0!important; }
.nopadding { padding: 0; }
.mr-1 { margin-right: 1rem; }
.mr-2 { margin-right: 2rem; }
.mb-1 { margin-bottom: 1rem!important; }
.mb-2 { margin-bottom: 2rem!important; }
.mb-3 { margin-bottom: 3rem!important; }
.mb-4 { margin-bottom: 4rem!important; }
.mt-2 { margin-top: 2rem!important; }
.pl { padding-left: 3rem; }
.pr { padding-right: 3rem; }
.text-left { text-align: left!important; }
.text-right { text-align: right!important; }
.only-xs { display: none; }
.clear { clear: both; }
.border { border:1px solid #3a526a; }

.btn { padding: 1rem 1.5rem; line-height: 15px; font-weight: bold; text-transform: uppercase; transition: all 0.3s ease-out; } 
.btn-primary, .button { border-color: var(--color1); background: var(--color1); color: #FFF; letter-spacing: 0.5px; }
.btn-primary:hover, .btn-primary:active, .btn-primary.active { border-color: var(--color1)!important; background: #FFF!important; color: var(--color1)!important; }
.btn-primary i { padding-right: 5px; }

.btn-secondary { border-color: var(--color2); background: var(--color2); color: #FFF; letter-spacing: 0.5px; }
.btn-secondary:hover, .btn-secondary:active, .btn-secondary.active { border-color: var(--color2)!important; background: #FFF!important; color: var(--color2)!important; }

.tooltip { --bs-tooltip-bg: #000; --bs-tooltip-color: #FFF; }
/*.button { border-radius: 15px; padding: 0.5rem; text-align: center; font-size: 1.5em; }*/
.form-control { letter-spacing: 0.2px; font-weight: 600; font-size: 1.1em!important; }
blockquote { font-size: 1.1em; color: var(--color2); background: #FFF; border-left: 5px solid var(--color1); padding: 2rem; margin-bottom: 2rem; }
.list { list-style: none; margin-bottom: 1rem; }
.list li { margin-bottom: 0.5rem; }
.list li i { color: var(--color1); margin-right: 0.5rem; }
.opacity { position:relative; }
.opacity::before { background: rgba(0, 0, 0, 0.3); content: ""; height:100%; left:0; position:absolute; top:0; width:100%; z-index:0; }
img.float-right { float: right; width: 40%; padding: 0 0 2rem 2rem; }

/* Navbar */
.navbar { height: 13.5vh; background: #FFF; padding: 1.5rem 0; }
.navbar-brand { padding: 0; margin: 0; }
.navbar-brand img { height:110px; transition: all 0.3s ease-out; }
.navbar-brand img:hover { opacity: 0.8; }
.nav-link { color: #000; font-size: 1.2em; letter-spacing: 0.5px; padding: 1rem 2rem!important; transition: all 0.3s ease-out; }
.nav-link:hover, .nav-link:active, .nav-link.active { background: var(--color1)!important; }
.dropdown-menu { border:0; border-radius: 0; left: 10px!important; font-size: 1.1em; }
.dropdown-item { padding: 0.5rem 1rem; }
.dropdown-item:focus, .dropdown-item:hover { color: var(--color1)!important; background: none; }
.navbar { padding: 0;  }
.navbar .btn { font-size: 1.1em; font-weight: 600!important; }
.navbar .btn-secondary { background: none; border-color:#000; color: #000; }
.navbar .btn-secondary:hover { background: #000; border-color:#000; color: #FFF!important; }
.navbar .contact { display: inline-block; background: var(--color1); transform: skewX(-12deg); padding: 1rem!important; margin-left: 1rem; }
.navbar .contact:hover, .navbar .contact.active { color: #000!important; }
.navbar .contact span { display: block; transform: skewX(12deg); white-space: nowrap; }
.navbar-toggler { background:#FFF; color: #000; font-weight: 600; border: 0; padding: 0.5rem 1rem; }

/* Section */
section { margin-top: 5rem; }
section img { border-radius: 15px; }

/* Carousel */
#carousel { margin-bottom: 3rem; }
#carousel .carousel-item { height: 87vh; min-height: 400px; border-bottom: 6px solid var(--color1); }
#carousel .carousel-item img { height: 100%; object-fit: cover; }
#carousel .carousel-control-prev-icon, #carousel .carousel-control-next-icon { width: 4rem; height: 4rem; }
#carousel .carousel-caption { width: 550px; left: 11%; bottom: 45%; background: rgba(255, 255, 255, 0.7); padding: 2rem 1rem; border-left:5px solid var(--color1); }
#carousel .carousel-caption p { font-size: 1.4em; color: #333; }
#carousel .carousel-caption b { font-size: 1.3em; }

/* Parallax */
#parallax { background-image: url('../pictures/parallax.jpg'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: 4rem; padding: 5rem 0; text-align: center; }
#parallax h3 { font-family: 'Alex Brush'; font-size: 3.4em; color:#FFF; margin: 0 0 2rem; }
#parallax p { font-size: 1.2em; color:#FFF; margin: 0 0 2rem; }

/* Title */
#title { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 4rem 0; margin: 0; }
#title h1 { font-size: 4.2em; color: #FFF; margin: 0; }

/* Expertises */
#expertises a { position: relative; text-decoration: none; }
#expertises .shadow { background: #000; width: 100%; height: 300px; opacity: 0; transition: all 0.3s ease-out; }
#expertises a:hover .shadow { opacity: 30%; }
#expertises a:hover .expertise_text { bottom:0; }
.expertise_detail { position: relative; height: 280px; overflow:hidden; background-size: cover; background-position: center center; margin-bottom:1.5rem; }
.expertise_text { /*position: absolute; z-index: 1; left: 0; bottom: -80px; width: 100%;  padding: 1.5rem;*/ transition: all 0.2s; }
.expertise_text h3 { font-size: 1.5em; text-transform: uppercase; margin-bottom: 25px; text-shadow: 1px 1px #000; }
.expertise_text p { margin: -4px; }
.expertise_text .btn { width: 100%!important; font-size: 0.9em; text-transform: uppercase; line-height: normal; }

/* Services */
#services .shadow { background: #000; width: 100%; height: 100%; opacity: 0; transition: all 0.3s ease-out; }
#services a:hover .shadow { opacity: 30%; }
.service_detail {  margin-bottom: 2rem; }
.service_text { background: #FFF; border-radius: 15px 0 0 15px; border: 3px solid var(--color1); border-right:0; padding: 1.5rem; }
.service_text h3 { font-size: 1.8em; font-weight: bold; margin: 0 0 1rem;  transition: all 0.3s ease-out; }
.service_text p { margin: 0; transition: all 0.3s ease-out; }
#services a:hover h3, #services a:hover p { color: var(--color1); } 
.service_img { border-radius: 0 15px 15px 0; background-size: cover; background-position: center center; width: 100%; min-height: 140px; }

/* Why */
.why_detail { width: 90%; margin:auto; background: #FFF; border-radius: 15px; padding: 2rem 1rem; box-shadow: 0px 4px 18px 0px rgba(17.9, 17.9, 58.9, 0.04); margin-bottom: 2rem; text-align: center; transition: transform .2s; }
.why_detail:hover { transform: scale(1.1); }
.why_detail img { height: 80px; margin-bottom: 1rem; }
.why_detail p { font-family: "Barlow Condensed"; font-size: 1.4em; color: #000; font-weight: 600; margin: 0; }

/* How */
.how_detail { text-align: center; }
.how_detail h4 { font-size: 1.3em; }
.how_detail .icon { font-size: 3.6em; color: var(--color1); }

/* Gallery */
#gallery a:hover .shadow { opacity: 40%; }
#gallery a:hover .icon { opacity: 100%; }
.gallery_detail { position: relative; height: 600px; overflow:hidden; background-size: cover; background-position: top center; }
#gallery .shadow { background: #000; width: 100%; height: 600px; opacity: 0; transition: all 0.3s ease-out; }
#gallery .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.3s ease-out; width: 70px; height: 70px; border: 1px solid #FFF; border-radius: 70px;  text-align: center; line-height: 80px; }
#gallery .icon i { font-size: 2em; color: #FFF; }

/* Box */
.box { background: #FFF; border-radius: 15px; padding: 2rem; box-shadow: 0px 4px 18px 0px rgba(17.9, 17.9, 58.9, 0.04); margin-bottom: 2rem;}
.box h3 { margin-top: 0; }

/* Contact */
.contact_detail { background: #FFF; padding:2rem; margin-bottom: 2rem;  }
.contact_detail p { margin: 0; }
.contact_detail i { font-size: 3em; color: var(--color1); margin-right: 1.8rem; }
label { margin-bottom: 0.5rem; }
.form-control, .form-select { border-radius: 0; padding: 0.6rem 1rem; font-size: 1em; color: #333; }

/* Legal */
#mentions { text-align: left; font-size: 0.9em; }
#mentions h2 { text-align: left; font-size: 2em; margin: 2rem 0 1rem; }

/* Footer */
footer { background: #FFF; color: #000; font-size: 0.9em; }
.footer_detail { padding: 2rem 3rem; }
.footer_detail b { font-size: 1.4em; text-transform: uppercase; font-weight: 600; }
.footer_detail a { color: var(--color1); text-decoration: none; }
.footer_detail a:hover { color: #000; }
.footer_detail ul { list-style: none; padding: 0; margin: 0; }
.footer_detail ul li { margin-bottom: 0.5rem; }
.footer_detail ul li:last-child { margin: 0; }
.footer_detail .logo { max-height: 180px; margin-bottom: 1rem; }
.footer_detail .logo:hover { opacity: 0.8; }
.footer_detail .btn { font-size: 0.9em; width: 100%; }
.footer_detail .btn-primary { border-color: var(--color1); background: #FFF; color: var(--color1); }
.footer_detail .btn-primary:hover, .footer_detail .btn-primary:active { border-color: #000!important; background: #FFF!important; color: #000!important; }
#socials li { float: left; margin-right: 10px; }
#socials li a { display: block; width: 40px; height: 40px; line-height: 39px; background: #FFF; border:1px solid var(--color1); text-align: center; font-size: 1em; color: var(--color1); }
#socials li a:hover { background: #FFF; color: #000!important; }
#legal { background: #FFF; border-top:1px solid var(--color1); padding: 1rem; font-size:0.9em; color: #000; }

/* Mobile */
@media only screen and (max-width: 768px) {

    body { font-size: 16px; }
	.hidden-xs { display:none; }
    .only-xs { display: block; }
    .mb-xs { margin-bottom: 2rem; }
    .mb-3 { margin-bottom: 2rem!important; }
    .pr, .pl { padding: 0; }
    h2 { margin-bottom: 1rem; }

    .navbar { height: 11vh; padding: 1rem 0; }
    .navbar-brand img { height:60px; }
    .nav-link, .nav-link.show, .dropdown-item { color: #FFF!important; text-shadow: none; padding: 0.9rem!important; text-align: center; }
    .dropdown-menu { padding: 0; margin: 0; background: #000; }
    .navbar .btn { font-size: 1em; }

    #offcanvasNavbar { background: var(--bg); }
    .offcanvas-title, .btn-close { color: #FFF!important; }

    #carousel .carousel-caption { display: none; left: 14%; bottom: 20%; width: auto; padding: 1rem; font-size: 0.9em; }
    #carousel .carousel-caption p { margin: 0; }
    section { margin-top: 2rem; }

    #title { background-attachment: scroll; padding: 3rem; }
    #title h1 { font-size: 2.2em; text-align: center; }

    .service_detail_img, .service_detail_box { display: block; width: 100%; }
    .service_detail_box:before { display: none; }

    #expertises .col { flex: auto; }
    #expertises a:hover .expertise_text { bottom: -80px; }

    #parallax { background-attachment: scroll; margin-top: 4rem; } 

    blockquote { padding: 1rem; }
    blockquote .btn { padding: 1rem 0.5rem; font-size: 0.8em; }

    footer { font-size: 1em; padding-top: 1rem; }
    .footer_detail { text-align: center; padding: 0 0 2rem 0; }
    .footer_detail .logo { height: 100px; }

    #socials li { float: none; display: inline-block; }

    label, .form-control, .form-select { font-size: 1.1em; }
}