@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body{font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 400; width: 100%;   cursor: default; background-color: white;}
a, button, input{outline: none;}

/* newprijects */
.literata {
  font-family: "Literata", serif;
}
.montserrat {
  font-family: "Montserrat", sans-serif;
}
   #modal-overlay {
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

.banner-gradient, .hover-gradient:hover{
transition: all 300ms ease-in-out;
  background: #F36E21;
  background: linear-gradient(90deg, rgba(243, 110, 33, 1) 0%, rgba(211, 84, 10, 1) 100%);}

.menu-active{
  color: #F36E21;
  font-weight: bold;
}
  /*------------------ homepage------------- */
    @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            display: flex;
            width: max-content;
            animation: marquee 20s linear infinite;
        }
        .animate-marquee > div {
            flex-shrink: 0;
        }

        /* Glassmorphism Effect */
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        }

        /* Entry Animation */
        .fade-in-up {
            animation: fadeInUp 1.2s ease-out forwards;
            opacity: 0;
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }


/*----------------------- IMAGE PAGE */

.custom-checkbox input:checked + .checkbox-box i{display:block}
.image-card, .video-card{cursor:grab}
.image-card:active, .video-card:active{cursor:grabbing}
.sortable-ghost{opacity:.4}
.sortable-chosen{transform:scale(.96)}
.sortable-drag{transform:rotate(2deg)}
.image-card:hover .trash-btn, .video-card:hover .trash-btn{opacity:1}
#sidebar{transition:transform .3s ease}
.custom-scroll::-webkit-scrollbar{width:4px}
.custom-scroll::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:10px}
@keyframes fadeInUp{
from{opacity:0;transform:translateY(15px)}
to{opacity:1;transform:translateY(0)}
}
.animate-reveal{animation:fadeInUp .5s ease forwards;opacity:0}


/* ----------------announcements-------------------------- */
 /* Custom Checkbox Styling to match image exactly */
        .announcements-checkbox {
            appearance: none;
            -webkit-appearance: none;
            height: 20px;
            width: 20px;
            background-color: #F3F3F3;
            border: 1px solid #000000;
            border-radius: 2px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            flex-shrink: 0;
        }

        .announcements-checkbox:checked::after {
            /* content: '✓'; */
            content: '\f00c'; /* Font Awesome check icon */
    font-family: "Font Awesome 6 Free";
            font-size: 14px;
            color: #000000;
            font-weight: 900;
        }

        /* Hover effect for the whole row */
        .announcement-row:hover {
            background-color: #f0f0f0;
        }
         .clone-checkbox {
            appearance: none;
            -webkit-appearance: none;
            height: 20px;
            width: 20px;
            /* background-color: #F3F3F3; */
            border: 1px solid #D3540A;
            border-radius: 2px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            flex-shrink: 0;
        }

        .clone-checkbox:checked::after {
            /* content: '✓'; */
            content: '\f00c'; /* Font Awesome check icon */
    font-family: "Font Awesome 6 Free";
            font-size: 14px;
            color: #D3540A;
            font-weight: 900;
        }