@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


.dropdown {
    display: inline-block;
    position: relative; /* Essential for positioning the dropdown content correctly */
}

/* Dropdown Content (Hidden by default) */
.dropdown-content {
    /*display: none;*/
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    list-style-type: none;
    padding: 0;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0s linear 0.3s; /* delay hiding */
}

.dropdown-content li a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size:14px;
}

a.newlink {
    display:inline-block;
}

.dropdown-content li a:hover {
    background-color: #ddd;
}

 /*Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    /*display: block;*/
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: 
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0s;
} 

/* Keep dropdown visible when toggled via JS (useful for mobile/touch) */
.dropdown.open .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}


.formemail:hover{
    opacity:.80;
}

form button:hover{
    opacity:.8;
}

textarea #message {field-sizing: fixed;font-family: 'Roboto', sans-serif;}
#contactForm label {margin-top:10px;}

:root{
    --bg:#0f0f10;
    --card:#0f1113;
    --muted:#f6eaeb;
    --red:#87323c;
    --lred:#b84b58;
    --gray:#d3d0cb;
    --glass: rgba(255,255,255,0.03);
    --max-width:1100px;
}

*{box-sizing:border-box}
html,body{height:100%;}

.bckred {/*background-color:#87323c;*/background-image: linear-gradient(135deg, var(--red), var(--lred));}

body{
    /*background-color:#87323c;*/
    margin:0;
    font-family:"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:var(--gray);
    color:#e7eef0;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.4;
}

[role="region"][aria-label="Announcement"] {
/*position: sticky;*/
top: 0;
z-index: 60;
background: var(--oat);
border-bottom: 1px solid var(--bg);
padding: 10px 0;
/*max-width:1100px;
text-align:center;*/
font-family:'Montserrat', sans-serif;
color:var(--bg);
display:block;
}

.announce {overflow-x:hidden;}

.announce-inner {
width: min(1100px, calc(100% - 48px));
/*margin: 0 auto;*/
/*display: flex;*/
gap: 12px;
align-items: center;
/*padding: 10px 0;*/
animation: scroll 40s linear infinite;
display: flex;
width: max-content;
}

.announce-inner:hover {
animation-play-state: paused;
}

.announce-link {
margin-left: auto;
/*font-size: 14px;*/
color: var(--bg);
text-decoration: underline;

padding:8px 12px;
border-radius:8px;
font-weight:bold;

}

.announce-link:hover {
opacity: .8;

}

.announce-pill {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
padding: 8px 16px;
border-radius: 999px;
background: var(--red);
color: #fff;
margin-right:5px;
margin-left:45px;
font-weight:bold;
}

.dropdown-content li a .announce-pill {
margin-left:10px;
margin-bottom:40px;
font-size:8px;
padding:6px 12px;
}

/* SCROLLING TICKER

.ticker {
  overflow: hidden;
  background: black;
  color: white;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: scroll 20s linear infinite;
}

.ticker-track span {
  padding-right: 2rem;
}*/

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.site-top{
    position:sticky;
    z-index:50;
    top:45px;
    margin:0px auto;
    padding:30px;
    /*background-color:#87323c;*/
    max-width: 1500px;
}

.site-bottom{
    max-width:var(--max-width);
    margin:40px auto;
    padding:0px 24px 24px;
    background-color:var(--gray);
}

#navbar {
  /*background-color: #333; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: 0px; /* Hide the navbar 50px outside of the top view */
  width: inherit; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
  z-index: 1030; /* Ensure it stays on top of other content */

  display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:32px;

    margin: 0px auto;
    padding: 30px;
    max-width: 1500px;
}

/* End scrollnavbar */

