.sticky-icon {
    z-index: 9;
    position: fixed;
    top: 30%;
    right: 0%;
    width: 220px;
    display: flex;
    flex-direction: column;
}

.sticky-icon a {
    transform: translate(160px, 0px);
    border-radius: 50px 0px 0px 50px;
    text-align: left;
    margin: 2px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px;
    font-size: 17px;
    font-family: 'Oswald', sans-serif;
    transition: all 0.8s;
}

.sticky-icon a:hover {
    color: #FFF;
    transform: translate(0px, 0px);
}

.sticky-icon a:hover i {
    transform: rotate(360deg);
}

/*.search_icon a:hover i  {
	transform:rotate(360deg);}*/
.inquiryBtn {
    background-color: #344f96;
    color: #FFF;
}

.whatsappBtn {
    background-color: #1aa74f;
    color: #FFF;
}

.catalogueBtn {
    background-color: #d71117;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 5px;
}

.Twitter {
    background-color: #53c5ff;
    color: #FFF;
}

.Instagram {
    background-color: #FD1D1D;
    color: #FFF;
}

.Google {
    background-color: #d34836;
    color: #FFF;
}

.sticky-icon a i {
    background-color: #FFF;
    height: 40px;
    width: 40px;
    color: #000;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.5s;
    font-size: 25px;
}

.sticky-icon a i.fa-facebook-f {
    background-color: #FFF;
    color: #2C80D3;
}

.sticky-icon a i.fa-google-plus-g {
    background-color: #FFF;
    color: #d34836;
}

.sticky-icon a i.fa-instagram {
    background-color: #FFF;
    color: #FD1D1D;
}

.sticky-icon a i.fa-youtube {
    background-color: #FFF;
    color: #fa0910;
}

.sticky-icon a i.fa-twitter {
    background-color: #FFF;
    color: #53c5ff;
}

.fas fa-shopping-cart {
    background-color: #FFF;
}

#myBtn {
    height: 50px;
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    text-align: center;
    padding: 10px;
    text-align: center;
    line-height: 40px;
    border: none;
    outline: none;
    background-color: #1e88e5;
    color: white;
    cursor: pointer;
    border-radius: 50%;
}

.fa-arrow-circle-up {
    font-size: 30px;
}

#myBtn:hover {
    background-color: #555;
}

.sticky-icon a.inquiryBtn i {
    color: #344f96;
}

.sticky-icon a.whatsappBtn i {
    color: #1aa74f;
}

.sticky-icon a.catalogueBtn i {
    color: #d71117;
}

@media (max-width: 991px) {
    .sticky-icon {
        display: none;
    }
}

/* Hide mobile buttons on desktop */
.mobile-sticky {
    display: none;
}

.cstmMobileBtn {
    display: none;
}

