/* ===========================================================
   NATIQ ART GALLERY
   STYLE.CSS
   VERSION 3.0
=========================================================== */


/* ================= VARIABLES ================= */


:root{

    --bg:#ffffff;
    --text:#171717;
    --gray:#707070;
    --border:#e8e8e8;

    --max-width:1600px;

    --header-height:90px;

    --transition:.35s ease;

}




/* ================= RESET ================= */


*{

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

}


html{

    scroll-behavior:smooth;

}


body{

    background:var(--bg);

    color:var(--text);

    font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

    line-height:1.7;

    overflow-x:hidden;

}



img{

    display:block;

    width:100%;

}



a{

    color:inherit;

    text-decoration:none;

}



button{

    border:none;

    background:none;

    cursor:pointer;

    font:inherit;

}



.hidden{

    display:none!important;

}







/* ================= HEADER ================= */



header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:var(--header-height);

    background:
    rgba(255,255,255,.96);

    backdrop-filter:blur(10px);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 60px;

    border-bottom:1px solid var(--border);

    z-index:1000;

}



.logo{

    font-size:25px;

    font-weight:300;

    letter-spacing:3px;

}




nav{

    display:flex;

    gap:42px;

}



nav a{

    font-size:15px;

    position:relative;

}



nav a:after{

    content:"";

    position:absolute;

    left:0;

    bottom:-7px;

    width:0;

    height:1px;

    background:#111;

    transition:.3s;

}



nav a:hover:after{

    width:100%;

}




.language{

    display:flex;

    gap:10px;

}



.language button{

    padding:6px 10px;

    border:1px solid transparent;

}



.language button:hover{

    border-color:#ccc;

}






/* ================= MAIN ================= */


main{

    margin-top:var(--header-height);

}







/* ================= HERO ================= */



#hero{

    height:100vh;

    position:relative;

    overflow:hidden;

}



#slider{

    width:100%;

    height:100%;

}



#slideImage{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:opacity 1.5s ease;

}





.heroContent{

    position:absolute;

    top:50%;

    left:50%;

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

    text-align:center;

    color:white;

}



.heroContent h1{

    font-size:72px;

    font-weight:300;

    letter-spacing:5px;

}



.heroContent p{

    margin-top:20px;

    font-size:20px;

    letter-spacing:3px;

}



#galleryButton{

    margin-top:40px;

    padding:15px 45px;

    color:white;

    border:1px solid white;

    transition:.35s;

}



#galleryButton:hover{

    background:white;

    color:black;

}







/* ================= SECTION TITLES ================= */



section h2{

    text-align:center;

    font-size:42px;

    font-weight:300;

    margin-bottom:70px;

}







/* ================= SELECTED WORKS ================= */



#selectedWorks{

    max-width:var(--max-width);

    margin:130px auto;

    padding:0 40px;

}



#selectedContainer{

    display:grid;

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

    gap:35px;

}



.selectedArtwork{

    cursor:pointer;

    transition:.35s;

}



.selectedArtwork:hover{

    transform:translateY(-8px);

}



.selectedArtwork img{

    aspect-ratio:4/5;

    object-fit:cover;

}



.selectedArtwork h3{

    margin-top:15px;

    font-size:20px;

    font-weight:400;

}





.selectedArtwork p{

    color:var(--gray);

    font-size:14px;

}








/* ================= ABOUT ARTIST ================= */



#aboutArtist{

    max-width:1500px;

    margin:140px auto;

    padding:0 40px 100px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}



.aboutImage img{

    max-width:550px;

}



.aboutText h2{

    text-align:left;

}



.aboutText{

    color:#555;

    font-size:17px;

    line-height:2;

}



#readBiography{

    margin-top:35px;

    padding:14px 35px;

    border:1px solid #111;

    transition:.35s;

}



#readBiography:hover{

    background:#111;

    color:white;

}
/* ================= GALLERY ================= */


#galleryPage{

    max-width:1800px;

    margin:0 auto;

    padding:90px 50px 120px;

}



#galleryPage h1{

    text-align:center;

    font-size:48px;

    font-weight:300;

    margin-bottom:55px;

}



.filter{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:60px;

}



.filter button{

    padding:11px 25px;

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

    transition:.3s;

}



.filter button:hover,

.filter button.active{

    background:#111;

    color:white;

}




#galleryContainer{

    display:grid;

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

    gap:28px;

}





.galleryCard{

    cursor:pointer;

    transition:.35s;

}



.galleryCard:hover{

    transform:translateY(-7px);

}



.galleryCard img{

    aspect-ratio:4/5;

    object-fit:cover;

    transition:.35s;

}



.galleryCard:hover img{

    transform:scale(1.03);

}




.galleryInfo{

    padding-top:15px;

}



.galleryInfo h3{

    font-size:18px;

    font-weight:400;

}



.galleryInfo p{

    color:#777;

    font-size:14px;

    margin-top:5px;

}








/* ================= SINGLE ARTWORK ================= */



#artworkPage{

    max-width:1500px;

    margin:auto;

    padding:90px 40px 120px;

}



#artworkContainer{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:70px;

}



.artworkImage{

    position:sticky;

    top:120px;

}



.artworkImage img{

    cursor:zoom-in;

}



.artworkInfo h1{

    font-size:45px;

    font-weight:300;

    margin-bottom:30px;

}



.artworkMeta{

    color:#777;

    margin-bottom:20px;

}



.artworkDescription{

    line-height:2;

}







/* ================= BIOGRAPHY ================= */



