/* css styling file for  Landing Page */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#cac6c6;
    font-family:Arial, Helvetica, sans-serif;
}


.announcement{

    height:36px;

    background:linear-gradient(
    90deg,
    #7a320d,
    #9b4210,
    #7a320d);

    color:#f5e4cb;

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

    font-size:12px;
    letter-spacing:3px;

    text-transform:uppercase;

    box-shadow:
    inset 0 -1px rgba(255,255,255,.15),
    0 2px 8px rgba(0,0,0,.4);

}

/* ============================= */
/* NAVBAR */
/* ============================= */

.navbar{

    position:relative;

    padding:40px 80px;

    background:
        linear-gradient(
            rgba(0,0,0,.28),
            rgba(0,0,0,.28)
        ),
        url("LeatherText.png");

    box-shadow:
        inset 0 4px 15px rgba(255,255,255,.05),
        inset 0 -6px 18px rgba(0,0,0,.55),
        0 12px 35px rgba(0,0,0,.45);

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    color:#ead7b3;

}

/* Leather wrinkles */

.navbar::before{

content:"";

position:absolute;

left:0;
right:0;
top:10px;

height:2px;

background:
repeating-linear-gradient(
90deg,
transparent 0 10px,
#d7b07a 10px 14px
);

}

.navbar::after{

content:"";

position:absolute;

left:0;
right:0;
bottom:10px;

height:2px;

background:
repeating-linear-gradient(
90deg,
transparent 0 10px,
#d7b07a 10px 14px
);

}



.navbar .top-stitch,
.navbar .bottom-stitch{

    position:absolute;

    left:0;
    width:100%;
    height:4px;

    background:repeating-linear-gradient(
        90deg,
        transparent 0 12px,
      
    );

}

.top-stitch{

    top:18px;

}

.bottom-stitch{

    bottom:18px;

}



.left-icons{

    position:absolute;

    left:80px;
    top:48px;

    color:#c79a62;

    font-size:24px;

}

.right-icons{

    position:absolute;

    right:80px;
    top:48px;

    display:flex;
    gap:25px;

    color:#c79a62;

    font-size:22px;

}



.logo{

    text-align:center;

    margin-bottom:34px;

}

.logo h1{

    font-family:'Cinzel',serif;

    font-size:74px;

    letter-spacing:9px;

    color:#f0dfc2;

    text-shadow:

    0 1px 0 #fff5df,

    0 3px 0 #6e4a27,

    0 10px 22px rgba(0,0,0,.65);

}

.logo h3{

    margin-top:-10px;

    font-family:'Libre Baskerville',serif;

    letter-spacing:7px;

    font-size:24px;

    font-weight:400;

    color:#dfc69c;

}

.logo p{

    margin-top:8px;

    font-size:18px;

    font-style:italic;

    letter-spacing:4px;

    color:#c8ab82;

}



.nav-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:42px;

    flex-wrap:wrap;

}

.nav-links a{

    position:relative;

    text-decoration:none;

    color:#d8b77a;

    font-size:18px;

    letter-spacing:1px;

    transition:.35s;

}

.nav-links a:hover{

    color:#fff4dd;

}

.nav-links a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:2px;

    background:#f7f7f7;

    transition:.35s;

}

.nav-links a:hover::after{

    width:100%;
}


@media(max-width:992px){

.navbar{

padding:30px;

}

.logo h1{

font-size:52px;

}

.logo h3{

font-size:18px;

}

.nav-links{

gap:22px;
}

.left-icons,
.right-icons{

display:none;
}}


.footer{

    position:relative;

    background:
        linear-gradient(
            rgba(0,0,0,.30),
            rgba(0,0,0,.45)
        ),
        url("LeatherText.png");

    background-size:700px auto;
    background-position:center;
    background-repeat:repeat;

    color:#e6d2ae;

    padding:70px 8% 25px;

    box-shadow:
        inset 0 8px 20px rgba(0,0,0,.65),
        0 -15px 35px rgba(0,0,0,.45);

    overflow:hidden;
}

.footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            transparent 25%,
            transparent 75%,
            rgba(0,0,0,.25)
        );
    pointer-events:none;
}




.footer::after{

    content:"";

    position:absolute;

    top:12px;
    left:0;
    right:0;

    height:3px;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 10px,
            #c59b63 10px 15px
        );
    box-shadow:
        0 2px 0 rgba(0,0,0,.7);
}

