/* ========================= 
   FONTS 
========================= */ 
 
@font-face {
    font-family: "TT Norms";
    src: url("../fonts/TTNorms-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "TT Norms";
    src: url("../fonts/TTNorms-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}
 
@font-face { 
    font-family: "TT Norms"; 
    src: url("../fonts/TT_Norms-ExtraBlack.woff2") format("woff2"); 
    font-weight: 900; 
    font-style: normal; 
} 
 
 
/* ========================= 
   GLOBAL 
========================= */ 
 
* { 
    box-sizing: border-box; 
	font-variant-ligatures: none;
} 
 
html { 
    margin: 0; 
    padding: 0; 
} 
 
body { 
    margin: 0; 
    padding: 0; 
 
    background: #ffffff; 
    color: #000000; 
 
    font-family: "TT Norms", sans-serif; 
} 
 
a { 
    color: inherit; 
    text-decoration: none; 
} 
 
 
/* ========================= 
   HEADER
   BLACK FULL WIDTH 
========================= */ 
 
.site-header {
    width: 100%;

    background: #000000;
    color: #ffffff;

    position: sticky;
    top: 0;

    z-index: 1000;
}
 
.header-inner { 
    width: 100%; 
    max-width: 1280px; 
 
    margin: 0 auto; 
 
    display: flex; 
    align-items: flex-start; 
    justify-content: space-between; 
 
    padding-top: 20px; 
 
    position: relative; 
} 
 
 
/* ČRTA POD NAVIGACIJO */ 
 
.header-inner::after { 
    content: ""; 
 
    position: absolute; 
 
    left: 24%; 
    right: 0; 
 
    top: 68px; 
 
    height: 1px; 
 
    background: #f3f1ee; 
} 
 
 
/* ========================= 
   LOGO 
========================= */ 
 
.logo { 
    color: #ffffff; 
 
    font-family: "TT Norms", sans-serif; 
 
    font-size: 60px; 
    line-height: 1; 
 
    font-weight: 900; 
 
    text-decoration: none; 
 
    white-space: nowrap; 
} 
 
 
/* ========================= 
   NAVIGATION 
========================= */ 
 
.main-nav { 
    display: flex; 
    align-items: center; 
 
    gap: 42px; 
 
    padding-top: 17px; 
} 
 
.main-nav a { 
    color: #ffffff; 
 
    font-family: "TT Norms", sans-serif; 
 
    font-size: 16px; 
    line-height: 1; 
 
    font-weight: 400; 
 
    text-decoration: none; 
} 
 
.main-nav a:hover { 
    opacity: 0.7; 
} 
 
 
/* ========================= 
   HERO 
   BLACK FULL WIDTH 
========================= */ 
 
.hero {
    width: 100%;

    background: #000000;
    color: #ffffff;

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 0px;

    padding-top: 50px;
    padding-bottom: 50px;

    padding-left: max(20px, calc((100% - 1280px) / 2));
    padding-right: max(20px, calc((100% - 1280px) / 2));
}
 
 
/* ========================= 
   HERO LEFT 
========================= */ 
 
.hero-left { 
    display: flex; 
    flex-direction: column; 
 
    justify-content: center; 
 
    max-width: 520px; 
} 
 
 
/* H1 */ 
 
.hero-left h1 { 
    margin: 0; 
 
    font-family: "TT Norms", sans-serif; 
 
    font-size: 60px; 
    line-height: 1.05; 
 
    font-weight: 700; 
 
    color: #ffffff; 
} 
 
 
/* ČRTICA */ 
 
.hero-line { 
    width: 42px; 
    height: 1px; 
 
    background: #f3f1ee; 
 
    margin-top: 30px; 
    margin-bottom: 32px; 
} 
 
 
/* OPIS */ 
 
.hero-description { 
    margin: 0; 
 
    font-family: "TT Norms", sans-serif; 
 
    font-size: 18px; 
    line-height: 1.45; 
 
    font-weight: 400; 
 
    color: #ffffff; 
} 
 
 
/* CTA */ 
 
.hero-link { 
    display: inline-block; 
 
    margin-top: 30px; 
 
    font-family: "TT Norms", sans-serif; 
 
    font-size: 18px; 
    line-height: 1; 
 
    font-weight: 400; 
 
    color: #f3f1ee; 
 
    text-decoration: none; 
} 
 
.hero-link:hover { 
    opacity: 0.7; 
} 
 
 
/* ========================= 
   HERO RIGHT / IMAGE 
========================= */ 
 
.hero-right { 
    display: flex; 
 
    align-items: right; 
    justify-content: right; 
} 
 
.hero-photo { 
    display: block; 
 
    width: auto; 
    height: 700px; 
 
    max-width: none; 
 
    object-fit: contain; 
} 
 
 
/* ========================= 
   SERVICES
   WHITE FULL WIDTH 
========================= */ 
 
.services-section { 
    width: 100%; 
 
    background: #ffffff; 
    color: #000000; 
 
    padding-top: 0; 
    padding-bottom: 80px; 
} 
 
 
/* SERVICES CONTENT */ 
 
.services { 
    width: 100%; 
    max-width: 1280px; 
 
    margin: 48px auto 0; 
 
    background: #ffffff; 
    color: #000000; 
} 
 
 
/* ========================= 
   SERVICE TABS 
========================= */ 
 
.services-tabs { 
    width: 100%; 
 
    display: grid; 
 
    grid-template-columns: repeat(4, 1fr); 
 
    background: #ffffff; 
} 
 
.service-tab { 
    border: none; 
 
    background: #ffffff; 
    color: #000000; 
 
    font-family: "TT Norms", sans-serif; 
 
    font-size: 24px; 
    line-height: 1.15; 
 
    font-weight: 400; 
 
    text-align: left; 
 
    padding: 20px 22px 22px; 
 
    cursor: pointer; 
} 
 
.service-tab.active { 
    background: #f3f1ee; 
} 
 
 
/* ========================= 
   SERVICE CONTENT 
========================= */ 
 
.service-content { 
    width: 100%; 
 
    background: #f3f1ee; 
    color: #000000; 
 
    padding: 32px 22px 34px; 
 
    min-height: 265px; 
} 
 
.service-panel { 
    display: none; 
} 
 
.service-panel.active { 
    display: block; 
} 
 
 
/* ========================= 
   SERVICE TEXT 
========================= */ 
 
.service-panel p { 
    max-width: 1120px; 
 
    margin: 0 0 28px; 
 
    font-family: "TT Norms", sans-serif; 
 
    font-size: 16px; 
    line-height: 1.45; 
 
    font-weight: 400; 
} 
 
.service-panel h3 { 
    margin: 0 0 4px; 
 
    font-family: "TT Norms", sans-serif; 
 
    font-size: 16px; 
    line-height: 1.4; 
 
    font-weight: 700; 
} 
 
.service-panel ul { 
    margin: 0; 
 
    padding-left: 28px; 
} 
 
.service-panel li { 
    font-family: "TT Norms", sans-serif; 
 
    font-size: 16px; 
    line-height: 1.45; 
 
    font-weight: 400; 
} 
 
 
/* ========================= 
   TYPOGRAPHY SYSTEM 
========================= */ 
 
h1 { 
    font-family: "TT Norms", sans-serif; 
 
    font-size: 50px; 
    font-weight: 700; 
} 
 
h2 { 
    font-family: "TT Norms", sans-serif; 
 
    font-size: 40px; 
    font-weight: 700; 
} 
 
p, 
li { 
    font-size: 16px; 
    font-weight: 400; 
} 
 
.small { 
    font-size: 14px; 
    font-weight: 400; 
} 

/* =========================
   PROJECTS
========================= */

.projects-section {
    width: 100%;

    background: #ffffff;
    color: #000000;

    padding-top: 80px;
    padding-bottom: 80px;
}


/* =========================
   PROJECTS INTRO
========================= */

.projects-intro {
    max-width: 1280px;

    margin: 0 auto 35px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 60px;
}

.projects-intro h2 {
    margin: 0;

    font-family: "TT Norms", sans-serif;

    font-size: 28px;
    line-height: 1.2;

    font-weight: 400;
}

.projects-intro p {
    margin: 0;

    max-width: 430px;

    font-size: 18px;
    line-height: 1.4;

    text-align: right;
}


/* =========================
   CAROUSEL
========================= */

.projects-carousel {
    position: relative;

    width: 100%;
    max-width: 1280px;

    margin: 0 auto;
}


.projects-track {
    display: flex;

    gap: 26px;

    overflow: hidden;

    scroll-behavior: smooth;
}


/* =========================
   PROJECT CARD
========================= */

.project-card {
    flex: 0 0 calc((100% - 52px) / 3);

    min-width: 0;

    background: #f3f1ee;

    color: #000000;

    text-decoration: none;

    cursor: pointer;
}


/* =========================
   PROJECT IMAGE
========================= */

.project-image {
    width: 100%;

    aspect-ratio: 1 / 1;

    background: #222222;

    overflow: hidden;
}

.project-image img {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================
   PROJECT INFO
========================= */

.project-info {
    padding: 18px 18px 22px;
}

.project-info h3 {
    margin: 0 0 4px;

    font-family: "TT Norms", sans-serif;

    font-size: 18px;
    line-height: 1.2;

    font-weight: 700;
}

.project-client {
    margin: 0 0 20px;

    font-size: 16px;
    line-height: 1.3;
}

.project-description {
    margin: 0;

    font-size: 16px;
    line-height: 1.4;
}

.project-more {
    display: block;
    margin-top: 22px;

    font-family: "TT Norms", sans-serif;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;

    text-align: right;
    color: #000000;
}

.project-more:hover {
    opacity: 0.55;
}


/* =========================
   ARROWS
========================= */

.projects-arrow {
    position: absolute;

    top: 40%;

    z-index: 5;

    width: 42px;
    height: 42px;

    border: none;

    background: transparent;
    color: #000000;

    font-family: Arial, sans-serif;

    font-size: 48px;
    line-height: 35px;

    padding: 0;

    cursor: pointer;
}

.projects-arrow-left {
    left: -45px;
}

.projects-arrow-right {
    right: -45px;
}

.projects-arrow:hover {
    opacity: 0.5;
}

/* =========================
   O MENI
========================= */

.about-section {
    width: 100%;

    background: #ffffff;
    color: #000000;

    padding: 0px 0;
	    padding-bottom: 100px;
}

.about {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    padding: 0 20px;
}


/* NASLOV */

.about h2 {
    margin: 0 0 14px;

    font-family: "TT Norms", sans-serif;

    font-size: 28px;
    line-height: 1.1;

    font-weight: 400;
}


/* UVOD */

.about-intro {
    width: 100%;
}

.about-intro p {
    margin: 0;

    font-size: 16px;
    line-height: 1.45;
}

.about-intro strong {
    font-weight: 700;
}


/* GLAVNI DEL */

.about-main {
    display: grid;

    grid-template-columns: 190px 1fr;

    column-gap: 32px;

    margin-top: 26px;

    align-items: start;
}


/* FOTOGRAFIJA */

.about-photo {
    width: 190px;
    height: 190px;

    border-radius: 50%;

    overflow: hidden;

    background: #f3f1ee;
}

.about-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* BESEDILO */

.about-text {
    max-width: 1000px;
}

.about-text p {
    margin: 0 0 28px;

    font-size: 16px;
    line-height: 1.45;
}


/* =========================
   CERTIFIKATI
========================= */

.certificates {
    font-size: 16px;
    line-height: 1.45;
}

.certificate-link {
    padding: 0;

    border: 0;

    background: none;

    color: #000000;

    font-family: "TT Norms", sans-serif;
    font-size: inherit;
    line-height: inherit;

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    cursor: pointer;
}

.certificate-link:hover {
    opacity: 0.55;
}


/* =========================
   CERTIFICATE MODAL
========================= */

.certificate-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

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

    padding: 30px;
}

.certificate-modal.active {
    display: flex;
}


/* OZADJE */

.certificate-overlay {
    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.85);
}


/* OKNO */

.certificate-modal-content {
    position: relative;

    z-index: 2;

    width: min(1000px, 95vw);
    height: min(90vh, 900px);

    background: #ffffff;

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


/* CLOSE */

.certificate-close {
    position: absolute;

    top: -42px;
    right: 0;

    border: 0;
    background: none;

    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 34px;
    line-height: 1;

    cursor: pointer;
}


/* VIEWER */

.certificate-viewer {
    width: 100%;
    height: 100%;

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

.certificate-viewer img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}

.certificate-viewer iframe {
    width: 100%;
    height: 100%;

    border: 0;
}

 
/* ========================= 
   MOBILE 
========================= */ 
 
@media (max-width: 900px) { 

    .hero-right {
        display: none;
    }

    .header-inner { 
        padding-left: 20px; 
        padding-right: 20px; 
    } 
	
    .header-inner::after {
        top: auto;
        bottom: 0;
    }
	
    .logo { 
        font-size: 50px; 
    } 
 
    .main-nav { 
        gap: 0; 
    } 
 
    .hero { 
        grid-template-columns: 1fr; 
        row-gap: 50px; 
        padding-left: 20px; 
        padding-right: 20px; 
    } 
 
    .hero-left { 
        max-width: 600px; 
    } 
 
    .hero-left h1 { 
        font-size: 50px; 
    } 
 
    .hero-description { 
        font-size: 16px; 
    } 
 
    .hero-link { 
        font-size: 16px; 
    } 
 
    .hero-photo { 
        height: 360px; 
    } 
 
    .services-section { 
        padding-left: 20px; 
        padding-right: 20px; 
    } 
 
    .service-tab { 
        font-size: 24px; 
    } 
} 

/* =========================
   CONTACT / CTA
========================= */

.contact-section {
    width: 100%;

    background: #000000;
    color: #ffffff;

    padding-top: 70px;
    padding-bottom: 0;
}


/* CTA */

.contact-content {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    text-align: center;
}

.contact-title {
    margin: 0 0 4px;

    font-size: 28px;
    line-height: 1.2;
    font-weight: 400;

    color: #ffffff;
}

.contact-email {
    display: inline-block;

    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;

    color: #ffffff;
    text-decoration: none;
}

.contact-email:hover {
    opacity: 0.7;
}


/* =========================
   FOOTER
========================= */

.site-footer {
    width: 100%;

    background: #000000;
    color: #ffffff;

    margin-top: 105px;
}

.footer-inner {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

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

    padding: 0 0 35px;

    font-size: 14px;
    line-height: 1.2;
}

.footer-inner a {
    color: #ffffff;
    text-decoration: none;
}

.footer-inner a:hover {
    opacity: 0.7;
}
 
 
@media (max-width: 600px) { 
 
    .header-inner { 
        flex-direction: column; 
    } 
 
    .main-nav { 
        width: 100%; 
        justify-content: flex-end; 
        gap: 20px; 
        padding-top: 20px;
        padding-bottom: 14px;
    } 
 
    .main-nav a { 
        font-size: 14px; 
    } 
 
    .logo { 
        font-size: 50px; 
    } 
 
    .hero { 
        padding-top: 55px; 
        padding-bottom: 55px; 
    } 
 
    .hero-left h1 { 
        font-size: 40px; 
    } 
 
    .hero-description { 
        font-size: 14px; 
    }

    .hero-link { 
        font-size: 14px; 
    }
 
    .hero-photo { 
        width: 100%; 
        height: auto; 
    } 
 
    /* SERVICES TABS */


/* SERVICES TABS */

.services-tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.services-tabs::-webkit-scrollbar {
    display: none;
}

.service-tab {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1.15;
    padding: 14px 16px 16px;
    white-space: nowrap;
}

    /* SERVICES TEXT */

    .service-panel p,
    .service-panel h3,
    .service-panel li {
        font-size: 14px;
    }

    /* MANJŠI GAP NAD SERVICES */

    .services {
        margin-top: 24px;
    }
}

@media (max-width: 900px) {

    .projects-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }


    .projects-intro {
        padding: 0 20px;

        flex-direction: column;

        gap: 18px;

        margin-bottom: 30px;
    }


    .projects-intro h2 {
        font-size: 24px;
    }


    .projects-intro p {
        max-width: 500px;

        font-size: 14px;

        text-align: right;
		align-self: flex-end;
    }


    .projects-carousel {
        padding: 0 20px;
    }


    .projects-track {
        gap: 18px;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;
        -ms-overflow-style: none;

        scroll-snap-type: x mandatory;
    }


    .projects-track::-webkit-scrollbar {
        display: none;
    }


    .project-card {
        flex: 0 0 60%;

        scroll-snap-align: start;
    }


    .projects-arrow {
        display: none;
    }


    .project-info h3 {
        font-size: 16px;
    }


    .project-client,
    .project-description {
        font-size: 14px;
    }

}

@media (max-width: 600px) {

    .about-section {
        padding: 0px 0;
		padding-bottom: 30px;
    }

    .about {
        padding: 0 20px;
    }

    .about h2 {
        font-size: 24px;
    }

    .about-intro p,
    .about-text p,
    .certificates {
        font-size: 14px;
    }

    .about-main {
        display: block;

        margin-top: 28px;
    }

    .about-photo {
        width: 210px;
        height: 210px;

        float: right;

        margin: -5px 0 20px 20px;

        shape-outside: circle(50%);
        clip-path: circle(50%);
    }

    .certificate-modal {
        padding: 15px;
    }

    .certificate-modal-content {
        width: 95vw;
        height: 85vh;
    }

    .certificate-close {
        top: -38px;
        font-size: 30px;
    }
}

/* =========================
   CONTACT / FOOTER - MOBILE
========================= */

@media (max-width: 600px) {

    .contact-section {
        padding-top: 55px;
    }

    .contact-content {
        padding: 0 20px;
    }

    .contact-title {
        font-size: 20px;
    }

    .contact-email {
        font-size: 20px;
    }

    .site-footer {
        margin-top: 80px;
    }

    .footer-inner {
        padding: 0 20px 25px;

        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        gap: 10px;

        font-size: 12px;
    }
}

/* =========================
   SMOOTH ANCHOR SCROLL
========================= */

html {
    scroll-behavior: smooth;
}

/* =========================
   ANCHOR SCROLL OFFSET
========================= */

#storitve,
#portfolio,
#o-meni,
#kontakt {
    scroll-margin-top: 90px;
}

@media (max-width: 600px) {
    #storitve,
    #portfolio,
    #o-meni,
    #kontakt {
        scroll-margin-top: 200px;
    }
}

/* =========================
   MNENJE NAROČNIKA
========================= */

.testimonial {
    width: 100%;
    margin-top: 55px;
    padding: 40px 60px;
    background: #f3f1ee;
    color: #000000;
    text-align: center;
}

.testimonial p {
    margin: 0 0 18px;
    font-family: "TT Norms", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}

.testimonial p:last-of-type {
    margin-bottom: 25px;
}

.testimonial-author {
    text-align: right;
    font-family: "TT Norms", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
}

@media (max-width: 600px) {
    .testimonial {
        margin-top: 35px;
        padding: 25px 20px;
    }

    .testimonial p {
        font-size: 14px;
        line-height: 1.5;
    }

    .testimonial-author {
        font-size: 14px;
    }
}