body  {
    margin: 0;
}

html {
  scroll-behavior: smooth;
}
.body {
    background-color: #FAF8F5;
}

/** HOME **/

.topDivHero {
    background-image: url("images/hero.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 150vh;
}

.topDivHeroGhost {
        height: 150vh
    }

.aboutDivHome {
    width: 100%;
    overflow: visible;
    
    /* Combine them here: Gradient FIRST, Image SECOND */
    background-image: 
        linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1) 70%), 
        url("images/aboutNaslovnica.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.heroH1 {
    font-size: 4rem;
    font-weight: 500;
    padding-left: 15%;
    font-family: "Playfair Display";
    padding-top: 5%;
    margin-right: 5%;
    z-index: 3;
}

.heroP {
    font-family: "Montserrat";
    font-size: 2rem;
    font-weight: 200;
    color: black;
}

.btn-outline-secondary {
   font-family: "Playfair Display";
    margin-left: 15%;
}

.carouselDiv {
    height: 110vh;
    width: 100%;
    background-image: url("images/carouselIMG.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}



/* 1. Give the carousel inner track a fixed height relative to the screen */
.carousel-inner {
    height: auto; /* Adjust this number (e.g., 70vh, 80vh) depending on how much screen space you want it to take */
    overflow: visible
}

/* 2. Force Bootstrap's slide containers to fill that exact height */
.carousel-item {
    height: 75vh;
  
  /* Flexbox centers everything inside the slide */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertical alignment */
  align-items: center;     /* Horizontal alignment */
}


/* 3. The magic fix for your images */
.carouselIMG {
    width: 80% !important;
    height: auto;
    object-fit: scale-down;
    max-height: 70vh; /* Keeps the whole image visible without distortion, adding letterboxes if needed */
    
    /* Center the image perfectly if it's narrower than the screen */
    margin-left: auto;
    margin-right: auto;
}

.carousel-control-prev,
.carousel-control-next {
  top: 4rem;                /* Pushes arrows down below the H2 heading */
  bottom: 0;                /* Keeps arrows centered vertically over the image area */
}

.carouselH2 {
    padding-top: 1%;
    font-size: 2rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: black;
    font-family: "Playfair Display";
}

.carouselDisplayH1 {
    padding-top: 5%;
    font-size: 3rem;
    padding-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: black;
    font-family: "Playfair Display";
}

.carouselH1 {
    padding-top: 5%;
    font-size: 3rem;
    padding-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: black;
    font-family: "Playfair Display";
}

.iframe {
    position: relative;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 90%;
    aspect-ratio: 16/9;
}



.carousel-control-next, .carousel-control-prev {
    filter: invert(100);
}

.carouselIMG {
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: 90%;
    object-fit: contain;
}

.promoDiv {
    min-height: 110vh;
    width: "100%";
    background-image: url("images/promoIMG.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.promoDiv1 {
    min-height: 75vh;
    width: "100%";
    background-color: #1b3160;
}


.promoH1 {
    padding-top: 15%;
    font-size: 3rem;
    padding-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: white;
    font-family: "Poppins";
}

.promoH2 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: white;
    font-family: "Playfair Display";
}

.promoP {
    font-family: "Montserrat";
    padding-top: 10%;
    padding-bottom: 20%;
    color: white;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.promoDiv {
    position: relative;
    width: 100%;
    /* Use min-height so it spans the screen but can grow if content needs space */
    min-height: 110vh; 
    /* Optional: adds breathing room at the bottom on mobile */
    padding-bottom: 2rem; 
}

/* Replaces your inline overlay div */
.promoOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Spans the full height of promoDiv, even if it expands */
    background-color: #000000;
    opacity: 0.8;
    z-index: 1;
}

/* Text elements need relative positioning to stay above the overlay */
.promoH1, .promoH2, .promoP {
    position: relative;
    z-index: 2;
}

/* The video container controls the layout width */
.framediv {
    position: relative;
    z-index: 2;
    width: 80%;
    max-width: 800px; /* Optional cap: keeps the video from getting absurdly giant on huge monitors */
    margin-left: auto;
    margin-right: auto;
}

/* The magic for responsive iframes */
.iframe {
    width: 100%;
    /* Dictates the height automatically based on the width to keep it widescreen */
    aspect-ratio: 16 / 9; 
    display: block;
}


.nav-link {
    font-size: 1.4rem;
    font-family: "Poppins";
    font-weight: 600;
}
.nav-link-end {
    margin-right: 100px;
}


.navbar-brand {
    font-weight: 900;
    font-family: "Poppins";
}

/** ABOUT ME **/

.aboutIMG {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: 300px;
    margin-bottom: 10%;
}

.quoteH1 {
    font-size: 2rem;
    font-family: "Poppins";
    text-align: center;
    font-weight: 900 ;
}

.quoteP  {
    font-size: 1.5rem;
    font-family: "Poppins";
    text-align: center;
    font-weight: 900 ;
}

.quoteTop {
    font-size: 5rem;
    font-family: "Poppins"; 
    text-align: left;
    margin-top: 15%;
    margin-bottom: -20px;
}

.quoteDown {
    font-size: 5rem;
    font-family: "Poppins";
    margin-bottom: 40%; 
    text-align: right
}

p {
    font-family: "Montserrat";
     font-size: 1.4rem;
    font-weight: 500;
    margin-left: 15%;
    margin-right: 15%;
    line-height: 1.75;
    padding-bottom: 3%;
    text-align: left;
}

.virtualnakavaA {
    text-decoration: none;
    color: #000;
    font-size: 1.25rem;
}

.virtualnakavaA:visited {
    color: #000;
}

.virtualnakavaA:hover {
    color: #000;

}

/** FOOTER **/

.footer {
    width: 100%;
    background-image: url("images/footerIMG.jpg");
    background-size: cover;
}

.footerH3 {
    position: relative;
    z-index: 2;
    font-family: "Montserrat";
    font-weight: 900;
}

.footerP {
    font-size: 0.85rem;
    font-family: "Montserrat";
    font-weight: 500;
    padding-top: 2%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;


}

.footerMFI {
    font-size: 1.2rem;
    font-family: "Montserrat";
    font-weight: 500;
    width: 100%
}

.footerMadeBy {
    font-size: 0.75rem;
    text-align: center;
    font-family: "Montserrat";
}

.footercon {
    width: 50%;
}

.aMadeBy {
    color: black;
    text-align: center;
}

.aMadeBy:hover {
    text-decoration: none;
    color: black

}

.aMadeBy:visited {
    color: black
}


/** SLIKARSTVO **/

.carouselDisplayDiv {
    height: 110vh;
    width: 100%;
    overflow: visible;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.carouselDisplay2Div {
    height: 110vh;
    width: 100%;
    overflow: visible;
    
    /* Combine them here: Gradient FIRST, Image SECOND */
    background-image: 
        linear-gradient(to left, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.85) 50%), 
        url("images/plesjabuka.jpg");
        
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}



.carouselDisplay3Div {
    height: 110vh;
    width: 100%;
    overflow: visible;
    
    /* Combine them here: Gradient FIRST, Image SECOND */
    background-image: 
        linear-gradient(to left, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.85) 50%), 
        url("images/ples5.jpg");
        
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/** POEZIJA **/

.poetryP {
    font-family: "Montserrat";
    font-size: 1.5rem;
    font-weight: 500;
    margin-left: 15%;
    margin-right: 15%;
    line-height: 1.75;
    text-align: left;
    position: relative;
    z-index: 2;
}

.poetryFullP {
    font-family: "Montserrat";
    font-size: 1.4rem;
    font-weight: 500;
    margin-left: 15%;
    margin-right: 15%;
    line-height: 2;
    text-align: left;
    position: relative;
    z-index: 2;
}

.custom-art-list {
  max-width: 400px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.custom-art-list .list-group-item {
  background: rgba(255, 255, 255, 0.65); /* Soft, translucent white */
  backdrop-filter: blur(12px); /* Frosted glass effect */
  -webkit-backdrop-filter: blur(12px);
  color: #2b2b2b;
  border-color: rgba(0, 0, 0, 0.08); /* Subtle dividers */
  text-align: center;
  padding: 1rem 1.25rem;
  font-family: 'Playfair Display', Georgia, serif; /* Keeps typography elegant */
  transition: all 0.3s ease;
}

/* Hover state */
.custom-art-list .list-group-item:hover {
  background: rgba(255, 255, 255, 0.85);
  color: #000;
  padding-left: 1.75rem; /* Slight slide effect on hover */
}

.poetryDiv {
    position: relative;
    width: 100%;
    background-image: url("images/promocija5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

.poetryWorksDiv {
    min-height: 110vh;
    width: "100%";
    background-image: url("images/parodijajeseni.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/** BLOG **/

.blog-container {
    max-width: 900px;
    margin: 100px auto;
    padding: 20px;
}


.blog-card {
    padding: 50px 20px;
    border-bottom: 1px solid #b5bda8;
}


.blog-card h2 {
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #1d2b20;
    font-family: "Playfair Display";
}


.blog-date {
    font-size: 14px;
    color: #777;
    margin-bottom: 30px;
    margin-right: 0;
     margin-left: 0;
}


.blog-text {
    font-size: 20px;
    line-height: 1.8;
    max-width: 700px;
    font-family: "Montserrat";
}


.read-more {
    display: inline-block;
    margin-top: 25px;
    color: #354f3b;
    text-decoration: none;
    font-weight: 600;
}


.read-more:hover {
    text-decoration: underline;
}

.post-container {

    width: 90%;
    margin: auto;
    padding: 20px;

}


#post-title {

    font-size: 52px;
    text-align: center;
    line-height: 1.2;
    font-family: "Playfair Display";
    margin-top: 5%;

}


.post-date {

    text-align:center;
    color:#777;
    margin:30px;
    font-size: 1rem;

}


.post-content {

    font-size:1.5rem;
    line-height:1.9;

}


.post-content p {

    margin-bottom:35px;

}

/* Styling for Sanity Portable Text content inside #post-body */
/* ==========================
   BLOG POST STYLING
========================== */

.post-container {
    max-width: 900px;
    margin: 80px auto;
    padding: 0 25px;
}


/* Main title */
.post-container h1 {
    font-family: "Playfair Display", serif;
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.2;
    color: #222;
    margin-bottom: 15px;
}


/* Date */
.post-date {
    font-family: "Montserrat", sans-serif;
    text-align: center;
    font-size: 0.95rem;
    color: #777;
    margin-bottom: 60px;
}



/* Article content */
.portable-text {
    font-family: "Montserrat", sans-serif;
    font-size: 1.15rem;
    line-height: 1.9;
    color: #333;
    overflow-wrap: anywhere;
}


/* Paragraph spacing */
.portable-text p {
    margin-bottom: 25px;
    margin-left: 0 !important;
}


/* Headers inside blog */
.portable-text h1,
.portable-text h2,
.portable-text h3 {
    font-family: "Playfair Display", serif;
    color: #222;
    margin-top: 50px;
    margin-bottom: 20px;
    font-weight: 600;
}

.post-image {
    width: 100%;
    max-width: 850px;
    height: auto;
    margin: 40px auto;
    display: block;
    object-fit: cover;
}



.portable-text h1 {
    font-size: 2.5rem;
}

.portable-text h2 {
    font-size: 2rem;
}

.portable-text h3 {
    font-size: 1.5rem;
}


/* Bold text */
.portable-text strong {
    font-weight: 700;
}


/* Italic text */
.portable-text em {
    font-style: italic;
}

.portable-text h4,
.portable-text h5,
.portable-text h6 {
    font-family: "Playfair Display", serif;
    color: #222;
    margin-top: 40px;
    margin-bottom: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.portable-text h4 {
    font-size: 1.3rem !important;
}

.portable-text h5 {
    font-size: 1.15rem !important;
}

.portable-text h6 {
    font-size: 1rem !important;
    letter-spacing: 0.08em;
}


/* Quotes */
.portable-text blockquote {
    border-left: 4px solid #333;
    padding-left: 25px;
    margin: 35px 0;
    font-family: "Playfair Display", serif;
    font-size: 1.4rem;
    font-style: italic;
    color: #555;
}


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

    .RaPi {
    background-position: center center;
}

    .post-container {
        margin-top: 40px;
    }

    .post-container h1 {
        font-size: 2.2rem;
    }

    #misao {
        font-size: 1.7rem !important;
    }

    .portable-text {
        font-size: 1rem;
    }



}

@media (min-width: 768px) and (max-width: 992px) {
     .RaSl {
        background-position: center center;
    }
    .RaSl {
        background-position: center center;
    }

}

@media (min-width: 992px) and (max-width: 1110px) {
    .nav-link {font-size: 1.1rem;
    }
}

@media (min-width: 992px) {

    .RaSl {
        background-position: center center;
    }

    .heroH1{
        margin-right: 10%;
    }
    .nav-size {
        height: 8rem;
    }

    p {
        font-size: 1.7rem;
        margin-right: 3%;
    }

    .aboutH1 {
        font-size: 3rem;
    }

    .aboutIMG {
        height: 400px;
        float: left;
        margin-right: 5%;
        margin-bottom: 2%;
        margin-left: 15%
        
    }

    .post-container {

    width: 80%;
    margin: auto;
    padding: 20px;
}



}
@media (min-width: 1270px) { 

    .topDivHero {
        height: 100vh;
    }

    .post-container {

    width: 75%;
    margin: auto;
    padding: 20px;

}


    .topDivHeroGhost {
        height: 100vh
    }

        .heroH1 {
            margin-top: 10%;
            font-size: 5rem;
        }
        .aboutIMG {
            height: 600px;
        }

        .carouselIMG {
            max-height: 65vh;
            width: auto;
        }

        .carouselH1 {
            padding-top: 5%;
        }

        .promoH1 {
            padding-top: 5%;
            font-size: 4rem;
        }

        .promoH2 {
            padding-top: 1%;
            font-size: 3rem;
        }

        .promoP {
            padding-top: 2%;
            padding-bottom: 3%;
        }

        .iframe {
            width: 80vh;
            height: 40vh;
        }

        .footerP {
            font-size: 1.5rem;
        }

        p {
        font-size: 1.8rem;
        margin-right: 3%;
    }

    .poetryP {
        font-size: 1.7rem;
    }

    .footer {
    width: 100%;
    background-image: url("images/footerIMG.jpg");
    background-size: cover;
}

.footerH3 {
    position: relative;
    z-index: 2;
    font-family: "Montserrat";
    font-weight: 900;
}

.footerP {
    font-size: 1rem;
    font-family: "Montserrat";
    font-weight: 500;
    padding-top: 2%;
}

.footerMFI {
    font-size: 1.2rem;
    font-family: "Montserrat";
    font-weight: 500
}

.footerMadeBy {
    font-size: 0.75rem;
    text-align: center;
    font-family: "Montserrat";
}

.footercon {
    width: 30%;
}
        }

/** ANIMATIONS **/

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keeps elements hidden initially */
.content-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out;
}

/* Added via JS when Sanity data is injected */
.content-visible {
    opacity: 1;
    visibility: visible;
}

/** reklame **/

/* Kontejner sekcije - drži 80% širine i ostale tvoje postavke */
.sponsors-section {
  width: 80%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 5%;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}

.my-4 {
    margin-bottom: 0;
}

/* Unutrašnji grid kontejner */
.sponsors-grid {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Link / kartica reklame */
.sponsor-card {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-decoration: none !important;
}

/* Sve slike unutar reklama po defaultu */
.sponsor-card img {
  border-radius: 4px;
  object-fit: contain;
  max-height: 200px;
}

/* --- KONTROLA PREKLOPA NA 900px --- */

/* 1. Ekran MANJI od 900px (Mobiteli i tableti) */
@media (max-width: 899px) {
  /* Skriva desktop sliku */
  .sponsor-card img.sponsor-desktop-img {
    display: none !important;
  }
  
  /* Prikazuje mobilnu sliku i fiksira je na 200px da ne bude ogromna */
  .sponsor-card img.sponsor-mobile-img {
    display: block !important;
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 2. Ekran VEĆI ili JEDNAK 900px (Desktop) */
@media (min-width: 900px) {
  /* Skriva mobilnu sliku */
  .sponsor-card img.sponsor-mobile-img {
    display: none !important;
  }

  /* Prikazuje desktop sliku s ograničenjem širine i visine */
  .sponsor-card img.sponsor-desktop-img {
    display: block !important;
    width: 100% !important;
    max-width: 650px !important;
    height: auto !important;
    max-height: 120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}