/* =========================
   GOOGLE FONT
========================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');



/* =========================
   ROOT COLORS
========================= */

:root {

    --primary-color: #051343;
    --secondary-color: #317af7;
    --accent-color: #394169;

    --white: #ffffff;
    --light-bg: #f6f8ff;
    --text-color: #555b75;
    --dark-text: #101426;

    --transition: all .3s ease;

}



/* =========================
   GLOBAL RESET
========================= */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;

}


html {

    overflow-x: hidden;

}


body {

    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    background: var(--white);
    overflow-x: hidden;

}


img {

    width: 100%;
    display: block;

}


a {

    text-decoration: none;
    color: inherit;

}


ul {

    list-style: none;

}


.container {

    width: 90%;
    max-width: 1200px;
    margin: auto;

}


.section {

    padding: 100px 0;

}



/* =========================
   COMMON TITLES
========================= */

.section-subtitle {

    color: var(--secondary-color);
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 15px;

}


.section-title {

    color: var(--primary-color);
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 20px;

}




/* =========================
   BUTTONS
========================= */


.btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 32px;

    background: var(--secondary-color);

    color: var(--white);

    border-radius: 50px;

    font-weight: 600;

    transition: var(--transition);

    border: none;

    cursor: pointer;

}


.btn:hover {

    background: var(--primary-color);

    transform: translateY(-4px);

}



.btn-outline {


    display: inline-flex;

    align-items: center;

    justify-content: center;


    padding: 13px 32px;


    border: 2px solid var(--secondary-color);


    color: var(--secondary-color);


    border-radius: 50px;


    font-weight: 600;


    transition: var(--transition);


}



.btn-outline:hover {

    background: var(--secondary-color);

    color: white;

    transform: translateY(-4px);

}



/* =========================
   HEADER / NAVBAR
========================= */


.header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 999;

    padding: 20px 0;

    background: rgba(255,255,255,0.85);

    backdrop-filter: blur(12px);

    transition: .3s;

}



.header .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.logo {


}



.logo span {

    color: var(--secondary-color);

}



.nav-links {

    display: flex;

    gap: 35px;

}



.nav-links li a {

    font-size: 15px;

    font-weight: 500;

    color: var(--primary-color);

    transition: var(--transition);

}



.nav-links li a:hover {

    color: var(--secondary-color);

}



.nav-btn {

    padding: 12px 25px;

}



.menu-btn {

    display: none;

    font-size: 25px;

    color: var(--primary-color);

    cursor: pointer;

}




/* =========================
   HERO SECTION
========================= */


.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding-top: 120px;

    background:

    radial-gradient(circle at top right,
    rgba(49,122,247,.15),
    transparent 40%),

    linear-gradient(
    135deg,
    #ffffff,
    #f3f6ff
    );

}



.hero-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

}



.hero-content {

    width: 55%;

}



.hero-content .subtitle {

    display: inline-block;

    color: var(--secondary-color);

    background: rgba(49,122,247,.1);

    padding: 8px 18px;

    border-radius: 30px;

    font-weight: 600;

    margin-bottom: 20px;

}



.hero-content h1 {

    font-size: 58px;

    line-height: 1.15;

    color: var(--primary-color);

    font-weight: 800;

    margin-bottom: 25px;

}



.hero-content p {

    font-size: 17px;

    line-height: 1.8;

    max-width: 600px;

    margin-bottom: 35px;

}



.hero-buttons {

    display: flex;

    gap: 20px;

}




.hero-image {

    width: 40%;

    position: relative;

}



.hero-image img {

    position: relative;

    z-index: 2;

    animation: floating 4s ease-in-out infinite;

}



.circle {

    position: absolute;

    width: 400px;

    height: 400px;

    background: linear-gradient(
        135deg,
        var(--secondary-color),
        var(--primary-color)
    );

    border-radius: 50%;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    opacity: .12;

}



@keyframes floating {


    0% {

        transform: translateY(0);

    }


    50% {

        transform: translateY(-20px);

    }


    100% {

        transform: translateY(0);

    }

}

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

.about {

    background: var(--white);

}



.about-container {

    display: flex;

    align-items: center;

    gap: 70px;

}



