/* ==========================================================
   ABSTRACTS
========================================================== */

@import url("./abstracts/variables.css");
@import url("./abstracts/colors.css");
@import url("./abstracts/typography.css");
@import url("./abstracts/animations.css");

/* ==========================================================
   BASE
========================================================== */

@import url("./base/reset.css");
@import url("./base/base.css");
@import url("./base/utilities.css");

/* ==========================================================
   LAYOUT
========================================================== */

@import url("./layout/grid.css");
@import url("./layout/navigation.css");
@import url("./layout/hero.css");
@import url("./layout/footer.css");

/* ==========================================================
   COMPONENTS
========================================================== */

@import url("./components/buttons.css");
@import url("./components/cards.css");
@import url("./components/badges.css");
@import url("./components/forms.css");
@import url("./components/modal.css");
@import url("./components/timeline.css");

/* ==========================================================
   SECTIONS
========================================================== */

@import url("./sections/technologies.css");
@import url("./sections/services.css");
@import url("./sections/why-choose-us.css");
@import url("./sections/statistics.css");
@import url("./sections/projects.css");
@import url("./sections/about.css");
@import url("./sections/downloads.css");
@import url("./sections/contact.css");

/* ==========================================================
   THEMES
========================================================== */

@import url("./themes/light.css");
@import url("./themes/dark.css");

/* ==========================================================
   RESPONSIVE
========================================================== */

@import url("./responsive/mobile.css");
@import url("./responsive/tablet.css");
@import url("./responsive/desktop.css");


/* ==========================================================
   SERVICES
========================================================== */

.services{

    padding:120px 0;

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:70px;

}

.service-card{

    background:var(--card-color);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:40px;

    transition:.35s;

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(18px);

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}

.service-icon{

    width:80px;

    height:80px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

    margin-bottom:25px;

    background:linear-gradient(
        135deg,
        #FF9900,
        #ffb84d
    );

}

.service-card h3{

    margin-bottom:15px;

}

.service-card p{

    line-height:1.8;

    opacity:.8;

    margin-bottom:25px;

}

.service-link{

    color:#FF9900;

    font-weight:600;

    text-decoration:none;

}

.service-link:hover{

    letter-spacing:1px;

}

/* ==========================================================
   STATISTICS
========================================================== */

.statistics{

    padding:120px 0;

}

.statistics-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:30px;

}

.stat-card{

    text-align:center;

    padding:50px 30px;

    border-radius:24px;

    background:var(--card-color);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-8px);

}

.counter{

    font-size:3rem;

    font-weight:700;

    color:#FF9900;

    margin-bottom:15px;

}

.stat-card p{

    opacity:.8;

    font-size:1rem;

}

/* ==========================================================
   WHY CHOOSE US
========================================================== */

.why-choose-us{

    padding:120px 0;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:70px;

}

.why-card{

    padding:40px;

    border-radius:24px;

    background:var(--card-color);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-10px);

}

.why-icon{

    font-size:48px;

    margin-bottom:25px;

}

.why-card h3{

    margin-bottom:15px;

}

.why-card p{

    line-height:1.8;

    opacity:.8;

}

/* ==========================================================
   ABOUT
========================================================== */

.about{

    padding:120px 0;

}

.about-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-content h2{

    margin:20px 0;

}

.about-content>p{

    line-height:1.8;

    opacity:.85;

    margin-bottom:40px;

}

.about-details{

    display:grid;

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

    gap:25px;

}

.about-item{

    background:var(--card-color);

    padding:25px;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.08);

}

.about-item h4{

    color:#FF9900;

    margin-bottom:10px;

}

.about-image{

    text-align:center;

}

.about-image img{

    width:100%;

    max-width:500px;

}

@media(max-width:992px){

    .about-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .about-details{

        grid-template-columns:1fr;

    }

}


/* ==========================================================
   CONTACT
========================================================== */

