/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/*
 *= require_tree .
 *= require_self
 */

@import "bootstrap/bootstrap";
@import "bootstrap/bootstrap.min";
@import "bootstrap";
@import "style";
@import "lib/animate/animate";
@import "lib/owlcarousel/assets/owl.carousel.min";

/* Project Images Perfect Sizing */
.project-item img {
    width: 100%;
    height: 250px !important;
    object-fit: cover !important;
    transition: transform 0.3s ease;
}

.project-item:hover img {
    transform: scale(1.05);
}


/* About Section Images */
.about-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
}

/* Carousel Images Specific Styling */
/*.header-carousel img {
    width: 100%;
    height: 650px !important;
    object-fit: cover !important;
    border-radius: 10px;
}*/

/* Ensure all images maintain aspect ratio */
img.img-fluid {
    max-width: 100%;
    height: auto;
}
.owl-dot {
    background-origin: padding-box;
}

.header-carousel .owl-dots .owl-dot {
    position: relative;
    display: inline-block;
    margin: 5px 0;
    width: 15px;
    height: 15px;
    border: 2px solid var(--bs-white);
    transition: .5s;
}

.testimonial-carousel .owl-dots .owl-dot {
    border: 2px solid #198754;
}

/* Frontend icons color */
.react-icon { color: #61DAFB; } /* React */
.vue-icon { color: #4FC08D; } /* Vue */
.angular-icon { color: #DD0031; } /* Angular */
.html5-icon { color: #E34F26; } /* HTML5 */
.sass-icon { color: #C69B7B; } /* Sass */
.tailwind-icon { color: #38B2AC; } /* Tailwind CSS */
.bootstrap-icon { color: #563D7C; } /* Bootstrap */
.javascript-icon { color: #F7DF1E; } /* JavaScript */
.typescript-icon { color: #3178C6; } /* TypeScript */

/* Backend icons color */
.nodejs-icon { color: #68A063; } /* Node.js */
.python-icon { color: #306998; } /* Python */
.java-icon { color: #007396; } /* Java */
.php-icon { color: #8993BE; } /* PHP */
.ruby-icon { color: #D91449; } /* Ruby */
.sql-icon { color: #4479A1; } /* SQL */
.mongo-icon { color: #47A248; } /* MongoDB */
.graphql-icon { color: #E10098; } /* GraphQL */
.rest-icon { color: #6D4C41; } /* REST API */

/* Hover effect for icons */
.tech-icon {
    transition: all 0.2s;
}

.tech-icon:hover {
    background-color: #e7f1ff;
    transform: translateX(5px);
}

/* Card hover effect */
.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 0.5rem 2rem rgba(0,0,0,.15);
}

/* Mobile app development icons */
.react-icon { color: #61DAFB; } /* React Native */
.flutter-icon { color: #02569B; } /* Flutter */
.pwa-icon { color: #4A90E2; } /* Progressive Web Apps */
.ios-icon { color: #000000; } /* iOS (Swift) */
.android-icon { color: #3DDC84; } /* Android (Kotlin) */

/* Hover effect for icons */
.tech-icon {
    transition: all 0.2s;
}

.tech-icon:hover {
    background-color: #e7f1ff;
    transform: translateX(5px);
}

/* Card hover effect */
.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 0.5rem 2rem rgba(0,0,0,.15);
}