/* RESET */
/* ================= GLOBAL ================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

/* ================= HERO ================= */
.hero{
    position:relative;
    width:100%;
    min-height:100vh;
    background: var(--gradient-dark);
    overflow:hidden;
    display:flex;
    align-items:center;
}

/* PARTICLES */
#particles{
    position:absolute;
    inset:0;
    z-index:1;
}

/* SOFT GLOW */
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.05), transparent 60%);
    z-index:1;
}

/* EXTRA LEFT GLOW */
.hero::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:500px;
    height:500px;
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
    z-index:1;
}

/* CONTAINER */
.hero-container{
    position:relative;
    z-index:2;
    width:90%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
}

/* ================= IMAGE ================= */
.hero-img{
    flex:1.2;
}

.hero-img img{
    width:520px;
    max-width:100%;

    /* REMOVE BOX LOOK */
    border-radius:0;
    box-shadow:none;

    /* BLEND EFFECT */
    mix-blend-mode: lighten;
    opacity:0.95;

    transition:0.4s ease;
}

/* ================= CONTENT ================= */
.hero-content{
    flex:1;
    max-width:550px;
    color: var(--text-light);
}

.hero-content h1{
    font-size:56px;
    font-weight:700;
    line-height:1.3;
}

.hero-content span{
    color: var(--primary);
    font-size:58px;
}

.hero-content p{
    margin:22px 0;
    color: var(--primary-ultra-light);
    font-size:16px;
}

/* ================= BUTTONS ================= */
.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

/* BASE BUTTON */
.btn{
    position:relative;
    padding:12px 30px;
    border-radius:30px;
    text-decoration:none;
    font-weight:500;
    overflow:hidden;
    z-index:1;
    transition:0.3s;
}

/* PRIMARY */
.btn.primary{
    background: var(--primary);
    color: var(--text-light);
}

.btn.primary::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background: var(--primary-dark);
    transition:0.4s;
    z-index:-1;
}

.btn.primary:hover::before{
    left:0;
}

/* SECONDARY */
.btn.secondary{
    border:2px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.btn.secondary::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background: var(--primary);
    transition:0.4s;
    z-index:-1;
}

.btn.secondary:hover{
    color: var(--text-light);
}

.btn.secondary:hover::before{
    left:0;
}

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

/* TABLET */
@media(max-width:1024px){

    .hero-container{
        gap:50px;
    }

    .hero-content h1{
        font-size:44px;
    }

    .hero-img img{
        width:420px;
    }
}

/* MOBILE */
@media(max-width:900px){

    .hero-container{
        flex-direction:column-reverse;
        text-align:center;
    }

    .hero-content{
        max-width:100%;
    }

    .hero-content h1{
        font-size:34px;
    }

    .hero-img img{
        width:300px;

        /* FIX BLEND ISSUE ON MOBILE */
        mix-blend-mode: normal;
    }

    .hero-buttons{
        justify-content:center;
    }
}

/* SMALL MOBILE */
@media(max-width:600px){

    .hero{
        padding:99px 0;
    }

    .hero-content h1{
        font-size:28px;
    }

    .hero-content p{
        font-size:14px;
    }

    .hero-img img{
        width:250px;
    }

    .btn{
        padding:10px 22px;
        font-size:14px;
    }
}

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