.footer-container{

    position:relative;

    z-index:2;

    max-width:1400px;

    margin:auto;
}

.footer-brand{

    text-align:center;

    margin-bottom:55px;
}

.footer-brand h2{

    font-family:'Cinzel',serif;

    font-size:48px;

    letter-spacing:7px;

    color:#ead8b9;

    text-shadow:

        0 1px 0 #fff5df,

        0 2px 0 #9a7b54,

        0 5px 12px rgba(0,0,0,.8);
}

.footer-brand h3{

    font-family:'Libre Baskerville',serif;

    font-size:16px;

    letter-spacing:5px;

    color:#cdb58f;

    margin-top:5px;

}

.footer-brand p{

    margin-top:10px;

    font-style:italic;

    letter-spacing:3px;

    color:#ad936c;

}



.footer-columns{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:70px;

    max-width:950px;

    margin:auto;

}




.footer-column h4{

    font-family:'Cinzel',serif;

    font-size:16px;

    letter-spacing:3px;

    color:#e1c69b;

    margin-bottom:22px;

    position:relative;

}

.footer-column h4::after{

    content:"";

    display:block;

    width:35px;

    height:1px;

    background:#b58b55;

    margin-top:10px;

}




.footer-column a{

    display:block;

    width:max-content;

    margin-bottom:12px;

    text-decoration:none;

    color:#ad9877;

    font-size:14px;

    letter-spacing:1px;

    transition:.3s;

}

.footer-column a:hover{

    color:#f0dfbf;

    transform:translateX(5px);

}



.footer-bottom{

    position:relative;

    margin-top:55px;

    padding-top:25px;

    text-align:center;


}



.footer-bottom::before{

    content:"";

    position:absolute;

    top:-6px;

    left:0;
    right:0;

    height:2px;

}



.footer-bottom p{

    color:#9f886b;

    font-size:12px;

    letter-spacing:2px;

}

.footer-bottom span{

    display:block;

    margin-top:8px;

    color:#c3a579;

    font-family:'Libre Baskerville',serif;

    font-size:13px;

    font-style:italic;

}


@media(max-width:768px){

    .footer{

        padding:55px 30px 25px;

    }

    .footer-brand h2{

        font-size:35px;

        letter-spacing:5px;

    }

    .footer-columns{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;

    }

    .footer-column h4::after{

        margin-left:auto;
        margin-right:auto;

    }

    .footer-column a{

        margin-left:auto;
        margin-right:auto;

    }

}