#biographyPage{

    max-width:1500px;

    margin:auto;

    padding:90px 40px 120px;

}


.bioImage img{

    width:100%;

}



.bioText{

    font-size:17px;

    color:#444;

    line-height:2;

}



.bioText h1{

    font-size:48px;

    font-weight:300;

    margin-bottom:35px;

}






.bioGallery{

    display:grid;

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

    gap:30px;

    margin:70px 0;

}



.bioGallery img{

    aspect-ratio:4/3;

    object-fit:cover;

}



.bottomText{

    max-width:900px;

    margin:0 auto 100px;

}







/* ================= CATALOGUES ================= */



#cataloguesPage{

    max-width:900px;

    margin:auto;

    padding:90px 40px 120px;

}



#cataloguesPage h1{

    text-align:center;

    font-size:48px;

    font-weight:300;

    margin-bottom:60px;

}




.catalogues{

    display:flex;

    flex-direction:column;

    gap:20px;

}



.catalogues a{

    padding:25px;

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

    transition:.35s;

}



.catalogues a:hover{

    background:#111;

    color:white;

}








/* ================= LIGHTBOX ================= */



.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.95);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}



#lightboxImage{

    max-width:90%;

    max-height:90%;

    object-fit:contain;

}




#closeLightbox{

    position:absolute;

    top:25px;

    right:40px;

    color:white;

    font-size:55px;

    cursor:pointer;

}




.lightboxArrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    color:white;

    font-size:55px;

    cursor:pointer;

    padding:20px;

}



.lightboxArrow.left{

    left:30px;

}



.lightboxArrow.right{

    right:30px;

}



.lightboxArrow:hover,

#closeLightbox:hover{

    opacity:.6;

}








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



footer{

    border-top:1px solid var(--border);

    padding:40px 60px;

    display:flex;

    justify-content:space-between;

    color:#777;

    font-size:14px;

}
/* ================= TABLET ================= */


@media(max-width:1200px){


header{

    padding:0 30px;

}



nav{

    gap:25px;

}



#galleryContainer{

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

}



#selectedContainer{

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

}



#aboutArtist{

    grid-template-columns:1fr;

    gap:50px;

}



#artworkContainer{

    grid-template-columns:1fr;

}



.artworkImage{

    position:static;

}



.bioSection{

    grid-template-columns:1fr;

    gap:50px;

}



.bioSection.reverse{

    direction:ltr;

}



.bioGallery{

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

}


}








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


@media(max-width:768px){



header{

    height:auto;

    flex-direction:column;

    gap:20px;

    padding:20px;

}



.logo{

    font-size:21px;

}



nav{

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

}



main{

    margin-top:170px;

}





.heroContent h1{

    font-size:40px;

}



.heroContent p{

    font-size:16px;

}



#galleryButton{

    padding:13px 30px;

}






#selectedWorks{

    padding:0 20px;

}



#selectedContainer{

    grid-template-columns:1fr;

}





#aboutArtist{

    padding:0 20px 70px;

}



.aboutText h2{

    font-size:34px;

}






#galleryPage{

    padding:60px 20px 80px;

}



#galleryPage h1{

    font-size:36px;

}



#galleryContainer{

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

    gap:18px;

}




.filter button{

    padding:9px 16px;

}







#biographyPage{

    padding:60px 20px 80px;

}



.bioText h1{

    font-size:36px;

}



.bioGallery{

    grid-template-columns:1fr;

}






#cataloguesPage{

    padding:60px 20px 80px;

}



#cataloguesPage h1{

    font-size:36px;

}






.lightboxArrow{

    font-size:40px;

}



.lightboxArrow.left{

    left:5px;

}



.lightboxArrow.right{

    right:5px;

}



#closeLightbox{

    right:20px;

    font-size:45px;

}






footer{

    flex-direction:column;

    gap:15px;

    text-align:center;

    padding:30px 20px;

}



}









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


@media(max-width:500px){



#galleryContainer{

    grid-template-columns:1fr;

}



.heroContent h1{

    font-size:32px;

}



section h2{

    font-size:32px;

}



.logo{

    letter-spacing:1px;

}



.language button{

    padding:5px 8px;

}



}

/* ================= BIOGRAPHY DESIGN ================= */


.bioSection{

display:flex;

align-items:center;

gap:60px;

max-width:1200px;

margin:70px auto;

}


.bioImage{

width:35%;

}


.bioImage img{

width:100%;

max-width:350px;

}


.bioText{

width:65%;

font-size:18px;

line-height:1.8;

color:#444;

}


.bioSection.reverse{

flex-direction:row-reverse;

}



.bioGallery {

display:flex;
gap:30px;
max-width:1200px;
margin:80px auto;

}


.bioGallery img {

width:33.33%;
height:300px;
object-fit:cover;

}



.bottomText {

max-width:1000px;
margin:50px auto;

}

/* ================= REDUCE TOP SPACING ================= */


#galleryPage,
#biographyPage,
#cataloguesPage,
#artworkPage {

    padding-top:30px;

}


#selectedWorks,
#aboutArtist {

    margin-top:70px;

}

/* ================= HOME ABOUT ARTIST ================= */

#aboutArtist {

    align-items:center;

}


.aboutImage {

    display:flex;
    justify-content:flex-start;

}


.aboutImage img {

    max-width:500px;

}


.aboutText {

    text-align:left;

}


.aboutText h2 {

    text-align:left;

}


#readBiography {

    display:inline-block;

}