/* Mobile View */
@media (max-width: 991px) {

    .cstmMobileBtn {
        display: block;
    }

    /* Hide right side sticky */
    .sticky-icon {
        display: none;
    }

    /* Bottom Fixed Round Buttons */
    .mobile-sticky {
        display: flex;
        justify-content: center;
        gap: 10px;
        position: fixed;
        bottom: 0px;
        left: 0;
        width: 100%;
        z-index: 999;
        background: linear-gradient(1deg, #000000d9, #000000bd);
        padding: 20px 8px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .mobile-sticky a {
        height: auto;
        width: 100%;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 15px;
        text-decoration: none;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        padding: 5px 0px;
    }

    .mobile-sticky .inquiryBtn {
        background: #344f96;
    }

    .mobile-sticky .catalogueBtn {
        background: #d71117;
    }

    .mobile-sticky .whatsappBtn {
        background: #1aa74f;
    }

    .mobile-sticky i {
        font-size: 18px;
        margin-right: 5px;
    }

    .mobile-sticky .callBtn i {
        margin-right: 0px;
    }

    a.callBtn {
        border-radius: 50%;
        width: 130px;
        height: 50px;
        background: #cd8218;
    }
}

/* ===== Overlay ===== */
.custom-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    padding: 40px 15px;
}

/* ===== Main Container ===== */
.modal-creative {
    max-width: 80%;
    margin: 50px auto;
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    animation: fadeIn 0.4s ease;
    position: relative;
}

/* ===== LEFT SIDE BRAND ===== */
.modal-brand {
    width: 40%;
    background: linear-gradient(135deg, #344F98, #1c2d6d);
    color: #fff;
    padding: 50px 35px;
    display: flex;
    align-items: center;
}

.brand-content {
    max-width: 320px;
}

.brand-logo {
    width: 200px;
    margin-bottom: 25px;
    /* text-align: center; */
    margin: center;
}

.modal-brand h2 {
    font-size: 25px;
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 30px;
}

.modal-brand p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
    color: #c7c7c7;
}

.brand-cta {
    display: inline-block;
    padding: 12px 20px;
    background: #fff;
    color: #344F98;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

.brand-cta:hover {
    background: #ffd700;
    color: #000;
}

/* ===== RIGHT SIDE FORM ===== */
.modal-form {
    width: 55%;
    padding: 30px 30px;
}

.modal-form h3 {
    margin-bottom: 5px;
    font-size: 19px;
    font-weight: 600;
    color: #203274;
}

/* ===== Floating Fields ===== */
.form-group {
    position: relative;
    margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    border: none;
    border-bottom: 2px solid #ccc;
    padding: 10px 5px;
    font-size: 14px;
    background: transparent;
    outline: none;
    border-radius: 0px;
}

.form-group textarea {
    resize: none;
    height: 90px;
}

.form-group label {
    position: absolute;
    left: 5px;
    top: 10px;
    color: #999;
    font-size: 14px;
    transition: 0.3s ease;
}

/* Floating Animation */
.form-group input:focus + label,
.form-group input:valid + label,
.form-group textarea:focus + label,
.form-group textarea:valid + label {
    top: -10px;
    font-size: 12px;
    color: #344F98;
}

/* Focus underline */
.form-group input:focus,
.form-group textarea:focus {
    border-bottom: 2px solid #344F98;
}

/* Captcha */
.captcha-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.captcha-group img {
    height: 30px;
    border: 1px solid #ccc;
    width: 90px;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(90deg, #344F98, #1c2d6d);
    border: none;
    color: #fff;
    font-size: 15px;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Close Button */
.close-modal {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 35px;
    height: 35px;
    background: #fff;
    color: #344F98;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    font-weight: bold;
    cursor: pointer;
}

/* Animation */
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(-20px);}
    to {opacity: 1; transform: translateY(0);}
}

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

    .modal-creative {
        flex-direction: column;
    }

    .modal-brand {
        width: 100%;
        padding: 35px;
        text-align: center;
        display: none;
    }

    .modal-form {
        width: 100%;
        padding: 20px;
    }

    .captcha-group {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* mobile side btn */
@media screen and (max-width: 767px) {
    .footer-box {
        display: flex !important;
        position: fixed;
        left: 10px;
        bottom: 5px;
        width: 95%;
        background-color: #0f4da2;
        color: white;
        text-align: center;
        z-index: 999999;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .book-app {
        width: 100%;
        padding: 2%;
        float: left;
        line-height: 40px;
        text-align: center;
        max-height: 100px;
    }

    .sticklist {
        display: none !important;
    }

}

.cstm-highlight-point {
    /* border: 1px solid #4CAF50; */
    /* background-color: #f5fff5; */
    margin: 0px 0px 20px 0px;
    /* border-radius: 15px; */
    color: #000;
    font-size: 13px;
    line-height: 5px;
}

.contact-subline {
    color: #000;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 10px;
}

.cstm-inquiry-btn {
    position: relative;
    bottom: 0px;
    left: 0px;
}

@media screen and (max-width: 767px) {
    .cstm-inquiry-btn {
        display: none;
    }

    .footer-box {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        border-radius: 18px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        padding: 5px 0;
    }

    .footer-box .menu-item {
        flex: 1;
        text-align: center;
        font-family: "Segoe UI", sans-serif;
        font-size: 12px;
        color: #444;
        text-decoration: none;
        transition: all 0.3s ease;
        border-right: 1px solid rgba(0, 0, 0, 0.08);
    }

    .footer-box .menu-item.active i,
    .footer-box .menu-item.active span {
        color: #ff5722;
        font-weight: 600;
    }

    .footer-box .menu-item.active i,
    .footer-box .menu-item.active span {
        color: #344f98 !important;
        font-weight: 600;
    }

    .footer-box .menu-item span {
        /* display: block; */
        font-weight: 500;
        transition: all 0.3s ease;
    }
}

.whatsapp-info,
.pulse {
    font-family: 'Lato', sans-serif;
    display: inline-block;
    color: #fff;
    background: #1ab744;
    position: fixed;
    bottom: 95px;
    right: 30px;
    font-size: 38px;
    text-align: center;
    z-index: 9999;
    border-radius: 90%;
    height: 60px;
    width: 60px;
    line-height: 62px;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.inquiry-button-info {
    display: inline-block;
    /* color: #fff;
    background: #ed1c24; */
    position: fixed;
    bottom: 0px;
    left: 0px;
    font-size: 38px;
    text-align: center;
    z-index: 9999;
    border-radius: 10px;
    line-height: 30px;
    font-size: 15px;
    cursor: pointer;
    padding: 8px 15px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.inquiry-button-info:hover {
    -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s;
    /* color: #fff; */
    /* background-color: #000; */
}

.whatsapp-button a {
    color: #fff !important;
}

@media screen and (max-width: 767px) {
    .inquiry-button {
        display: none;
    }

    .footer-area .footer-logo {
        padding-bottom: 30px;
    }
  .whatsapp-info,
  .cstm-pulse {
        display: none !important;
      font-family: 'Lato', sans-serif;
      display: inline-block;
      color: #fff;
      background: #1ab744;
      position: fixed;
      bottom: 160px;
      right: 35px;
      font-size: 33px;
      text-align: center;
      z-index: 99;
      border-radius: 90%;
      height: 55px;
      width: 55px;
      line-height: 58px;
      cursor: pointer;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s;
  }

  .footer-box .menu-item i {
    font-size: 17px;
    /* padding: 0px; */
  }
}

@-webkit-keyframes cstmpulse {
    0% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: 0
    }
    50% {
        opacity: .3
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}

@keyframes cstmpulse {
    0% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: 0
    }
    50% {
        opacity: .3
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}

.cstm-pulse:nth-child(1) {
    -webkit-animation: cstmpulse 2s infinite;
    animation: cstmpulse 2s infinite
}

.cstm-pulse:nth-child(2) {
    -webkit-animation: cstmpulse 2s infinite .3s;
    animation: cstmpulse 2s infinite .3s
}

.cstm-pulse:nth-child(3) {
    -webkit-animation: cstmpulse 2s infinite .6s;
    animation: cstmpulse 2s infinite .6s
}


.form-group input::placeholder {
    font-size: 15px;
}

.cta-form {
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
}

.cta-form h3 {
    color: #344f98;
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 5px;
}

.cta-form p {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #364e98c4;
}

@media (max-width: 991px) {
    .cta-form {
        margin: 0px 10px;
    }

    .cta-form h3 {
        font-size: 18px;
    }

    .cta-form p {
        font-size: 13px;
    }
}

/* FORM GROUP */
.form-group {
    position: relative;
    margin-bottom: 15px;
}

/* INPUT + SELECT STYLE */
.form-group input,
.form-group select {
    width: 100%;
    border: none;
    border-bottom: 2px solid #dcdcdc;
    background: transparent;
    padding: 5px 5px;
    font-size: 15px;
    outline: none;
    transition: all 0.3s ease;
}

/* Focus Effect */
.form-group input:focus,
.form-group select:focus {
    border-bottom: 2px solid #2f3f8f;
    box-shadow: 0 4px 8px rgba(47,63,143,0.08);
}

/* Placeholder Animation */
.form-group input::placeholder {
    color: #999;
    transition: 0.3s;
}

.form-group input:focus::placeholder {
    opacity: 0.6;
    transform: translateY(-3px);
}

/* Dropdown Custom Arrow */
.form-group select {
    appearance: none;
    background: url("data:image/svg+xml;utf8,<svg fill='%232f3f8f' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 10px center;
    background-size: 16px;
    cursor: pointer;
    height: 45px;
    padding: 5px;
    margin: 0;
    color: #9b9b9b !important;
    font-size: 15px !important;
}

/* Captcha Alignment */
.captcha-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.captcha-group img {
    height: 45px;
    border-radius: 6px;
    cursor: pointer;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #3d4fa3, #2b3a85);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 40px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(43,58,133,0.3);
}

img[alt="captcha"] {
    width: 100px;
    height: 35px !important;
}

.footer-box .menu-item {
    display: grid !important;
}

.captcha-wrapper {
    margin-top: 10px;
}

.captcha-image-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4f6fb;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
}

.captcha-image-box img {
    height: 50px;
}

.refresh-captcha {
    background: #344f98;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.refresh-captcha:hover {
    background: #2c417f;
}

.captcha-input {
    height: 48px;
    border-radius: 6px;
}

@media (max-width: 991px) {
    .modal-creative {
        max-width: 100%;
        margin: 0px auto;
    }

    .custom-modal {
        z-index: 999999;
    }

    .modal-form h3 {
        width: 90%;
    }
}