.page-content{
    position:relative;
    min-height:75vh;
    padding:70px 50px 85px;

    background:
        linear-gradient(rgba(255,255,255,.20),rgba(255,255,255,.20)),
        url("MarbleBGText.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    overflow:hidden;
}

.page-content h1{
    margin:0;
    font-family:'Cinzel',serif;
    font-size:78px;
    font-weight:700;
    line-height:1.02;
    letter-spacing:2px;
    color:#111;
    text-align:center;

    text-shadow:
        0 1px 0 rgba(255,255,255,.85),
        0 4px 10px rgba(0,0,0,.12);
}

.page-content h1 .welcome{
    display:block;
    margin-bottom:8px;
    font-size:54px;
    font-weight:500;
    letter-spacing:4px;
    line-height:1.05;
    color:#171717;
}

.page-content h1 .imperial{
    color:#b18a4a;
    text-shadow:
        0 1px 0 #f6e8c8,
        0 2px 0 #8a6633,
        0 5px 12px rgba(80,55,20,.18);
}

.page-content > p{
    margin:22px 0 0;
    color:#27221d;
    font-family:'Libre Baskerville',serif;
    font-size:14px;
    font-style:italic;
    letter-spacing:1.8px;
}

.page-content > p + p{
    display:none;
}




.feature-layout{
    width:min(980px,100%);
    margin:72px auto 0;

    display:grid;
    grid-template-columns:320px 310px 320px;
    grid-template-rows:120px 120px;

    column-gap:60px;
    row-gap:26px;

    align-items:center;
    justify-content:center;
}

.feature-card{
    position:relative;
    min-height:100px;
    padding:28px;

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

    text-decoration:none;
    color:#ce7f09;

    font-family:'Cinzel',serif;
    font-size:24px;
    font-weight:800;
    letter-spacing:4px;

    background:
        linear-gradient(
            rgba(255,255,255,.62),
            rgba(255,255,255,.34)
        );

    border:1px solid rgba(177,138,74,.75);
    border-radius:4px;

    box-shadow:
        0 8px 16px rgba(0,0,0,.16),
        inset 0 0 0 2px rgba(255,255,255,.5);

    backdrop-filter:blur(2px);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.feature-card::before{
    content:"";
    position:absolute;
    inset:7px;
    border:1px solid rgba(177,138,74,.38);
    pointer-events:none;
}

.feature-card::after{
    content:"";
    position:absolute;
    bottom:13px;
    left:50%;
    width:30px;
    height:1px;
    transform:translateX(-50%);
    background:#ffa30e;
}

.feature-card:hover{
    transform:translateY(-5px);
    background:
        linear-gradient(
            rgba(247, 199, 98, 0.747),
            rgba(233, 222, 222, 0.897)
        );

    box-shadow:
        0 15px 25px rgba(0,0,0,.22),
        inset 0 0 0 2px rgba(255,255,255,.7);
}

.certifications{
    grid-column:1;
    grid-row:1;
}

.about{
    grid-column:3;
    grid-row:1;
}

.workplace{
    grid-column:1;
    grid-row:2;
}

.goods{
    grid-column:3;
    grid-row:2;
}




.logo-card{
    grid-column:2;
    grid-row:1 / 3;

    justify-self:center;
    align-self:center;

    width:190px;
    height:190px;

    position:relative;
    z-index:3;

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

    text-decoration:none;

    background:
        linear-gradient(
            rgba(255,255,255,.035),
            rgba(0,0,0,.18)
        ),
        url("LeatherText.png");

    background-size:cover;
    background-position:center;

    border:2px solid #b18a4a;
    border-radius:8px;

    box-shadow:
        0 18px 30px rgba(0,0,0,.35),
        inset 0 2px 2px rgba(255,255,255,.12),
        inset 0 -5px 12px rgba(0,0,0,.55);

    transform:translateY(-12px);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.logo-card::before{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(243, 165, 19, 0.7);
    border-radius:4px;
    pointer-events:none;
}

.logo-card img{
    position:relative;
    z-index:2;
    width:78%;
    max-height:78%;
    object-fit:contain;
    display:block;
}

.logo-card:hover{
    transform:translateY(-18px) scale(1.025);

    box-shadow:
        0 25px 40px rgba(0,0,0,.42),
        inset 0 2px 2px rgba(255,255,255,.14),
        inset 0 -5px 12px rgba(0,0,0,.6);
}




.left-icons,
.right-icons{
    display:none;
}



.page-content::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:10px;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 10px,
            #b18a4a 10px 14px
        );

    box-shadow:
        0 -2px 5px rgba(0,0,0,.15);
}



@media(max-width:1100px){

    .page-content{
        padding-left:30px;
        padding-right:30px;
    }

    .page-content h1{
        font-size:64px;
    }

    .page-content h1 .welcome{
        font-size:46px;
    }

    .feature-layout{
        width:900px;
        max-width:100%;
        column-gap:22px;
    }

    .logo-card{
        width:180px;
        height:180px;
    }
}

@media(max-width:768px){

    .page-content{
        min-height:auto;
        padding:55px 20px 70px;
    }

    .page-content h1{
        font-size:40px;
        letter-spacing:1px;
    }

    .page-content h1 .welcome{
        font-size:30px;
        letter-spacing:2px;
    }

    .page-content > p{
        font-size:12px;
        letter-spacing:1px;
    }

    .feature-layout{
        width:100%;
        margin-top:40px;

        grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto auto;
        gap:18px;
    }

    .certifications{
        grid-column:1;
        grid-row:1;
    }

    .about{
        grid-column:2;
        grid-row:1;
    }

    .logo-card{
        grid-column:1 / 3;
        grid-row:2;

        width:175px;
        height:175px;
    }

    .workplace{
        grid-column:1;
        grid-row:3;
    }

    .goods{
        grid-column:2;
        grid-row:3;
    }

    .feature-card{
        min-height:90px;
        font-size:12px;
        letter-spacing:1px;
    }
}