.contact{

    padding:120px 0;

}

.contact-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;

}

.contact-details{

    margin-top:30px;

}

.contact-details p{

    margin-bottom:15px;

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:16px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.1);

    background:var(--card-color);

    color:inherit;

    font-size:1rem;

}

.contact-form textarea{

    resize:vertical;

}

@media(max-width:992px){

    .contact-container{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   FOOTER
========================================================== */

.footer{

    background:#0f172a;

    color:#ffffff;

    padding:80px 0 30px;

}

.footer-container{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

}

.footer-logo{

    width:180px;

    margin-bottom:20px;

}

.footer h3{

    margin-bottom:20px;

}

.footer a{

    display:block;

    color:#ffffff;

    text-decoration:none;

    margin-bottom:12px;

    transition:.3s;

}

.footer a:hover{

    color:#FF9900;

}

.footer-bottom{

    text-align:center;

    margin-top:60px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.1);

}

@media(max-width:992px){

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

}

/* ==========================================================
   SCROLL REVEAL
========================================================== */

.hidden{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   STICKY NAVBAR
========================================================== */

.navbar{

    position:sticky;

    top:0;

    z-index:1000;

    transition:all .35s ease;

}

.navbar-scrolled{

    padding:10px 0;

    background:rgba(15,23,42,.88);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:0 10px 35px rgba(0,0,0,.15);

}

/* ==========================================================
   TECHNOLOGY HOVER EFFECTS
========================================================== */

.technology-card{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    border:1px solid rgba(255,255,255,.08);

}

.technology-card img{

    width:72px;

    height:72px;

    transition:
        transform .35s ease;

}

.technology-card:hover{

    transform:translateY(-12px) scale(1.03);

    border-color:#FF9900;

    box-shadow:
        0 20px 45px rgba(255,153,0,.18);

}

.technology-card:hover img{

    transform:scale(1.15);

}

.technology-active{

    background:linear-gradient(
        180deg,
        rgba(255,153,0,.05),
        rgba(255,153,0,.01)
    );

}

/* ==========================================================
   PROJECT CARD ANIMATIONS
========================================================== */

.project-card{

    overflow:hidden;

    border-radius:20px;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.project-card img{

    transition:
        transform .5s ease;

}

.project-card:hover{

    transform:translateY(-12px);

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

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-card .btn-primary{

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

}

.project-card:hover .btn-primary{

    transform:translateY(-2px);

}

.project-active{

    border:1px solid rgba(255,153,0,.25);

}


/* ==========================================================
   HERO TYPING
========================================================== */

#typing-text{

    color:#FF9900;

    font-weight:700;

    min-height:40px;

}

#typing-text::after{

    content:"|";

    margin-left:3px;

    animation:cursorBlink .8s infinite;

}

@keyframes cursorBlink{

    0%,50%{

        opacity:1;

    }

    51%,100%{

        opacity:0;

    }

}
/* ==========================================================
   LOADING SCREEN
========================================================== */

#loader{

    position:fixed;

    inset:0;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:opacity .7s ease,
               visibility .7s ease;

}

.loader-content{

    text-align:center;

}

.loader-content img{

    width:220px;

    animation:logoFloat 2s ease-in-out infinite;

}

.loader-spinner{

    width:50px;

    height:50px;

    margin:35px auto 0;

    border:5px solid rgba(255,153,0,.2);

    border-top-color:#FF9900;

    border-radius:50%;

    animation:spin 1s linear infinite;

}

.loader-hidden{

    opacity:0;

    visibility:hidden;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

@keyframes logoFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/* ==========================================================
   BACK TO TOP
========================================================== */

#backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#FF9900;

    color:#ffffff;

    font-size:22px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:all .35s ease;

    z-index:999;

    box-shadow:0 12px 30px rgba(255,153,0,.35);

}

#backToTop:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(255,153,0,.45);

}

.show-back-to-top{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}@import "components/cta.css";