.about-image {

    width: 45%;

    position: relative;

}



.image-box {

    border-radius: 25px;

    overflow: hidden;

    box-shadow: 0 20px 50px rgba(5,19,67,.15);

}



.about-image img {

    height: 500px;

    object-fit: cover;

}



.about-content {

    width: 55%;

}



.about-content p {

    line-height: 1.8;

    margin-bottom: 18px;

    font-size: 16px;

}



.about-features {

    display: grid;

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

    gap: 18px;

    margin-top: 30px;

}



.feature {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--primary-color);

    font-weight: 500;

}



.feature i {

    color: var(--secondary-color);

    font-size: 20px;

}





/* =========================
   STATS SECTION
========================= */


.stats {

    /* background: var(--primary-color); */
    background: linear-gradient(
  190deg,
  rgba(5, 19, 67, 1) 0%,
  rgba(49, 122, 247, 1) 50%,
  rgba(57, 65, 105, 1) 100%
);

    padding: 70px 0;

}



.stats-container {

    display: grid;

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

    gap: 25px;

}



.stat-box {

    text-align: center;

    color: white;

}



.stat-box h2 {

    font-size: 45px;

    color: white !important;

    margin-bottom: 10px;

    font-weight: 700;

}



.stat-box p {

    font-size: 16px;

    color: rgba(255,255,255,.8);

}




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


.services {

    background: var(--light-bg);

}



.section-header {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 60px;

}



.section-header p {

    line-height: 1.8;

}



.services-grid {

    display: grid;

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

    gap: 30px;

}



.service-card {

    background: white;

    padding: 40px 30px;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 15px 40px rgba(5,19,67,.08);

    transition: var(--transition);

    position: relative;

    overflow: hidden;

}



.service-card::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 4px;

    background: var(--secondary-color);

    bottom: 0;

    left: -100%;

    transition: .4s;

}



.service-card:hover::before {

    left: 0;

}



.service-card:hover {

    transform: translateY(-12px);

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

}



.service-card i {

    width: 75px;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: rgba(49,122,247,.12);

    color: var(--secondary-color);

    font-size: 32px;

    transition: var(--transition);

}



.service-card:hover i {

    background: var(--secondary-color);

    color: white;

    transform: rotateY(180deg);

}



.service-card h3 {

    color: var(--primary-color);

    font-size: 22px;

    margin-bottom: 15px;

}



.service-card p {

    line-height: 1.7;

    font-size: 15px;

}

/* =========================
   PORTFOLIO SECTION
========================= */

.portfolio {

    background: var(--white);

}



.portfolio-grid {

    display: grid;

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

    gap: 30px;

}



.portfolio-card {

    position: relative;

    overflow: hidden;

    border-radius: 20px;

    height: 320px;

    cursor: pointer;

}



.portfolio-card img {

    height: 100%;

    width: 100%;

    object-fit: cover;

    transition: .5s;

}



.portfolio-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(5,19,67,.9),
        transparent
    );

}



.portfolio-content {

    position: absolute;

    bottom: 30px;

    left: 30px;

    z-index: 2;

    color: white;

}



.portfolio-content span {

    color: #8db7ff;

    font-size: 14px;

    font-weight: 500;

}



.portfolio-content h3 {

    font-size: 24px;

    margin-top: 8px;

}



.portfolio-card:hover img {

    transform: scale(1.12);

}






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


.contact {

    background: var(--light-bg);

}



.contact-container {

    display: flex;

    align-items: center;

    gap: 60px;

}



.contact-info {

    width: 50%;

}



.contact-info p {

    line-height: 1.8;

    margin-bottom: 30px;

}



.contact-box {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 25px;

}



.contact-box i {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--secondary-color);

    color: white;

    border-radius: 50%;

    font-size: 20px;

}



.contact-box h4 {

    color: var(--primary-color);

    margin-bottom: 5px;

}



.contact-form {

    width: 50%;

    background: white;

    padding: 40px;

    border-radius: 25px;

    box-shadow: 0 20px 50px rgba(5,19,67,.1);

}



.contact-form input,

