/*
=================================
Pixel Craft IT Solutions
Global Styling
=================================
*/


* {
    box-sizing:border-box;
}


html {
    scroll-behavior:smooth;
}


body {

    margin:0;

    background:var(--bg-color);

    color:var(--text-color);

    font-family:'Inter', Arial, sans-serif;

    transition:
    background .3s ease,
    color .3s ease;

}



a {

    text-decoration:none;

    color:inherit;

}



/*
========================
Navbar
========================
*/


.glass-navbar {

    background:var(--glass-background);

    backdrop-filter:blur(14px);

    border-bottom:1px solid var(--border-color);

}


.navbar-brand span {

    color:var(--text-color);

}


.nav-link {

    color:var(--text-secondary);

    font-weight:500;

    transition:.3s;

}


.nav-link:hover,
.nav-link.active {

    color:var(--primary-color);

}



/*
========================
Buttons
========================
*/


.btn-primary-custom {

    background:var(--primary-color);

    color:white;

    padding:12px 26px;

    border-radius:12px;

    font-weight:600;

    border:none;

    transition:.3s ease;

}


.btn-primary-custom:hover {

    background:var(--accent-color);

    color:white;

    transform:translateY(-2px);

}



.btn-outline-custom {

    border:1px solid var(--border-color);

    color:var(--text-color);

    padding:12px 26px;

    border-radius:12px;

}



/*
========================
Hero
========================
*/


.hero {

    min-height:90vh;

    display:flex;

    align-items:center;

}


.hero h1 {

    letter-spacing:-1px;

}



.hero-terminal {

    background:#020617;

    color:#10B981;

    padding:35px;

    border-radius:18px;

    font-family:monospace;

    font-size:1.3rem;

    min-height:180px;

}



.cursor {

    animation:blink 1s infinite;

}



@keyframes blink {

    50% {
        opacity:0;
    }

}



/*
========================
Common Cards
========================
*/


.card-custom {

    background:var(--card-color);

    border:1px solid var(--border-color);

    border-radius:16px;

    box-shadow:var(--shadow);

    transition:.3s ease;

}


.card-custom:hover {

    transform:translateY(-8px);

}



/*
========================
Sections
========================
*/


section {

    padding:80px 0;

}


.section-title {

    font-size:2.3rem;

    font-weight:700;

}


.text-muted-custom {

    color:var(--text-secondary);

}





/*
========================
Certification Images
========================
*/


.badge-card img {

    width:100%;

    max-width:120px;

}





/*
========================
Portfolio
========================
*/


.projects-page {

    padding:80px 0;

}



.page-title {

    font-size:3rem;

    font-weight:800;

    color:var(--text-color);

}



.page-subtitle {

    margin-top:15px;

    margin-bottom:50px;

    color:var(--text-secondary);

}



.projects-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

}



.project-card {

    background:var(--card-color);

    border:1px solid var(--border-color);

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s ease;

}



.project-card:hover {

    transform:translateY(-8px);

}



.project-image-wrapper {

    width:100%;

    height:260px;

    overflow:hidden;

    background:var(--bg-color);

}



.project-image {

    width:100%;

    height:100%;

    object-fit:cover;

}



.project-info {

    padding:25px;

}



.project-info h2 {

    font-size:1.35rem;

    font-weight:700;

    margin-bottom:15px;

}



.project-info p {

    color:var(--text-secondary);

    line-height:1.6;

}



.tech-tags span {

    display:inline-block;

    background:var(--border-color);

    padding:6px 12px;

    border-radius:20px;

    font-size:.75rem;

    margin-right:5px;

    margin-top:15px;

}



.project-link {

    display:inline-block;

    margin-top:20px;

    background:var(--primary-color);

    color:white;

    padding:10px 22px;

    border-radius:25px;

}


.project-link:hover {

    background:var(--accent-color);

    color:white;

}





/*
========================
Footer
========================
*/


.footer {

    background:var(--card-color);

    border-top:1px solid var(--border-color);

    padding:40px 0;

}





/*
========================
Responsive
========================
*/


@media(max-width:992px) {


    .projects-grid {

        grid-template-columns:repeat(2,1fr);

    }


}



@media(max-width:768px) {


    .hero {

        min-height:auto;

        padding-top:50px;

    }


    .hero h1 {

        font-size:2.2rem;

    }


}



@media(max-width:600px) {


    .projects-grid {

        grid-template-columns:1fr;

    }


}

/*
=====================================
Founder Section
=====================================
*/

.founder-section{

    padding:90px 0;

}

.founder-card{

    padding:60px;

    border-radius:24px;

}

.founder-photo{

    width:100%;

    max-width:320px;

    border-radius:24px;

    border:5px solid var(--border-color);

    box-shadow:0 25px 60px rgba(0,0,0,.18);

    transition:.35s;

}

.founder-photo:hover{

    transform:translateY(-8px);

}

.founder-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.founder-tags span{

    background:rgba(5,150,105,.12);

    color:var(--primary-color);

    padding:10px 18px;

    border-radius:999px;

    font-size:.9rem;

    font-weight:600;

    border:1px solid rgba(5,150,105,.18);

}

@media(max-width:992px){

.founder-card{

padding:35px;

}

.founder-photo{

max-width:260px;

}

}

/*
=====================================
Contact Page
=====================================
*/

.contact-card{

    height:100%;

}

.contact-item{

    display:flex;

    gap:18px;

    margin-bottom:28px;

    align-items:flex-start;

}

.contact-item i{

    width:52px;

    height:52px;

    border-radius:14px;

    background:rgba(5,150,105,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary-color);

    font-size:1.25rem;

    flex-shrink:0;

}

.contact-item h6{

    margin-bottom:6px;

    font-weight:700;

}

.contact-item p,
.contact-item a{

    color:var(--text-secondary);

}

.contact-item a:hover{

    color:var(--primary-color);

}

iframe{

    border:none;

    border-radius:16px;

}

.accordion{

    --bs-accordion-bg:var(--card-color);

    --bs-accordion-border-color:var(--border-color);

    --bs-accordion-color:var(--text-color);

    --bs-accordion-btn-bg:var(--card-color);

    --bs-accordion-active-bg:var(--card-color);

    --bs-accordion-active-color:var(--primary-color);

}

.accordion-button{

    font-weight:600;

}


.form-control,
.form-select{

    border-radius:14px;

    border:1px solid var(--border-color);

    background:var(--card-color);

    color:var(--text-color);

    padding:14px;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--primary-color);

    box-shadow:0 0 0 .2rem rgba(5,150,105,.15);

}

textarea{

    resize:vertical;

    min-height:180px;

}

.form-check-input:checked{

    background-color:var(--primary-color);

    border-color:var(--primary-color);

}

#successMessage{

    border-radius:14px;

}