.about{
    padding:120px 0;
    background: linear-gradient(180deg, #f8fbff, #eef3f9);
}

/* CONTAINER */
.about-container{
    width:90%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
}

/* ================= CONTENT ================= */

.about-content{
    flex:1;
    max-width:600px;
}

.about-content h2{
    font-size:44px;
    margin-bottom:20px;
    font-weight:700;
    color:#0f172a;
    letter-spacing:0.5px;
}

.about-content p{
    color:#64748b;
    margin-bottom:18px;
    line-height:1.8;
    font-size:15.5px;
}

/* LIST STYLE */
.about-content ul{
    margin-top:15px;
    padding-left:0;
}

.about-content ul li{
    list-style:none;
    margin-bottom:10px;
    font-size:15px;
    color:#334155;
    display:flex;
    align-items:center;
    gap:8px;
}

/* ================= BUTTON ================= */

.about-btn{
    position:relative;
    display:inline-block;
    margin-top:25px;
    padding:13px 32px;
    border-radius:40px;
    text-decoration:none;
    color:#fff;
    background:linear-gradient(135deg,#2563eb,#1e40af);
    font-weight:500;
    letter-spacing:0.5px;
    overflow:hidden;
    z-index:1;
    transition:0.3s ease;
}

/* SLIDE EFFECT */
.about-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(135deg,#1e40af,#2563eb);
    transition:0.4s;
    z-index:-1;
}

.about-btn:hover::before{
    left:0;
}

/* HOVER EFFECT */
.about-btn:hover{
    transform:translateY(-3px);
}

/* ================= IMAGE ================= */

/* ================= IMAGE ================= */

.about-img{
    flex:1.2; /* slightly bigger than content */
    display:flex;
    justify-content:flex-end;
}

.about-img img{
    width:100%;
    max-width:650px;   /* INCREASED SIZE */
    border-radius:18px;

    /* PREMIUM SHADOW */
    box-shadow:0 20px 50px rgba(0,0,0,0.12);

    transition:0.4s ease;
}

/* IMAGE HOVER */
.about-img img:hover{
    transform:scale(1.06);
    box-shadow:0 25px 60px rgba(0,0,0,0.18);
}
/* ================= ANIMATION ================= */

.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:all 0.8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

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

/* LARGE TABLET */
@media(max-width:1024px){
    .about-container{
        gap:50px;
    }

    .about-content h2{
        font-size:36px;
    }
}

/* TABLET */
@media(max-width:900px){
    .about-container{
        flex-direction:column;
        text-align:center;
    }

    .about-img{
        justify-content:center;
    }

    .about-content{
        max-width:100%;
    }

    .about-content h2{
        font-size:32px;
    }
}

/* MOBILE */
@media(max-width:600px){

    .about{
        padding:80px 20px;
    }

    .about-container{
        gap:30px;
    }

    .about-content h2{
        font-size:26px;
    }

    .about-content p{
        font-size:14px;
    }

    .about-img img{
        max-width:100%;
    }
}
/* ================= SERVICES SECTION ================= */

.services{
    padding:120px 0;
    background: var(--bg-light);
}

/* HEADER */
.services-header{
    text-align:center;
    margin-bottom:70px;
}

.services-header h2{
    font-size:42px;
    color: var(--text-dark);
    font-weight:600;
}

.services-header p{
    color: var(--text-soft);
    margin-top:10px;
}

/* ================= GRID ================= */

.services-container{
    width:90%;
    margin:auto;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:35px;
}

/* ================= CARD ================= */

.service-card{
    position:relative;
    background: var(--bg-main);
    padding:45px 30px;
    border-radius: var(--radius);
    text-align:center;
    cursor:pointer;
    overflow:hidden;

    border:1px solid var(--primary-ultra-light);
    box-shadow: var(--shadow-light);

    transition:0.4s ease;
}

/* ================= SLIDING LIGHT EFFECT ================= */

.service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:120%;
    height:100%;

    background:var(--primary-dark);

    transform: skewX(-20deg);
    transition:0.6s ease;
    z-index:1;
}

.service-card:hover::before{
    left:120%;
    color: var(--white);
}

/* ================= SUBTLE BACKGROUND FILL ================= */

.service-card::after{
    content:"";
    position:absolute;
    inset:0;
    background: var(--gradient-main);
    opacity:0;
    transition:0.4s;
    z-index:0;
}

.service-card:hover::after{
    opacity:0.06;
}

/* KEEP CONTENT ABOVE */
.service-card *{
    position:relative;
    z-index:2;
}

/* ================= HOVER ================= */

.service-card:hover{
    transform: translateY(-10px);
    box-shadow: var(--shadow-medium);
}

/* ================= ICON ================= */

.icon i{
    font-size:42px;
    color: var(--primary);
    margin-bottom:15px;
    transition:0.4s;
}

.service-card:hover .icon i{
    transform: translateY(-5px) scale(1.1);
}

/* ================= TITLE ================= */

.service-card h3{
    font-size:22px;
    color: var(--text-dark);
    margin-bottom:10px;
    font-weight:600;
}

/* ================= TEXT ================= */

.service-card p{
    color: var(--text-soft);
    font-size:14px;
    line-height:1.6;
}

/* ================= LIST ================= */

.card-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.service-card ul{
    list-style:none;
    margin-top:15px;
}

.service-card ul li{
    font-size:13px;
    color: var(--text-soft);
    margin:5px 0;
    position:relative;
    padding-left:18px;
}

/* CHECK ICON */
.service-card ul li::before{
    content:"✔";
    position:absolute;
    left:0;
    color: var(--primary);
    font-size:12px;
}

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

/* TABLET */
@media(max-width:1024px){
    .services-container{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MOBILE */
@media(max-width:768px){
    .services{
        padding:80px 20px;
    }

    .services-header h2{
        font-size:30px;
    }

    .services-container{
        grid-template-columns:1fr;
        gap:25px;
    }
}
/* ================= FEATURES SECTION ================= */

.features{
    padding:100px 20px;
    background: var(--bg-light);
}

/* HEADER */
.features-header{
    text-align:center;
    margin-bottom:70px;
}

.features-header h2{
    font-size:40px;
    color: var(--text-dark);
    font-weight:600;
}

.features-header p{
    color: var(--text-soft);
    margin-top:10px;
    font-size:15px;
}

/* ================= GRID ================= */

.features-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:30px;
}

/* ================= CARD ================= */

.feature-box{
    position:relative;
    border-radius: var(--radius);
    overflow:hidden;
    cursor:pointer;

    background: var(--bg-main);
    border:1px solid var(--primary-ultra-light);
    box-shadow: var(--shadow-light);

    transition:0.4s ease;

    isolation: isolate; /* FIX stacking issue */
}

/* IMAGE */
.feature-box img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:0.5s ease;
}

/* CONTENT */
.feature-content{
    padding:20px;
}

.feature-content h3{
    color: var(--text-dark);
    margin-bottom:10px;
    font-size:20px;
}

.feature-content p{
    color: var(--text-soft);
    font-size:14px;
    line-height:1.6;
}

/* ================= SLIDING LIGHT EFFECT ================= */

.feature-box::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:120%;
    height:100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(30,144,255,0.15),
        rgba(30,144,255,0.25),
        transparent
    );

    transform: skewX(-20deg);
    transition:0.6s ease;
    z-index:1;
}