header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:32px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
}
.logo{
    width:56px; height:56px;
    border-radius:8px;
    /*background:linear-gradient(135deg,var(--accent),#87323c 120%);*/
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:20px; color:#fff; font-family:'Montserrat', sans-serif;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.brand h1{font-size:18px; margin:0; font-weight:700; letter-spacing:0.6px}
.brand p{margin:0;  font-size:12px}

/* Added Code*/

.nav-link, .cta {
    display: inline-block;
    margin: 0 10px;
}

.bigimg-nbrc {max-width:400px;}
.bigimg-sa {max-width:500px;}




nav{display:flex; gap:12px; align-items:center;justify-content: space-between;}
.nav-link, .nav li a{
        text-decoration:none; color:#fff; padding:8px 12px; border-radius:8px;
    font-weight:600; font-size:14px;
}
.nav-link:hover{color:white; border:1px solid #d0d8da;margin:0px 9px;padding-top:8px;cursor:pointer;}

.cta{
    /*background-color:var(--muted);*/
    color:#040404; border:0; padding:10px 14px; border-radius:8px; font-weight:700;
    text-decoration:none;
    background-color:#e7eef0;
}

.cta:hover{background-color:#d0d8da;}

.navcta {font-size:14px;padding:8px 12px;}

/* Hero */
.hero{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:28px;
    align-items:start;
    margin-bottom:30px;
    /*background-color:#87323c; nulled for gradient background in container*/
}
.hero-left{max-width:900px;padding:24px; /*background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);*/ border-radius:12px}
.eyebrow{ font-weight:600; font-size:13px; letter-spacing:1px; margin-bottom:12px}
.title{font-family:'Montserrat', sans-serif; font-weight:800; font-size:44px; margin:0 0 12px}
.subtitle{ margin:0 0 18px}
.links{display:flex; gap:12px; margin-top:8px}
.btn-ghost{background-color:#e7eef0;border:1px solid rgba(255,255,255,0.06); color:var(--bg); padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:600}
.btn-ghost:hover{background-color:#d0d8da}


.socialbtn i {font-weight:bolder;font-size:16px;}

/* Hero right preview */

/* New carousel styles */

.preview .carousel{ position:relative; display:flex; align-items:center; justify-content:center; overflow:visible; }
.preview .carousel-img{ width:100%; height:320px; object-fit:cover;/*max-width:100%; height:auto;*/ display:block; transition:opacity .45s ease; opacity:1; }
.preview .carousel-img.fading{ opacity:0; }
.carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); color:#fff; border:none; width:40px; height:40px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; padding:0; }
.carousel-btn.prev{ left:-50px; }
.carousel-btn.next{ right:-50px; }
.carousel-btn:focus{ outline:2px solid var(--accent); }
.carousel-caption{ margin-top:10px; color:#fff; font-size:13px; }

.preview{
    background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
    padding:18px; border-radius:12px; display:flex; flex-direction:column; gap:12px;
    align-items:center; justify-content:center;
}
.preview img{width:80%; height:320px; object-fit:cover; border-radius:10px; display:block; box-shadow: 0 10px 30px rgba(0,0,0,0.6)}
.preview p{color:#fff; font-size:13px; margin:0}



/* Portfolio grid */
.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-bottom:42px;
}

        .workh3 {margin:0; font-family:Montserrat, sans-serif; font-weight:800;font-size:30px;color:var(--bg);}
        #work .work-subtitle {color:var(--bg); margin:0}

      /* @keyframes slide-in {
    from { opacity: 1; transform: translateY(5px) scale(0.88); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
      .scroll-element {
  animation: slide-in backwards; 
  animation-duration: .2ms; 
  animation-timeline: view();
}*/

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .55s ease, transform .55s ease;
}

/* NOT WORKING ^^^^*/

.card{
    background:var(--gray);
    border-radius:12px;
    border:1px solid var(--bg);
    overflow:hidden;
    position:relative;
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 6px 12px rgba(0,0,0,0.6);
}
.card:hover{transform:translateY(-8px); box-shadow: 0 24px 48px rgba(0,0,0,0.6);}
.card img{width:100%; height:220px; object-fit:cover; background-position:top center; display:block}
.card .meta{padding:14px;text-decoration:none; color:inherit;}
.card .tag{font-size:12px; color:var(--bg); margin-bottom:6px; display:inline-block}
.card h3{margin:0; font-size:18px; font-weight:900;color:var(--bg);}

/* right and left Panel styling*/

.panel{
    background-image: linear-gradient(95deg, #87323c, #b84b58);
    border:1px solid rgba(255,255,255,0.04);
    padding:36px;
    border-radius:12px;
    box-shadow: 0 6px 30px rgba(2,6,23,0.6);
}

.h2paragraphs {margin-bottom:5px;font-family:'Montserrat', sans-serif;}

/* About + contact */
.split{
    display:grid;
    grid-template-columns:1fr 350px;
    gap:180px;
    margin:30px 30px;
    padding:30px 20px;
    max-width:1500px;
}

.about {
    font-size:125%;
}

#about-heading {font-family:'Montserrat', sans-serif; font-weight:800;}

.contact{margin-right:40px;}

.about h4{font-size:30px;margin-bottom:20px;}
.contact h4{font-size:30px;margin-bottom:20px;}



.aboutcontactcontainer{
    max-width:1500px;
    margin:0px auto;
    background-image: linear-gradient(135deg, var(--red), var(--lred));
    border-radius:30px;
}

.about, .contact{
    /*background-color:var(--red);*/
    border-radius:12px;
    padding:20px 0px;
}
.about p{color:var(--muted); margin:0 0 12px}
.contact label{display:block; font-size:13px; margin-bottom:6px}
.contact input, .contact textarea{color:var(--bg); width:100%; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); /*background:transparent;*/}
.contact button{margin-top:10px; background:var(--accent); border:0; padding:10px 14px; border-radius:8px; font-weight:700}

footer{margin-top:10px;font-size:13px; text-align:center; padding:36px 0;/*background-color:var(--red);*/}

/* Modal */
.modal{
    position:fixed; inset:0; display:none; align-items:center; justify-content:center;
    background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.85));
    z-index:60;
}
.modal.open{display:flex}
.modal-content{
    width:min(1100px,96%); max-height:86vh; overflow:auto; background:#071013; border-radius:12px; padding:20px; box-shadow:0 30px 60px rgba(0,0,0,0.7)
}
.modal img{width:100%; height:auto; border-radius:8px}
.modal .close{position:absolute; right:22px; top:18px; background:transparent; border:0; color:var(--muted); font-size:18px}

.testimonial-title {margin-top:0px;}
.testimonials-chunk {margin-top:40px;}
.testimonials-chunk p {font-weight:bold;}

@media (max-width:980px){
    .hero{grid-template-columns:1fr; }
    .split{grid-template-columns:1fr;gap:0px;}
    .grid{grid-template-columns:repeat(2,1fr)}
    .site-top{margin:0px auto; padding-bottom:0px;/*padding:30px 16px 16px 16px; OVERRULED BY BELOW */}
    .site-bottom{margin:0px; padding:0px;}
    #work, .about, .contact {margin:10px 20px 20px;}
    main.container{padding:18px;}
    .work-subtitle {display:none;}
    .panel {padding:20px;}
}
@media (max-width:560px){
    .grid{grid-template-columns:1fr}
    .brand h1{font-size:15px}
    .title{font-size:32px}
    
    .split{margin:30px 15px;padding:20px 0px;}

}

@media (max-width:1610px){
    .aboutcontactcontainer{
        margin:0px 20px;
    }
}

/* MOBILE NAV */

@media (max-width: 768px) { /* iPad and smaller devices */

.testimonials-chunk{margin-top:20px;}

    section.left {overflow-x: wrap;} 
.workh3{margin-top:15px;}
.announce {font-size:85%;}
footer {padding-bottom:36px;}
/*.announce-text{margin-right:20px;}*/

    .hamburger {
        display: block; /* Show the hamburger button */
        cursor: pointer;
        font-size: 34px;
        background: none;
        border: none;
        color: inherit;
    }

    /* Make the nav row span full width so the dropdown/menu can appear below it */
    nav {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end; /* keep hamburger aligned right while allowing brand to sit left */
    }

    /* Position the menu as an absolute panel under the nav row */
    .nav-menu {
        display: none;
        position: absolute;
        left: -20px;
        right: 0;
        top: calc(100% + 8px);
        flex-direction: column;
        width: 110px;
        background-color: var(--bg);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        border-radius: 8px;
        z-index: 9998;
        padding: 8px 0;
    }

    .nav-menu.active {
        display: flex; /* Show the menu when the 'active' class is added */
    }

.nav-menu a {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    margin-bottom:10px;
}

/* Make dropdown expand inline on mobile */
.dropdown { width: 100%; }
.dropdown .nav-link { width: 100%; display: block; text-align: left; padding-left: 16px; }
/* On mobile, show dropdown as a floating panel under the hamburger */
.dropdown .dropdown-content {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 180px;
    background: var(--bg);
    color: var(--muted);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 8px;
    padding: 8px 0;
    z-index: 9999;
    transform: translateY(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    display: none;
}
.dropdown.open .dropdown-content { display: block; visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; }
.dropdown-content li a { color: #fff; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); }

.left, .right {
        max-width:100vw;
       }
       .right {display:flex; flex-direction:column; justify-content:space-between; align-items:center;}
       .right img {max-width:200px;}

}


@media (max-width: 480px) { /* iPhone and smaller devices */
.nav-menu a {
font-size: 14px;
}
}

/*@media (min-width:1215px) {
    .bckred, .mainc- {display:flex;justify-content: center;}
}*/