/* === Spinner === */
#spinner { opacity: 0; visibility: hidden; transition: opacity .8s ease-out, visibility 0s linear .5s; z-index: 99999; }
#spinner.show { transition: opacity .8s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; }

/* === General Styles === */
body { font-family: 'Inter', sans-serif; line-height: 1.6; }
h1,h2,h3,h4,h5,h6 { font-family: 'Saira', sans-serif; font-weight: 600; }
html { scroll-behavior: smooth; }

/* === Button === */
.btn { font-weight: 600; transition: all 0.3s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.btn-square,.btn-sm-square,.btn-md-square,.btn-lg-square { padding:0; display:flex; align-items:center; justify-content:center; font-weight:normal; }
.btn-square{width:38px;height:38px;} .btn-sm-square{width:32px;height:32px;} .btn-md-square{width:46px;height:46px;} .btn-lg-square{width:58px;height:58px;}
.back-to-top { position:fixed; right:30px; bottom:30px; width:50px; height:50px; z-index:99; }

/* === Topbar === */
.topbar .top-info { letter-spacing:1px; }
.topbar .top-link { display:flex; align-items:center; justify-content:center; }
.topbar .top-link a { margin-right:10px; }
#note { width:500px; overflow:hidden; }
#note small { position:relative; display:inline-block; animation:mymove 5s infinite linear; }
@keyframes mymove { from {left:-100%;} to {left:100%;} }

/* === Navbar === */
.navbar .navbar-nav {
    padding: 15px 0;
}

.navbar .navbar-nav .nav-link {
    padding: 10px;
    color: black; /* Set default link color to black */
    font-size: 18px;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover {
    color: var(--bs-danger); /* Color on hover */
}

.navbar .navbar-nav .nav-link.active {
    color: red; /* Active link color */
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

/* === Carousel === */
.carousel-item { position:relative; }
.carousel-item::after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); }
.carousel-caption { position:absolute; top:80%; left:50%; transform:translate(-50%, -80%); width:100%; text-align:center; z-index:10; padding:20px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }

.carousel-content a button { margin: 0 5px 10px 5px; }

/* === Services === */
.services-item { box-shadow: 0 0 60px rgba(0,0,0,0.2); border-radius: 10px; position:relative; padding:10px 0; }
.services-item:hover { transform:translateY(-5px); box-shadow:0 8px 25px rgba(0,0,0,0.1); transition:.3s; }

/* === Project === */
.project-img { position:relative; padding:15px; }
.project-content { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; opacity:0; transition:.5s; }
.project-item:hover .project-content { opacity:1; }

/* === Contact === */
.contact-form input, .contact-form textarea { font-size:1rem; }

/* === Footer === */
.footer .short-link a,.footer .help-link a,.footer .contact-link a { transition:.5s; }
.footer .short-link a:hover,.footer .help-link a:hover,.footer .contact-link a:hover { letter-spacing:1px; }

/* === Responsive adjustments === */
@media(max-width:992px){ .carousel-item,.carousel-item img{min-height:500px;object-fit:cover;} .carousel-item h1{font-size:40px!important;} .carousel-item p{font-size:16px!important;} }
@media(max-width:768px){ .carousel-item,.carousel-item img{min-height:400px;object-fit:cover;} .carousel-item h1{font-size:28px!important;} .carousel-item p{font-size:14px!important;} }
@media(max-width:576px){ .navbar-brand img{height:60px;transform:scale(1.2);} .carousel-caption{padding:20px;} .services-item{margin-bottom:1.5rem;} .footer .col-lg-3{margin-bottom:2rem;} h1{font-size:1.75rem;} h2{font-size:1.5rem;} h3{font-size:1.25rem;} h4{font-size:1.1rem;} h5{font-size:1rem;} h6{font-size:.9rem;} }