body {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #2b2b2b;
    font-weight: 300;
    line-height: 26px;
    letter-spacing: 0.5px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #FFFFFF;
    overflow-x: hidden;
}

body ::selection {
    background-color: #27B9F2;
    color: #001603;
}

#navbar-content {
    height: 7.6rem;
    transition: all 0.3s ease-in-out;
}

#navbar-logo {
    height: 6.1rem;
    transition: all 0.3s ease-in-out;
}

@media (min-width: 768px) {
    #navbar-content {
        height: 9.6rem;
    }

    #navbar-logo {
        height: 7.6rem;
    }
}

.navbar-scrolled #navbar-content {
    height: 4.5rem;
}

.navbar-scrolled #navbar-logo {
    height: 3.25rem;
}

.navbar-scrolled #desktop-menu {
    padding-top: 0 !important;
    align-self: center !important;
}




/*  */
/* ==========================================================================
   CF7 FORM - PERFECT GRID, FONTS, COLORS & CSS ARROW
   ========================================================================== */

/* 1. Global Font Family Fix */
.wpcf7-form,
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea,
.wpcf7-form label,
.wpcf7-form input[type="submit"] {
    font-family: inherit !important;
}

/* 2. Text & Placeholder Colors */
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
    color: #374151 !important; 
    font-weight: 400 !important; 
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: #D8DBE0 !important;
    opacity: 1 !important; 
    font-weight: 400 !important; 
}

/* 3. Base Form Layout (Default 100% for Modal) */
.wpcf7-form {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px; 
}

.wpcf7-form > p {
    display: contents; 
}

.wpcf7-form label {
    display: block;
    width: 100%; /* Modal ke liye default 100% */
    padding: 0 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    font-size: 14px !important; 
    font-weight: 600 !important; 
    color: #374151 !important; 
    text-transform: none !important; 
    letter-spacing: normal !important;
}

.wpcf7-form label br {
    display: none; 
}

/* 4. ONLY Contact Us Page pe 2-Column (Left-Right) Layout */
@media (min-width: 768px) {
    .contact-two-column .wpcf7-form label {
        width: 50%; 
    }
    .contact-two-column .wpcf7-form label:has(textarea) {
        width: 100%; 
    }
}

/* 5. Input Fields & Select Boxes */
.wpcf7-form input:not([type="submit"]),
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    background-color: #f9fafb; 
    border: 1px solid #e5e7eb; 
    border-radius: 12px; 
    padding: 12px 16px;
    font-size: 14px;
    transition: all 0.3s ease;
    margin-top: 6px; 
}

.wpcf7-form input:not([type="submit"]):focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: #27B9F2; 
    background-color: #ffffff;
    box-shadow: 0 0 0 1px #27B9F2;
}

.wpcf7-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}

.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* 6. Submit Button with PURE CSS SVG ARROW */
.wpcf7-form input[type="submit"] {
    /* Arrow SVG aur Gradient Color dono background image se laye gaye hain */
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M7 17L17 7M7 7h10v10'%3E%3C/path%3E%3C/svg%3E"),
        linear-gradient(to right, #3E96E4, #0891b2, #0FC26A);
    background-repeat: no-repeat, no-repeat;
    background-position: right 24px center, center; /* Arrow right se 24px par hai */
    background-size: 16px, 100%; /* Arrow ka size 16px */
    
    color: #ffffff !important;
    font-weight: 700;
    padding: 14px 48px 14px 24px; /* Right padding zyada di hai arrow ke liye */
    border-radius: 12px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.1em;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px 10px 20px 10px;
    width: calc(100% - 20px);
    text-align: center;
}

@media (min-width: 640px) {
    .wpcf7-form input[type="submit"] {
        width: auto;
        min-width: 220px;
    }
}

/* Submit Button Hover: Arrow Top-Right Animate Hoga */
.wpcf7-form input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(8, 145, 178, 0.5);
    /* Hover pe Arrow ko Right (20px) aur Top (center - 4px) move kiya */
    background-position: right 20px calc(50% - 4px), center; 
}

/* Loader & Error Output */
.wpcf7-spinner {
    margin: 20px 10px !important;
    align-self: flex-start;
}

.wpcf7-response-output {
    width: calc(100% - 20px);
    margin: 0 10px !important;
    border-radius: 12px !important;
}
/*  */