.feature-box:hover::before{
    left:120%;
}

/* ================= SUBTLE OVERLAY ================= */

.feature-box::after{
    content:"";
    position:absolute;
    inset:0;
    background: var(--gradient-main);
    opacity:0;
    transition:0.4s;
    z-index:0;
}

.feature-box:hover::after{
    opacity:0.05; /* subtle effect */
}

/* KEEP CONTENT ABOVE */
.feature-box *{
    position:relative;
    z-index:2;
}

/* ================= HOVER ================= */

.feature-box:hover{
    transform: translateY(-10px);
    box-shadow: var(--shadow-medium);
}

/* IMAGE ZOOM */
.feature-box:hover img{
    transform: scale(1.06);
}

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

/* TABLET */
@media (max-width:1024px){
    .features-container{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MOBILE */
@media (max-width:768px){

    .features{
        padding:80px 20px;
    }

    .features-header h2{
        font-size:30px;
    }

    .features-container{
        grid-template-columns:1fr;
        gap:25px;
    }

    .feature-box img{
        height:180px;
    }
}

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

.stats{
    padding:120px 20px;
    background: var(--gradient-dark);
}

/* WRAPPER */
.stats-wrapper{
    width:90%;
    margin:auto;
    display:flex;
    align-items:center;
    gap:60px;
}

/* ================= IMAGE ================= */

.stats-image{
    flex:1;
}

.stats-image img{
    width:100%;
    max-width:420px;
    border-radius: var(--radius);
    opacity:0.9;
}

/* ================= CONTENT ================= */

.stats-container{
    flex:2;
    display:flex;
    justify-content:space-between;
    gap:30px;
    text-align:center;
}

/* ================= STAT BOX ================= */

.stat-box{
    flex:1;
    padding:30px;
    border-radius: var(--radius);

    background: rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.15);

    color: var(--text-light);
    transition:0.4s;
}

/* HOVER */
.stat-box:hover{
    transform: translateY(-10px);
    box-shadow: var(--shadow-medium);
}

/* ================= PROGRESS CIRCLE ================= */

.progress-circle{
    position:relative;
    width:110px;
    height:110px;
    margin:0 auto 15px;
    border-radius:50%;

    background: conic-gradient(
        var(--primary) 0deg,
        rgba(255,255,255,0.1) 0deg
    );

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

/* INNER CIRCLE */
.progress-circle::before{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    background: var(--primary-dark);
    border-radius:50%;
}

/* VALUE TEXT */
.progress-value{
    position:relative;
    font-size:20px;
    font-weight:600;
    color: var(--primary);
}

/* ================= TITLE ================= */

.stat-box h3{
    font-size:16px;
    margin-top:10px;
    color: var(--primary-ultra-light);
}

/* ================= ANIMATION ================= */

.reveal{
    opacity:0;
    transform:translateY(50px);
    transition:all 0.8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

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

/* TABLET */
@media(max-width:992px){

    .stats-wrapper{
        flex-direction:column;
        text-align:center;
    }

    .stats-container{
        flex-direction:column;
        gap:25px;
    }

    .progress-circle{
        width:100px;
        height:100px;
    }

    .progress-circle::before{
        width:70px;
        height:70px;
    }
}

/* MOBILE */
@media(max-width:600px){

    .stats{
        padding:80px 15px;
    }

    .stat-box{
        padding:20px;
    }

    .progress-circle{
        width:85px;
        height:85px;
    }

    .progress-circle::before{
        width:60px;
        height:60px;
    }

    .progress-value{
        font-size:16px;
    }
}
/* ================= PORTFOLIO ================= */

.portfolio{
    padding:100px 20px;
    background: var(--bg-light);
    text-align:center;
}

/* HEADER */
.portfolio-header h2{
    font-size:38px;
    color: var(--text-dark);
}

.portfolio-header p{
    color: var(--text-soft);
    margin-bottom:30px;
}

/* ================= FILTER FIX ================= */

.portfolio-filters{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:50px;
}

/* BUTTON */
.portfolio-filters button{
    position:relative;
    padding:10px 24px;
    border-radius:30px;
    border:none;
    background: transparent;
    color: var(--text-dark);
    cursor:pointer;
    font-weight:500;
    transition:0.3s;
    overflow:hidden;
}

/* BORDER STYLE */
.portfolio-filters button{
    border:1px solid var(--primary-ultra-light);
}

/* ACTIVE BUTTON */
.portfolio-filters button.active{
    background: var(--primary);
    color: var(--text-light);
    border-color: var(--primary);
}

/* HOVER EFFECT */
.portfolio-filters button:hover{
    color: var(--primary);
}

/* SMOOTH SLIDE EFFECT */
.portfolio-filters button::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background: var(--primary);
    transition:0.4s;
    z-index:-1;
}

.portfolio-filters button:hover::before{
    left:0;
}

.portfolio-filters button:hover{
    color: var(--text-light);
}

/* ================= GRID ================= */

.portfolio-container{
    width:90%;
    margin:auto;
    display:grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap:30px;
}

/* ================= CARD ================= */

.portfolio-item{
    background: var(--bg-main);
    border-radius: var(--radius);
    overflow:hidden;

    border:1px solid var(--primary-ultra-light);
    box-shadow: var(--shadow-light);

    transition:0.4s ease;
}

/* IMAGE */
.portfolio-item img{
    width:100%;
    height:220px;
    object-fit:contain;
    transition:0.4s ease;
}

/* CONTENT */
.portfolio-content{
    padding:20px;
    text-align:left;
}

.portfolio-content h3{
    font-size:20px;
    margin-bottom:8px;
    color: var(--text-dark);
}

.portfolio-content span{
    font-size:13px;
    color: var(--primary);
    display:block;
    margin-bottom:10px;
}

/* BUTTON */
.portfolio-content a{
    position:relative;
    text-decoration:none;
    padding:8px 16px;
    border-radius:20px;
    background: var(--primary);
    color: var(--text-light);
    overflow:hidden;
    display:inline-block;
    transition:0.3s;
}

/* BUTTON SLIDE */
.portfolio-content a::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background: var(--primary-dark);
    transition:0.4s;
    z-index:-1;
}

.portfolio-content a:hover::before{
    left:0;
}

/* ================= HOVER ================= */

.portfolio-item:hover{
    transform: translateY(-10px);
    box-shadow: var(--shadow-medium);
}

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

/* ================= FILTER ANIMATION ================= */

.portfolio-item{
    opacity:1;
    transform:scale(1) translateY(0);
}

.portfolio-item.hide{
    opacity:0;
    transform:scale(0.85) translateY(30px);
    pointer-events:none;
    transition:all 0.4s ease;
}

.portfolio-item.show{
    animation: fadeUp 0.5s ease forwards;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px) scale(0.9);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

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

/* TABLET */
@media(max-width:1024px){
    .portfolio-container{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MOBILE */
@media(max-width:768px){

    .portfolio{
        padding:80px 20px;
    }

    .portfolio-header h2{
        font-size:30px;
    }

    .portfolio-container{
        grid-template-columns:1fr;
        gap:25px;
    }
}
.portfolio-item.hide{
    display: none;
}
/* ================= TESTIMONIAL ================= */

.testimonials {
    position: relative;
    padding: 100px 20px;
    background: linear-gradient(135deg, #0c2d63, #081c3a);
    overflow: hidden;
}

/* BACKGROUND */
.testi-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    height: 100%;
    z-index: 1;
}

.testi-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.15;
}

/* CONTENT */
.testi-content {
    position: relative;
    z-index: 2;
    width: 90%;
    margin: auto;
}

/* HEADER */
.testi-header {
    text-align: center;
    margin-bottom: 50px;
}

.testi-header h2 {
    color: #fff;
    font-size: 38px;
}

.testi-header p {
    color: #cfd8ff;
}

/* ================= SLIDER ================= */

.testi-slider {
    overflow: hidden;
}

/* TRACK */
.testi-track {
    display: flex;
    gap: 25px;
    width: max-content;
}

/* CARD */
.testi-card {
    width: 300px;
    flex-shrink: 0;
    padding: 25px;
    border-radius: 20px;

    /* GLASS */
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.2);

    color: #fff;
    transition: 0.4s;
}

/* ICON */
.testi-card i {
    font-size: 26px;
    color: #1e90ff;
}

/* TEXT */
.testi-card p {
    margin: 15px 0;
    color: #e6ecff;
    font-size: 14px;
}

/* USER */
.user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.user h4 {
    font-size: 14px;
}

.user span {
    font-size: 12px;
    color: #cfd8ff;
}

/* HOVER */
.testi-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 50px rgba(30,144,255,0.3);
}

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