.contact-form textarea {

    width: 100%;

    padding: 15px 20px;

    margin-bottom: 20px;

    border: 1px solid #e1e5f0;

    border-radius: 12px;

    outline: none;

    font-family: inherit;

    font-size: 15px;

    transition: .3s;

}



.contact-form input:focus,

.contact-form textarea:focus {
    border-color: var(--secondary-color);
}
.contact-form textarea {
    resize: none;
}
/* =========================
   FOOTER
========================= */

footer {
    background: linear-gradient(
    135deg,
    rgba(5, 19, 67, 1) 0%,
    rgba(49, 122, 247, 1) 50%,
    rgba(57, 65, 105, 1) 100%
    );
    color: white;
    padding-top: 70px;
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 50px;
}

.footer-about h2 {
    font-size: 28px;
    margin-bottom: 20px;
}
.footer-about h2 span {
    color: var(--secondary-color);
}
.footer-about p {
    color: rgba(255,255,255,.75);
    line-height: 1.8;
}

footer h3 {
    font-size: 20px;
    margin-bottom: 25px;
}
.footer-links li,
.footer-services li {
    margin-bottom: 12px;
    color: rgba(255,255,255,.75);
}
.footer-links a {
    transition: .3s;
}
.footer-links a:hover {
    color: var(--secondary-color);
}

.social-icons {
    display: flex;
    gap: 15px;
}
.social-icons a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    transition: .3s;
}



.social-icons a:hover {
    background: var(--secondary-color);
    transform: translateY(-5px);
}



.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.15);
    padding: 25px 0;
    text-align: center;
}



.footer-bottom p {
    color: rgba(255,255,255,.7);
    font-size: 14px;
}

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


/* TABLET DEVICES */

@media (max-width: 992px) {


    .section {

        padding: 80px 0;

    }


    .nav-links {

        position: fixed;

        top: 80px;

        left: -100%;

        width: 100%;

        height: calc(100vh - 80px);

        background: white;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 30px;

        transition: .4s;

    }


    .nav-links.active {

        left: 0;

    }



    .nav-btn {

        display: none;

    }


    .menu-btn {

        display: block;

    }



    .hero-container {

        flex-direction: column;

        text-align: center;

    }


    .hero-content {

        width: 100%;

    }


    .hero-content h1 {

        font-size: 45px;

    }


    .hero-content p {

        margin: auto auto 30px;

    }


    .hero-buttons {

        justify-content: center;

    }


    .hero-image {

        width: 70%;

        margin-top: 40px;

    }



    .about-container {

        flex-direction: column;

    }


    .about-image,

    .about-content {

        width: 100%;

    }


    .about-image img {

        height: 400px;

    }



    .stats-container {

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

    }



    .services-grid {

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

    }



    .portfolio-grid {

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

    }



    .contact-container {

        flex-direction: column;

    }


    .contact-info,

    .contact-form {

        width: 100%;

    }



    .footer-container {

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

    }


}




/* MOBILE DEVICES */


@media (max-width: 600px) {


    .container {

        width: 92%;

    }



    .section-title {

        font-size: 32px;

    }



    .logo {

        font-size: 22px;

    }



    .hero {

        padding-top: 100px;

    }



    .hero-content h1 {

        font-size: 34px;

    }



    .hero-content p {

        font-size: 15px;

    }



    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }



    .hero-buttons .btn,

    .hero-buttons .btn-outline {

        width: 100%;

    }



    .hero-image {

        width: 90%;

    }



    .circle {

        width: 280px;

        height: 280px;

    }




    .about-features {

        grid-template-columns: 1fr;

    }



    .about-image img {

        height: 300px;

    }




    .stats-container {

        grid-template-columns: 1fr;

    }



    .stat-box h2 {

        font-size: 38px;

    }




    .services-grid {

        grid-template-columns: 1fr;

    }



    .service-card {

        padding: 35px 25px;

    }




    .portfolio-grid {

        grid-template-columns: 1fr;

    }



    .portfolio-card {

        height: 280px;

    }




    .contact-form {

        padding: 25px;

    }



    .footer-container {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .social-icons {

        justify-content: center;

    }



}



/* SMALL MOBILE */

@media (max-width: 380px) {


    .hero-content h1 {

        font-size: 30px;

    }


    .section-title {

        font-size: 28px;

    }


}