@media(max-width : 600px) {
  .text-anime-style-3 {
    font-size: 22px !important;
    font-weight: 700 !important;
  }
}

/**CLEAN PREMIUM IOS SECTION **/
.ios-clean-section {
    padding: 100px 140px;
    background: linear-gradient(135deg, #f9fbff, #eef2f7);
    font-family: "Poppins", sans-serif;
}

.ios-clean-container {
    max-width: 1250px;
    margin: auto;
}

/**Heading**/
.ios-clean-title {
    text-align: center;
    font-size: 34px;
    font-weight: 600;
    color: #0f0f0f;
    margin-bottom: 12px;
}

.ios-clean-subtitle {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 60px;
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/**Layout**/
.ios-clean-content {
    display: flex;
    gap: 50px;
    align-items: center;
}

.ios-clean-image img {
    width: 100%;
    border-radius: 20px;
    border: 1px solid #d9dde5;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/**Text Points Box**/
.ios-clean-text {
    flex: 1;
    background: #ffffffcc;
    backdrop-filter: blur(8px);
    padding: 35px 35px;
    border-radius: 18px;
    border: 1px solid #e1e5ec;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* Bullet Points */
.ios-point {
    padding: 12px 0 12px 20px;
    border-left: 3px solid #d0d6e4;
    margin-bottom: 18px;
    transition: 0.3s ease;
}

.ios-point:hover {
    border-left-color: #082e80;
    background: #f4f6fb;
    border-radius: 8px;
}

.ios-point p {
    margin: 0;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
}

/**RESPONSIVE**/

@media (max-width: 1024px) {
    .ios-clean-content {
        flex-direction: column;
        text-align: center;
    }

    .ios-point {
        padding-left: 15px;
        border-left-width: 2px;
    }
}

@media (max-width: 768px) {
    .ios-clean-title {
        font-size: 1.5rem;
    }

    .ios-clean-section {
        padding: 70px 30px;
    }
}

/*** service section ***/
.ios-services-section {
    background: #111;
    padding: 70px 12px 80px 12px;
    color: #fff;
    font-family: 'Poppins', Arial, sans-serif;
}

.ios-title {
    text-align: center;
    font-size: 2.05rem;
    font-weight: 700;
    margin-bottom: 45px;
    letter-spacing: 0.8px;
}

.ios-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.ios-service-card {
    background: #222;
    border-radius: 22px;
    box-shadow: 0 8px 44px rgba(0, 0, 0, 0.10);
    padding: 34px 28px 30px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.28s, box-shadow 0.28s;
    border: 1.6px solid rgba(255, 255, 255, 0.07);
    min-height: 300px;
    cursor: pointer;
    position: relative;
}

.ios-service-card:hover,
.ios-service-card:focus-within {
    transform: translateY(-7px) scale(1.025);
    box-shadow: 0 18px 60px rgba(60, 120, 255, 0.10), 0 4px 20px #0004;
}

.ios-card-icon {
    font-size: 2.35rem;
    margin-bottom: 28px;
    color: #fff;
    background: linear-gradient(135deg, #007aff 50%, #222 100%);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    margin-left: -6px;
    margin-bottom: 24px;
    box-shadow: 0 4px 18px rgba(0, 122, 255, 0.12);
}

.ios-service-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: #fff;
    letter-spacing: 0.4px;
}

.ios-service-card p {
    font-size: 1.05rem;
    color: #dedede;
    line-height: 1.55;
    margin: 0;
    margin-bottom: 0;
}

.hl {
    color: #ffe174;
    font-weight: 700;
}

@media (max-width: 900px) {
    .ios-title {
        font-size: 1.25rem;
    }

    .ios-services-grid {
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }

    .ios-service-card {
        min-height: 220px;
        padding: 23px 13px 17px 15px;
    }

    .ios-card-icon {
        font-size: 1.42rem;
        width: 50px;
        height: 50px;
        margin-bottom: 14px;
    }

    .ios-service-card h3 {
        font-size: 1.06rem;
    }

    .ios-service-card p {
        font-size: 0.97rem;
    }
}

@media (max-width: 600px) {
    .ios-title {
        font-size: 1.03rem;
    }

    .ios-services-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .ios-service-card {
        min-height: 120px;
        padding: 13px 7px 11px 9px;
    }

    .ios-service-card h3 {
        font-size: .99rem;
    }
}

/** benefits and feature **/
.ios-benefits-grid {
    background: linear-gradient(120deg, #f5f8ff 88%, #e9f3ff 100%);
    padding: 60px 20px 40px 20px;
}

.ios-benefits-header {
    max-width: 670px;
    margin: 0 auto 38px auto;
    text-align: center;
}

.ios-benefits-icon {
    display: block;
    font-size: 2.2rem;
    background: linear-gradient(135deg, #dde7fa 70%, #b3d4fc 100%);
    color: #2C2841;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: 0 auto 7px auto;
    box-shadow: 0 2px 12px #b3d4fc31;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ios-benefits-header h2 {
    font-size: 1.18rem;
    color: #183459;
    font-weight: 800;
    margin-bottom: 8px;
}

.ios-benefits-header p {
    color: #346ca1;
    font-size: .97rem;
    margin-bottom: 0;
}

.ios-benefits-row {
    display: flex;
    gap: 32px;
    justify-content: center;
    align-items: stretch;
    max-width: 1020px;
    margin: 0 auto 24px auto;
}

.ios-benefit-card {
    flex: 1 1 0%;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 7px 30px #3fc9ff12, 0 2px 8px #91b2ff22;
    padding: 31px 18px 21px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 210px;
    transition: box-shadow .20s, transform .16s;
}

.ios-benefit-card:hover {
    box-shadow: 0 18px 44px #81aeff26, 0 5px 24px #aac7ff13;
    transform: scale(1.04) translateY(-5px);
    border-top: 4px solid #257aff;
}

.ios-benefit-icon {
    font-size: 1.6rem;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    box-shadow: 0 2px 11px #aac7ff28;
}

/* Unique gradient icon bg for each */
.icon1 {
    background: linear-gradient(135deg, #b2e7fa, #79bffc);
    color: #007aff;
}

.icon2 {
    background: linear-gradient(135deg, #d3f8fd, #6fd6fc);
    color: #1786ae;
}

.icon3 {
    background: linear-gradient(135deg, #e6e7fb, #e9c6fd);
    color: #6c5edd;
}

.icon4 {
    background: linear-gradient(135deg, #e6f7fa, #dce1fd);
    color: #1676ba;
}

.icon5 {
    background: linear-gradient(135deg, #ffdbe9, #feddf3);
    color: #ff4081;
}

.icon6 {
    background: linear-gradient(135deg, #d7fbe8, #8fffa3);
    color: #00b16a;
}

.ios-benefit-card h3 {
    font-size: 1.06rem;
    font-weight: 700;
    color: #2a4276;
    margin-bottom: 6px;
    margin-top: 1px;
    text-align: center;
}

.ios-benefit-card p {
    font-size: 0.96rem;
    color: #4c6ba1;
    text-align: center;
    margin: 0;
    line-height: 1.45;
}

/* --- Responsive --- */
@media (max-width:900px) {
    .ios-benefits-row {
        gap: 15px;
        padding: 10px 10px 10px 10px;
    }

    .ios-benefit-card {
        padding: 17px 6px 8px 6px;
        min-height: 150px;
    }

    .ios-benefit-card h3 {
        font-size: 0.92rem;
    }

    .ios-benefit-card p {
        font-size: 0.87rem;
    }
}

@media (max-width:650px) {
    .ios-benefits-row {
        flex-direction: column;
        gap: 13px;
        margin-bottom: 16px;
    }

    .ios-benefit-card {
        min-height: unset;
    }
}

/** technologies and tools **/
.ios-icon-grid-section {
    background: linear-gradient(122deg, #181f35 90%, #25325d 100%);
    padding: 65px 20px 38px 20px;
}

.ios-icon-grid-header {
    max-width: 670px;
    margin: 0 auto 40px auto;
    text-align: center;
}

.ios-icon-grid-bigicon {
    display: block;
    font-size: 2.2rem;
    background: linear-gradient(135deg, #2e4771 70%, #40bffc 120%);
    color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: 0 auto 8px auto;
    box-shadow: 0 2px 16px #40bffc4b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ios-icon-grid-header h2 {
    font-size: 1.17rem;
    color: #dbeeff;
    font-weight: 800;
    margin-bottom: 7px;
}

.ios-icon-grid-header p {
    color: #84b8ec;
    font-size: .97rem;
    margin-bottom: 0;
}

.ios-icon-grid-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px 18px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 10px;
}

.ios-icon-grid-card {
    background: rgba(29, 44, 78, 0.94);
    border-radius: 14px;
    box-shadow: 0 7px 30px #42bafc29, 0 2px 8px #52caff21;
    padding: 28px 7px 14px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    opacity: 0;
    transform: translateY(32px) scale(.96);
    transition: opacity .65s, transform .65s;
    will-change: opacity, transform;
    border-top: 3px solid transparent;
    height: 100%;
}

.ios-icon-grid-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ios-icon-grid-card:hover {
    box-shadow: 0 17px 44px #42bafc49, 0 5px 24px #52caff34;
    transform: scale(1.05) translateY(-4px);
    border-top: 3px solid #40bffc;
}

.icon-grid-circle {
    font-size: 1.25rem;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
    box-shadow: 0 2px 11px #40bffc31;
    background: #244379;
    color: #fff;
}

.ic-swift {
    background: linear-gradient(135deg, #faad8d, #fd6a36);
}

.ic-objc {
    background: linear-gradient(135deg, #607d97 70%, #536d94 120%);
}

.ic-uikit {
    background: linear-gradient(135deg, #51e7e8 80%, #286fd4 100%);
}

.ic-swiftui {
    background: linear-gradient(135deg, #99efdb 80%, #23bbfa 100%);
}

.ic-firebase {
    background: linear-gradient(135deg, #fde468, #f58c14 100%);
}

.ic-xcode {
    background: linear-gradient(135deg, #3a4b6c 60%, #1ac2f5 100%);
}

.ic-testflight {
    background: linear-gradient(135deg, #9ad2ff 60%, #2851b6 100%);
}

.ic-appstore {
    background: linear-gradient(135deg, #95bcec 60%, #196ad6 100%);
}

.ic-crashlytics {
    background: linear-gradient(135deg, #ffa3a0, #f53b57 100%);
}

.ic-pay {
    background: linear-gradient(135deg, #222, #444 100%);
}

.ios-icon-grid-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #e5efff;
    margin-bottom: 7px;
    text-align: center;
    letter-spacing: 0.01em;
}

.ios-icon-grid-card p {
    font-size: .92rem;
    color: #8dc6f6;
    text-align: center;
    margin: 0;
    line-height: 1.46;
}

/* Responsive */
@media (max-width:1100px) {
    .ios-icon-grid-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:750px) {
    .ios-icon-grid-header {
        max-width: 98vw;
    }

    .ios-icon-grid-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width:500px) {
    .ios-icon-grid-header h2 {
        font-size: .96rem;
    }

    .ios-icon-grid-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ios-icon-grid-card {
        padding: 14px 5px 8px 5px;
    }

    .icon-grid-circle {
        font-size: .87rem;
        width: 50px;
        height: 50px;
    }
}

/** work process **/
.ios-process-timeline {
    background: linear-gradient(123deg, #f7fafc 94%, #eaf5ff 100%);
    padding: 62px 0 42px 0;
}

.ios-process-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 36px auto;
}

.ios-process-bigicon {
    display: block;
    font-size: 2.1rem;
    background: linear-gradient(135deg, #7ad2fe, #d4e9fa 100%);
    color: #2686c3;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: 0 auto 8px auto;
    box-shadow: 0 2px 16px #7ad2fe4b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ios-process-header h2 {
    font-size: 1.26rem;
    color: #156497;
    font-weight: 800;
    margin-bottom: 8px;
}

.ios-process-header p {
    color: #478bbe;
    font-size: .96rem;
    margin-bottom: 0;
}

.process-timeline-bar {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 14px;
}

.process-timeline-bar:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 13px;
    bottom: 13px;
    width: 6px;
    background: linear-gradient(180deg, #62d7ff 12%, #fbe8ef 100%);
    border-radius: 7px;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0.23;
}

.process-timeline-step {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(36px) scale(.96);
    transition: opacity .7s, transform .7s;
    will-change: opacity, transform;
}

.process-timeline-step .process-timeline-dot {
    position: relative;
    z-index: 2;
    min-width: 60px;
    min-height: 60px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 3px 18px #0d7aad;
    font-size: 1.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-right: 22px;
    background: #fff;
    border: 6px solid #b2e6fe;
}

.dot1 {
    background: linear-gradient(135deg, #bffaff, #7bcff0 100%);
    color: #188afc;
}

.dot2 {
    background: linear-gradient(135deg, #e7c6fd, #7b64f0 100%);
    color: #7537bd;
}

.dot3 {
    background: linear-gradient(135deg, #a7ffd9, #41e495 100%);
    color: #19cc90;
}

.dot4 {
    background: linear-gradient(135deg, #fff7a3, #ffd469 100%);
    color: #ffbf00;
}

.dot5 {
    background: linear-gradient(135deg, #bffaff, #59c4f3 100%);
    color: #179bd7;
}

.dot6 {
    background: linear-gradient(135deg, #ffd8f7, #ff96cb 100%);
    color: #cb5da0;
}

.process-timeline-step .process-timeline-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 28px #62d7ff15;
    padding: 20px 16px 13px 16px;
    min-width: 170px;
    width: 100%;
}

.process-timeline-card h3 {
    font-size: 1.03rem;
    font-weight: 700;
    color: #2373b7;
    margin-bottom: 6px;
    margin-top: 0;
}

.process-timeline-card p {
    font-size: .91rem;
    color: #478bbe;
    margin: 0;
    line-height: 1.37;
}

.process-timeline-step.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (max-width:650px) {
    .process-timeline-bar {
        max-width: 99vw;
    }

    .process-timeline-bar:before {
        left: 22px;
        width: 4px;
    }

    .process-timeline-step {
        margin-bottom: 30px;
    }

    .process-timeline-step .process-timeline-dot {
        min-width: 30px;
        min-height: 30px;
        width: 30px;
        height: 30px;
        font-size: 1.11rem;
        margin-right: 13px;
        border-width: 3px;
    }

    .process-timeline-step .process-timeline-card {
        padding: 12px 8px 7px 8px;
        min-width: 0;
    }

    .ios-process-header h2 {
        font-size: .99rem;
    }
}

/** client review **/
.ios-client-reviews {
    background: linear-gradient(120deg, #f7fafc 93%, #eaf5ff 100%);
    padding: 64px 0 40px 0;
}

.client-reviews-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 34px auto;
}

.reviews-icon {
    font-size: 2.2rem;
    background: linear-gradient(135deg, #93e6fc 70%, #d4edfd 102%);
    color: #2586c3;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: 0 auto 8px auto;
    box-shadow: 0 3px 17px #93e6fc4a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-reviews-header h2 {
    font-size: 1.28rem;
    color: #235c9f;
    font-weight: 800;
    margin-bottom: 6px;
}

.client-reviews-header p {
    color: #4c81b4;
    font-size: .99rem;
    margin-bottom: 0;
}

.client-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 28px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 14px;
}

.review-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 7px 28px #62d7ff15;
    padding: 29px 16px 21px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    opacity: 0;
    transform: translateY(36px) scale(.96);
    transition: opacity .75s cubic-bezier(.43, .59, .52, 1.15), transform .6s cubic-bezier(.4, .59, .59, 1.12);
    will-change: opacity, transform;
}

.review-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.review-card:hover {
    box-shadow: 0 18px 44px #62d7ff29;
    transform: scale(1.03) translateY(-4px);
}

.review-badge {
    font-size: 1.17rem;
    font-weight: bold;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 13px #62d7ff42;
    letter-spacing: 1.1px;
}

.badge1 {
    background: linear-gradient(135deg, #93e6fc, #188afc 100%);
}

.badge2 {
    background: linear-gradient(135deg, #e7c6fd, #7537bd 100%);
}

.badge3 {
    background: linear-gradient(135deg, #a7ffd9, #19cc90 100%);
}

.badge4 {
    background: linear-gradient(135deg, #fff7a3, #ffbf00 100%);
}

.badge5 {
    background: linear-gradient(135deg, #ffd8f7, #cb5da0 100%);
}

.badge6 {
    background: linear-gradient(135deg, #bffaff, #179bd7 100%);
}

.review-text {
    font-size: .99rem;
    color: #265c96;
    font-style: italic;
    text-align: center;
    margin-bottom: 13px;
}

.review-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.review-name {
    font-size: .99rem;
    color: #188afc;
    font-weight: 700;
}

.review-role {
    font-size: .87rem;
    color: #4c81b4;
}

/* Responsive */
@media (max-width:900px) {
    .client-reviews-grid {
        grid-template-columns: 1fr 1fr;
        gap: 17px 12px;
    }

    .review-card {
        padding: 16px 7px 8px 7px;
    }

    .review-badge {
        font-size: 0.82rem;
        width: 50px;
        height: 50px;
    }
}

@media (max-width:600px) {
    .client-reviews-header h2 {
        font-size: 1.03rem;
    }

    .client-reviews-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .review-card {
        min-width: 0;
        padding: 12px 5px 6px 5px;
    }
}

/** why choose kotech digital hub**/
.ios-whychoose-section {
    background: linear-gradient(122deg, #12182b 90%, #212947 100%);
    padding: 66px 0 40px 0;
}

.whychoose-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 38px auto;
}

.whychoose-icon {
    font-size: 2.1rem;
    background: linear-gradient(135deg, #202b44 70%, #42bafc 120%);
    color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: 0 auto 7px auto;
    box-shadow: 0 2px 19px #42bafc4b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whychoose-header h2 {
    font-size: 1.32rem;
    color: #ecf5ff;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.whychoose-header p {
    color: #7faedf;
    font-size: .97rem;
    margin-bottom: 0;
}

.whychoose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 38px 30px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 14px;
}

.whychoose-card {
    background: rgba(40, 52, 88, 0.98);
    border-radius: 15px;
    box-shadow: 0 7px 30px #42bafc11, 0 2px 8px #52caff10;
    padding: 32px 19px 18px 19px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 192px;
    opacity: 0;
    transform: translateY(36px) scale(.96);
    transition: opacity .75s cubic-bezier(.48, .65, .42, 1.11), transform .6s cubic-bezier(.4, .59, .59, 1.12);
    will-change: opacity, transform;
}

.whychoose-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.whychoose-card:hover {
    box-shadow: 0 18px 44px #42bafc24;
    transform: scale(1.05) translateY(-4px);
}

.whychoose-card-icon {
    font-size: 1.55rem;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 2px 13px #42bafc34;
}

.wc1 {
    background: linear-gradient(135deg, #93e6fc, #188afc 100%);
}

.wc2 {
    background: linear-gradient(135deg, #e7c6fd, #7b64f0 100%);
}

.wc3 {
    background: linear-gradient(135deg, #a7ffd9, #19cc90 100%);
}

.wc4 {
    background: linear-gradient(135deg, #fff7a3, #ffbf00 100%);
}

.wc5 {
    background: linear-gradient(135deg, #ffd8f7, #cb5da0 100%);
}

.wc6 {
    background: linear-gradient(135deg, #bffaff, #179bd7 100%);
}

.whychoose-card h3 {
    font-size: 1.09rem;
    font-weight: 700;
    color: #7ddaff;
    margin-bottom: 8px;
    text-align: center;
}

.whychoose-card p {
    font-size: .95rem;
    color: #c6e9ff;
    text-align: center;
    margin: 0;
    line-height: 1.45;
}

/* Responsive */
@media (max-width:970px) {
    .whychoose-grid {
        grid-template-columns: 1fr 1fr;
        gap: 17px 12px;
    }

    .whychoose-card {
        padding: 18px 7px 9px 7px;
        min-height: 130px;
    }

    .whychoose-card-icon {
        font-size: 1.15rem;
        width: 50px;
        height: 50px;
    }
}

@media (max-width:600px) {
    .whychoose-header h2 {
        font-size: 1.02rem;
    }

    .whychoose-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .whychoose-card {
        padding: 12px 4px 7px 4px;
    }
}

/** faq section **/
.ios-faq-section {
    background: linear-gradient(125deg, #12182b 92%, #212947 100%);
    padding: 62px 20px 42px 20px;
}

.ios-faq-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 32px auto;
}

.ios-faq-icon {
    font-size: 2.1rem;
    background: linear-gradient(135deg, #253a62, #39b7f7 100%);
    color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: 0 auto 8px auto;
    box-shadow: 0 2px 16px #39b7f783;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ios-faq-header h2 {
    font-size: 1.22rem;
    color: #dbeeff;
    font-weight: 800;
    margin-bottom: 8px;
}

.ios-faq-header p {
    color: #7faedf;
    font-size: .97rem;
    margin-bottom: 0;
}

.ios-faq-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px 45px;
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 12px;
}

.ios-faq-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq-item {
    background: rgba(40, 52, 88, 0.98);
    border-radius: 13px;
    /* box-shadow: 0 6px 23px #39b7f717; */
    padding: 13px 16px 7px 16px;
    transition: box-shadow .18s, border .17s;
}

.faq-q {
    background: none;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    padding: 0;
    margin: 0 0 6px 0;
    cursor: pointer;
    transition: color .18s;
}

.faq-q:after {
    content: '\f078';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .9em;
    float: right;
    color: #fafafa;
    margin-left: 8px;
    transition: transform .17s;
}

.faq-item.active .faq-q:after {
    transform: rotate(-180deg);
}

.faq-a {
    color: #fbfbfb;
    font-size: .95rem;
    margin: 0 0 2px 0;
    line-height: 1.42;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.42, .31, .66, 1.12), opacity .35s;
    opacity: 0;
}

.faq-item.active .faq-a {
    max-height: 320px;
    opacity: 1;
    margin-bottom: 7px;
}

/* 
.faq-item:hover {
    box-shadow: 0 12px 30px #39b7f732;
} */

.faq-item.active .faq-q {
    color: #ffffff;
}

@media (max-width:900px) {
    .ios-faq-columns {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .ios-faq-col {
        gap: 14px;
    }
}

@media (max-width:540px) {
    .ios-faq-header h2 {
        font-size: .97rem;
    }

    .faq-q {
        font-size: .91rem;
    }

    .faq-a {
        font-size: .87rem;
    }
}

/*** contact section ***/
/*** contact section ***/
.kotech-service-wrapper {
    position: relative;
    padding: 0;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    padding: 20px 20px 20px 20px;
}

.kotech-service-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #01274e 67%, #022f5e 100%);
    z-index: 0;
}

.kotech-service-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 68px 3vw 42px 4vw;
    display: flex;
    gap: 52px;
    z-index: 2;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.kotech-label {
    font-size: 0.93em;
    text-align: center;
    color: #2c81e9;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    background: #e5f0fc;
    border-radius: 70px;
    padding: 6px 20px;
    margin-bottom: 17px;
    display: inline-block;
}

.kotech-info-side {
    max-width: 480px;
    flex: 1 1 320px;
    background: #fff;
    border-radius: 27px;
    box-shadow: 0 7px 38px #2c81e91a;
    padding: 44px 32px 32px;
    z-index: 2;
}

.kotech-info-side h1 {
    font-size: 2em;
    font-weight: 800;
    margin-bottom: 13px;
    color: #27345d;
    /* line-height: 1.22; */
    text-align: center;
}

.kotech-info-side h1 span {
    color: #298fff;
    letter-spacing: 1.5px;
    font-weight: 900;
}

.kotech-intro {
    font-size: 1.15em;
    color: #3e526e;
    line-height: 1.7;
    margin-bottom: 21px;
    padding: 20px 20px 20px 20px;
}

.cta-highlight {
    color: #1971f7;
    font-weight: 700;
    background: #eaffff6b;
    border-radius: 6px;
    padding: 0 2px;
}

.kotech-features {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.new-features-list li {
    font-size: 1.07em;
    margin-bottom: 9px;
    color: #2881f8;
    font-weight: 600;
    padding-left: 21px;
    position: relative;
}

.new-features-list li:before {
    content: "★";
    color: #ff9527;
    position: absolute;
    left: 0;
    font-size: 1.09em;
}

.kotech-image-block {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: start;
}

.kotech-image-block img {
    width: 91px;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 2px 14px #0002;
}

.kotech-contact-side {
    background: #fff;
    flex: 1 1 340px;
    border-radius: 27px;
    box-shadow: 0 7px 38px #2c81e91a;
    padding: 44px 32px 32px;
    min-width: 320px;
    z-index: 2;
}

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

.kotech-contact-form h2 {
    font-size: 1.43em;
    font-weight: 900;
    color: #1971f7;
    margin-bottom: 10px;
}

.form-row {
    width: 100%;
}

.kotech-contact-form input,
.kotech-contact-form select,
.kotech-contact-form textarea {
    width: 100%;
    padding: 12px;
    border-radius: 9px;
    border: 1.4px solid #c0cacb;
    font-size: 1em;
    margin-bottom: 3px;
    transition: border-color 0.18s;
}

.kotech-contact-form input:focus,
.kotech-contact-form select:focus,
.kotech-contact-form textarea:focus {
    border-color: #1971f7;
    outline: none;
}

.kotech-contact-form button {
    background: linear-gradient(90deg, #1971f7 70%, #26d7e0 100%);
    color: #fff;
    border: none;
    border-radius: 13px;
    font-size: 1.13em;
    font-weight: 700;
    padding: 12px 0;
    cursor: pointer;
    box-shadow: 0 3px 12px #1971f71c;
    margin-top: 5px;
    letter-spacing: 0.4px;
    transition: background 0.17s;
}

.kotech-contact-form button:hover {
    background: #ff792e;
}

.contact-brands {
    display: flex;
    gap: 11px;
    margin: 9px 0 2px 0;
    align-items: center;
    flex-wrap: wrap;
}

/* .contact-brands img {
  width: 65px;
  height: auto;
  background: #f9fcff;
  border-radius: 8px;
  padding: 2.5px 2px;
} */
.info-safe {
    color: #2881f8;
    font-weight: 500;
    font-size: 0.96em;
    margin-bottom: 0;
    margin-top: 10px;
    opacity: 0.67;
}

/* @media (max-width: 900px) {
  .kotech-service-container { flex-direction: column; gap: 23px; padding: 23px 8px;}
  .kotech-info-side,.kotech-contact-side { max-width: 99vw; padding: 25px 12px;}
  .kotech-info-side h1 { font-size: 1.45em;}
}
@media (max-width: 600px) {
  .kotech-info-side,.kotech-contact-side { border-radius: 10px;}
  .kotech-image-block img { width: 60px; }
  .kotech-label { font-size: 0.89em; padding: 4px 13px;}
} */
@media (max-width: 600px) {
    .kotech-service-container {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 11px 2px !important;
        align-items: stretch !important;
        min-width: 0 !important;
        box-sizing: border-box;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .kotech-info-side,
    .kotech-contact-side {
        width: 80% !important;
        max-width: 80vw !important;
        min-width: 0 !important;
        margin: 0 0 14px 0 !important;
        border-radius: 7px !important;
        box-shadow: none !important;
        padding: 12px 5px !important;
        box-sizing: border-box !important;
    }

    .kotech-contact-form,
    .kotech-info-side {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* All form elements full width */
    .kotech-contact-form input,
    .kotech-contact-form select,
    .kotech-contact-form textarea,
    .kotech-contact-form button {
        width: 99% !important;
        min-width: 0 !important;
        font-size: 0.98em !important;
    }

    .form-row {
        width: 99% !important;
    }
}