/* ==========================================
   STRAW FLOWER DESIGN
   Part 1
========================================== */

/* ---------- Fonts ---------- */

@font-face{
    font-family:"Canela";
    src:url("Canela/Canela-Light.otf") format("opentype");
    font-weight:300;
}

@font-face{
    font-family:"Canela";
    src:url("Canela/Canela-Regular.otf") format("opentype");
    font-weight:400;
}

@font-face{
    font-family:"Canela";
    src:url("Canela/Canela-Medium.otf") format("opentype");
    font-weight:500;
}

/* ---------- Variables ---------- */

:root{

    --text:#111111;
    --background:#ffffff;
    --border:#1f1f1f;
    --hover:#fafafa;

}

/* ---------- Reset ---------- */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:"Canela", serif;

    overflow-x:hidden;

}

/* ---------- Hero ---------- */

.hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

/* ---------- Logo ---------- */

.logo-container{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    z-index:1;

    pointer-events:none;

}

.logo-container img{

    width:340px;

    height:auto;

    display:block;

    animation:fadeLogo .9s ease;

}

/* ---------- Services ---------- */

.services{

    position:relative;

    width:100%;

    height:100%;

}

/* ---------- Service Card ---------- */

.service{

    position:absolute;

    display:flex;
    align-items:center;
    justify-content:center;

    min-width:300px;

    padding:16px 26px;

    border:1px solid var(--border);
    border-radius:6px;

    background:#fff;

    color:var(--text);

    text-decoration:none;

    font-size:22px;
    font-weight:300;

    line-height:1.3;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;

    z-index:2;

}


.service:hover{

   transform:translateY(-4px);

    background:#fafafa;

    box-shadow:0 10px 24px rgba(0,0,0,.08);

}

.service:hover::before{

    box-shadow:inset 0 0 0 1px #111;

}

/* ---------- Desktop Positions ---------- */

.service-1{

    top:12%;

    left:8%;

}

.service-2{

    top:20%;

    right:8%;

}

.service-3{

    bottom:22%;

    left:6%;

}

.service-4{

    bottom:18%;

    right:10%;

}

/* ---------- Footer ---------- */

footer{

    position:absolute;

    left:39%;

    top:88%;

    bottom:auto;

    transform:translateX(-50%);

    display:flex;

    justify-content:center;

    align-items:center;

    gap:80px;

    width:max-content;

    white-space:nowrap;

    z-index:5;

}

footer a{

    text-decoration:none;

    color:var(--text);

    font-size:16px;

    transition:.3s;

}

footer a:hover{

    opacity:.6;

}

/* ---------- Tablet ---------- */

@media (max-width:1100px){

.logo-container img{

    width:280px;

}

.service{

    min-width:260px;

    font-size:19px;

}

.service-1{

    left:5%;

}

.service-2{

    right:5%;

}

.service-3{

    left:3%;

}

.service-4{

    right:4%;

}

footer{

    top:87%;

    gap:35px;

}

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

body{

    overflow-y:auto;

}

.hero{

    min-height:100vh;

    height:auto;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    padding:70px 20px 50px;

}

/* Logo */

.logo-container{

    position:relative;

    top:auto;

    left:auto;

    transform:none;

    margin-bottom:50px;

    z-index:1;

}

.logo-container img{

    width:220px;

}

/* Services */

.services{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:18px;

    width:100%;

    height:auto;

}

.service{

    position:relative;

    top:auto;

    right:auto;

    bottom:auto;

    left:auto;

    width:100%;

    max-width:340px;

    min-width:unset;

    text-align:center;

    font-size:18px;

    padding:18px 20px;

}

/* Footer */

footer{

    position:absolute;

    left:40%;

    top:84%;

    bottom:auto;

    transform:none;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    margin-top:40px;

    padding-bottom:30px;

}

footer a{

    font-size:16px;

}

}

/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:430px){

.logo-container img{

    width:180px;

}

.service{

    font-size:17px;

    padding:16px;

}

footer a{

    font-size:15px;

}

}

/* ==========================================
   LARGE DESKTOPS
========================================== */

@media (min-width:1600px){

.logo-container img{

    width:420px;

}

.service{

    font-size:24px;

    padding:18px 32px;

}

.service-1{

    top:14%;

    left:12%;

}

.service-2{

    top:22%;

    right:12%;

}

.service-3{

    bottom:24%;

    left:10%;

}

.service-4{

    bottom:20%;

    right:12%;

}

}

/* ==========================================
   ANIMATIONS
========================================== */

@keyframes fadeLogo{

from{

    opacity:0;

    transform:scale(.95);

}

to{

    opacity:1;

    transform:scale(1);

}

}

@keyframes fadeUp{

from{

    opacity:0;

    transform:translateY(18px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}

.service-1{

    animation:fadeUp .6s ease .15s both;

}

.service-2{

    animation:fadeUp .6s ease .30s both;

}

.service-3{

    animation:fadeUp .6s ease .45s both;

}

.service-4{

    animation:fadeUp .6s ease .60s both;

}

footer{

    animation:fadeUp .6s ease .75s both;

}