/* ==========================================================
   CodeCradle Solutions
   Main Website Sections
   Premium Production Version
========================================================== */


/* ===============================
   TRUST SECTION
================================ */


.trust-section{

    background:#ffffff;

    padding:50px 0;

}



.trust-grid{

    display:grid;

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

    gap:25px;

}



.trust-item{

    text-align:center;

    padding:25px;

}



.trust-item h3{

    color:var(--primary);

    font-size:35px;

    font-weight:800;

}



.trust-item p{

    margin:0;

}





/* ===============================
   SERVICE / COMMON CARDS
================================ */


.cards{

    display:grid;

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

    gap:30px;

}





.card{

    position:relative;

    overflow:hidden;

    padding:35px;

    border-radius:25px;

    background:

    linear-gradient(
        145deg,
        #ffffff,
        #fff8ea
    );


    border:1px solid rgba(232,178,76,.25);


    box-shadow:

    0 15px 40px rgba(11,45,92,.08);


    transition:

    transform .4s ease,
    box-shadow .4s ease;


}





.card:hover{

    transform:

    translateY(-12px);


    box-shadow:

    0 25px 60px rgba(11,45,92,.18);


}







.card::before{

    content:"";


    position:absolute;


    width:180px;


    height:180px;


    top:-80px;


    right:-80px;


    background:


    radial-gradient(

        circle,

        rgba(232,178,76,.35),

        transparent 70%

    );


    transition:.4s;


}





.card:hover::before{

    transform:scale(1.3);

}






.card::after{

    content:"";


    position:absolute;


    width:140px;


    height:140px;


    bottom:-70px;


    left:-70px;


    background:


    radial-gradient(

        circle,

        rgba(11,45,92,.15),

        transparent 70%

    );


}





.card>*{

    position:relative;

    z-index:2;

}





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


.cards .card:nth-child(1){

    background:

    linear-gradient(

        135deg,

        #fffdf8,

        #fff1cf

    );

}



.cards .card:nth-child(2){

    background:

    linear-gradient(

        135deg,

        #ffffff,

        #eaf3ff

    );

}




.cards .card:nth-child(3){

    background:

    linear-gradient(

        135deg,

        #fffdf8,

        #f7ebff

    );

}




.cards .card:nth-child(4){

    background:

    linear-gradient(

        135deg,

        #ffffff,

        #e8fff7

    );

}




.cards .card:nth-child(5){

    background:

    linear-gradient(

        135deg,

        #fffdf8,

        #ffecec

    );

}




.cards .card:nth-child(6){

    background:

    linear-gradient(

        135deg,

        #ffffff,

        #eef0ff

    );

}







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


.card-icon{


    width:70px;


    height:70px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:20px;


    background:


    linear-gradient(

        135deg,

        #0B2D5C,

        #E8B24C

    );


    color:white;


    font-size:28px;


    margin-bottom:25px;



    box-shadow:

    0 10px 25px rgba(11,45,92,.2);


}






.card h3{


    color:#0B2D5C;


    font-size:24px;


    margin-bottom:15px;


}





.card h5{


    color:#E8B24C;


    font-weight:600;


    margin-bottom:15px;


}





.card p{


    color:#475569;


}








/* ===============================
   TECHNOLOGY SECTION
================================ */


.tech-grid{


    display:grid;


    grid-template-columns:

    repeat(6,1fr);


    gap:20px;


}





.tech-item{


    background:white;


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


    padding:25px;


    text-align:center;


    border-radius:18px;


    font-weight:700;


    color:var(--primary);


    transition:.3s;


}





.tech-item:hover{


    transform:translateY(-6px);


    box-shadow:var(--shadow-md);


}
/* ===============================
   PROCESS SECTION
================================ */


.process-grid{

    display:grid;

    grid-template-columns:

    repeat(6,1fr);

    gap:20px;

}



.process-item{

    text-align:center;

}



.process-number{

    width:60px;

    height:60px;


    margin:auto;


    border-radius:50%;


    background:var(--gold);


    color:var(--primary-dark);


    display:flex;


    align-items:center;


    justify-content:center;


    font-weight:800;


    font-size:18px;


}





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


.contact-item{


    display:flex;


    align-items:flex-start;


    gap:15px;


    margin-top:25px;


}




.contact-item i{


    width:45px;


    height:45px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:

    rgba(232,178,76,.18);


    color:var(--primary);


}





.contact-item strong{


    color:var(--primary-dark);


}




.contact-item a{


    color:var(--text);


}





.contact-item a:hover{


    color:var(--gold);


}






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


form input,

form textarea{


    width:100%;


    padding:15px 18px;


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


    border-radius:15px;


    margin-bottom:15px;


    font-family:inherit;


    font-size:15px;


    outline:none;


}





form input:focus,

form textarea:focus{


    border-color:var(--gold);


    box-shadow:

    0 0 0 4px rgba(232,178,76,.15);


}





.form-message{


    margin-top:15px;


    font-weight:600;


}





.form-message.success{


    color:green;


}





.form-message.error{


    color:red;


}







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


.whatsapp-btn{


    position:fixed;


    right:25px;


    bottom:25px;


    width:60px;


    height:60px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:#25D366;


    color:white;


    font-size:28px;


    z-index:999;


    box-shadow:

    var(--shadow-md);


    transition:.3s;


}





.whatsapp-btn:hover{


    transform:translateY(-6px);


    color:white;


}







/* ===============================
   GOOGLE MAP
================================ */