.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* DELAYS */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

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

@media(max-width: 900px){
    .testi-bg {
        width: 100%;
        opacity: 0.1;
    }

    .testi-card {
        width: 260px;
    }
}

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

.contact{
    padding:100px 20px;
    background: var(--white);
    
}

/* TITLE */
.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:36px;
    color: var(--text-dark);
}

/* ================= CONTAINER ================= */

.contact-container{
    width:90%;
    margin:auto;
    display:flex;
    gap:50px;
    align-items:flex-start;
   
    box-shadow: blanchedalmond;
    
}

/* ================= LEFT INFO ================= */

.info-wrap{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* INFO BOX */
.info-item{
    display:flex;
    align-items:center;
    gap:15px;

    padding:15px 20px;
    border-radius: var(--radius);

    background: var(--bg-main);
    border:1px solid var(--primary-ultra-light);

    box-shadow: 0 8px 25px rgba(30,144,255,0.08);

    transition:0.3s;
}

.info-item:hover{
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(30,144,255,0.15);
}

/* ICON */
.info-item i{
    font-size:22px;
    color: var(--primary);
}

/* TEXT */
.info-item h3{
    font-size:16px;
    color: var(--text-dark);
}

.info-item p{
    font-size:14px;
    color: var(--text-soft);
}

/* IMAGE */
.info-wrap img{
    width:100%;
    max-width:320px;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(30,144,255,0.1);
}

/* ================= FORM ================= */

.php-email-form{
    flex:2;
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ROW */
.form-row{
    display:flex;
    gap:20px;
}

/* INPUT + TEXTAREA */
.form-control{
    width:100%;
    padding:12px 15px;
    border-radius:12px;
    border:1px solid var(--primary-ultra-light);
    outline:none;
    font-size:14px;

    background: var(--bg-main);
    color: var(--text-dark);

    box-shadow: 0 4px 15px rgba(30,144,255,0.05);

    transition:0.3s;
}

/* FOCUS EFFECT */
.form-control:focus{
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(30,144,255,0.15);
}

/* TEXTAREA */
textarea.form-control{
    resize:none;
}

/* ERROR */
.error-message{
    font-size:12px;
    color: red;
}

/* ================= BUTTON ================= */

.output-button{
    margin-top:10px;
}

/* BUTTON STYLE */
.output-button button{
    position:relative;
    padding:12px 30px;
    border:none;
    border-radius:30px;
    background: var(--primary);
    color: var(--text-light);
    font-weight:500;
    cursor:pointer;
    overflow:hidden;
    transition:0.3s;

    box-shadow: 0 10px 25px rgba(30,144,255,0.25);
}

/* SLIDING EFFECT */
.output-button button::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background: var(--primary-dark);
    transition:0.4s;
    z-index:-1;
}

.output-button button:hover::before{
    left:0;
}

.output-button button:hover{
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(30,144,255,0.35);
}

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

/* LARGE TABLET */
@media(max-width:1024px){

    .contact-container{
        flex-direction:column;
        gap:40px;
    }

    .form-row{
        flex-direction:column;
    }

    .info-wrap{
        align-items:center;
        text-align:center;
    }
}

/* MOBILE */
@media(max-width:600px){

    .contact{
        padding:70px 15px;
    }

    .section-title h2{
        font-size:28px;
    }

    .info-wrap img{
        max-width:100%;
    }

    .form-control{
        font-size:13px;
    }

    .output-button button{
        width:100%;
        text-align:center;
    }
}