.location-map{


    width:100%;


    height:400px;


    border:0;


    border-radius:20px;


}
/* =========================================
   DARK FORM TEXT
========================================= */

.contact-form-card {
    color: #111827;
}

.contact-form-header h3 {
    color: #111827;
}

.contact-form-header p {
    color: #374151;
    opacity: 1;
}

.contact-form-card input,
.contact-form-card textarea {
    color: #111827;
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
    color: #374151;
    opacity: 1;
}

.form-label {
    color: #2563eb;
}








/* ===============================
   NEWSLETTER
================================ */


.newsletter-form{


    display:flex;


    gap:15px;


    align-items:center;


}





.newsletter-input{


    flex:1;


    padding:15px 20px;


    border-radius:50px;


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


    outline:none;


    font-size:16px;


}





.newsletter-input:focus{


    border-color:var(--gold);


    box-shadow:

    0 0 0 4px rgba(232,178,76,.15);


}








/* ===============================
   DIGITAL MARKETING TEAM
================================ */


.feature-list{


    margin-top:20px;


    padding:0;


    list-style:none;


}





.feature-list li{


    display:flex;


    align-items:center;


    gap:10px;


    margin-bottom:12px;


    color:var(--muted);


    font-size:15px;


}





.feature-list i{


    color:var(--gold);


}
/* ===============================
   PROFILE IMAGE
================================ */


.profile-image{


    width:180px;


    height:180px;


    margin:25px auto;


    border-radius:50%;


    overflow:hidden;


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


    background:white;


    box-shadow:


    0 15px 35px rgba(11,45,92,.18);


}





.profile-image img{


    width:100%;


    height:100%;


    object-fit:cover;


    display:block;


}








/* ===============================
   PREMIUM TEAM CARD
================================ */


.card .profile-image + h3{


    text-align:center;


}





.card .profile-image + h3 + h5{


    text-align:center;


}





.card .profile-image + h3 + h5 + p{


    text-align:center;


}







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


@media(max-width:1100px){



.trust-grid{


    grid-template-columns:

    repeat(2,1fr);


}





.cards{


    grid-template-columns:

    repeat(2,1fr);


}





.tech-grid{


    grid-template-columns:

    repeat(3,1fr);


}





.process-grid{


    grid-template-columns:

    repeat(3,1fr);


}



}







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


@media(max-width:768px){



.trust-grid{


    grid-template-columns:1fr;


}





.cards{


    grid-template-columns:1fr;


}





.card{


    padding:28px;


}





.tech-grid{


    grid-template-columns:

    repeat(2,1fr);


}





.process-grid{


    grid-template-columns:

    repeat(2,1fr);


}





.location-map{


    height:300px;


}





.newsletter-form{


    flex-direction:column;


}





.newsletter-input{


    width:100%;


}




.profile-image{


    width:150px;


    height:150px;


}





}





/* ===============================
   SMALL MOBILE
================================ */


@media(max-width:576px){



.card{


    padding:25px;


}





.card h3{


    font-size:22px;


}





.card-icon{


    width:60px;


    height:60px;


    font-size:24px;


}





.tech-grid{


    grid-template-columns:1fr;


}





.process-grid{


    grid-template-columns:1fr;


}





.whatsapp-btn{


    width:55px;


    height:55px;


    right:18px;


    bottom:18px;


}





.profile-image{


    width:130px;


    height:130px;


}



}
/* =========================================
   CONTACT FORM HIGHLIGHT
========================================= */

.contact-form-card {
    position: relative;
    padding: 32px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}


/* FORM HEADER */

.contact-form-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
}

.contact-form-header .card-icon {
    flex-shrink: 0;
    margin: 0;
}


/* PROJECT ENQUIRY LABEL */

.form-label {
    display: inline-block;
    margin-bottom: 6px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #2563eb;
}


/* FORM TITLE */

.contact-form-header h3 {
    margin: 0 0 7px;
    font-size: 26px;
}


/* FORM DESCRIPTION */

.contact-form-header p {
    margin: 0;
    line-height: 1.6;
    opacity: 0.75;
}


/* FORM */

.contact-form-card form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* INPUTS */

.contact-form-card input,
.contact-form-card textarea {
    width: 100%;
    box-sizing: border-box;

    padding: 15px 17px;

    background: #ffffff;

    border: 1.5px solid #cbd5e1;
    border-radius: 10px;

    color: #172554;

    font-size: 14px;
    font-weight: 500;

    outline: none;

    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* PLACEHOLDER */

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
    color: #64748b;
    opacity: 1;
}


/* HOVER */

.contact-form-card input:hover,
.contact-form-card textarea:hover {
    border-color: #94a3b8;
}


/* INPUT FOCUS */

.contact-form-card input:focus,
.contact-form-card textarea:focus {
    background: #ffffff;

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.14),
        0 4px 12px rgba(37, 99, 235, 0.08);
}


/* MESSAGE */

.contact-form-card textarea {
    resize: vertical;
    min-height: 130px;
}


/* SUBMIT BUTTON */

.contact-form-card button {
    width: 100%;
    justify-content: center;

    margin-top: 4px;
    padding: 14px 20px;

    font-weight: 600;
}


/* FORM RESPONSE */

.contact-form-card .form-message {
    margin-top: 15px;
}


/* MOBILE */

@media (max-width: 600px) {

    .contact-form-card {
        padding: 22px;
    }

    .contact-form-header {
        gap: 12px;
    }

    .contact-form-header h3 {
        font-size: 22px;
    }

}