body, html{overflow-x: hidden !important;} 
body {margin: 0;font-family: 'Segoe UI', sans-serif;background: #edf2f8;}
/* --- Existing styles preserved --- */

.network-templates-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 50px;padding: 20px;max-width: 1320px;margin: 0 auto;}
.network-template-box {background-size: contain;background-position: center;background-repeat: no-repeat;color: #fff;padding: 30px 20px;height: 500px;display: flex;flex-direction: column;justify-content: space-between;font-weight: bold;font-size: 18px;border-radius: 10px;text-shadow: 1px 1px 3px #000;transition: transform 0.3s;position: relative;background-color: #fff;border: 1px solid #00b67a;}
.network-template-box:hover {transform: scale(1.03);border: 1px solid #00b67a;box-shadow: 4px 5px 0px #00b67a;}
.network-template-caption {background: #001475;position: absolute;bottom: 0;width: 100%;left: 0;border-radius: 0 0 10px 10px;padding: 15px;text-align: center;}
.network-template-buttons {display: flex;gap: 15px;justify-content: center;margin-top: 10px;}
.network-template-buttons button , button.next-btn{padding: 14px 16px;border: none;background: #00b67a;color: #fff;font-size: 14px;font-weight: 600;cursor: pointer;border-radius: 5px;transition: all 0.3s ease-in;}
.network-template-buttons button:hover , button.next-btn:hover{background: #1c40f2;}

#previewModal {display: none;position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.85);padding: 90px 0px 30px;box-sizing: border-box;}
#previewModal .close {position: absolute;top: 20px;right: 40px;font-size: 40px;color: white;cursor: pointer;}
.t-head{text-transform: uppercase;}
.modal-tabs {display: flex;justify-content: center; gap: 10px;margin: 20px 0;}
.modal-tabs button {padding: 10px 20px;border: none;background-color: #00b67a;color: #fff;font-weight: bold;cursor: pointer;border-radius: 5px;}
.modal-tabs button:hover {background-color: #1c40f2;}
.tab-buttons {text-align: center;margin-bottom: 20px;}
.tab-btn {background: #fff;border: none;padding: 12px 22px;margin: 0 10px;font-size: 16px;font-weight: bold;color: #001475;border-radius: 30px;cursor: pointer;transition: all 0.3s ease;}
.tab-btn.active,
.tab-btn:hover {background-color: #00b67a;color: white;}
.device-frame {position: relative;display: flex;justify-content: center;align-items: center;background: transparent;padding: 0;}
#previewIframe {border: 2px solid #00b67a;border-radius: 20px;box-shadow: 4px 5px 0px #00b67a;background: #fff;margin: 0 auto;display: block;transition: all 0.4s ease;}
#iframeLoader {position: absolute;width: 100%;height: 100%;background: transparent;display: flex;justify-content: center;align-items: center;border-radius: 20px;z-index: 10;}
.loader-content {text-align: center;}
.loader-content p {margin-top: 12px;font-size: 16px;color: #001475;font-weight: bold;}
.spinner {width: 40px;height: 40px;border: 4px solid #00b67a;border-top: 4px solid transparent;border-radius: 50%;animation: spin 1s linear infinite;margin: 0 auto;}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.custom-modal-overlay {position: fixed;top: 0; left: 0;width: 100%; height: 100%;background: rgba(0, 0, 0, 0.6);z-index: 9999;display: flex;align-items: center;justify-content: center;}
.custom-modal-content {position: relative;width: 90%;height: 90%;background: #fff;border-radius: 10px;overflow: hidden;padding: 0;box-shadow: 0 0 15px rgba(0,0,0,0.3);}
.custom-modal-content iframe {width: 100%;height: 100%;border: none;}
.custom-modal-close {position: absolute;top: 1px;right: 1px;font-size: 20px;cursor: pointer;z-index: 10;color: #fff;background:#00b67a;padding-bottom: 3px;width: 30px;height: 30px;border-radius: 50%;display: flex;justify-content: center;align-items: center;}

.multi-step-container {display: flex;max-width: 1000px;margin: 50px auto;background: white;border-radius: 10px;overflow: hidden;box-shadow: 0 0 20px rgba(0,0,0,0.1);width:100%; position: relative;}
.sidebar {width: 250px;background: #091034;padding: 30px 20px;color: white;}
.sidebar .step {display:block;}
/*.sidebar .step.active {background: #a5d8ff;color: #15e11c;}*/
.sidebar .step span.count{margin: 20px 0;text-align: center;font-weight: bold;padding: 10px;border-radius: 50%;width: 40px;height: 40px;line-height: 20px;background: #1c40f2;color: #fff;margin-right:10px; }
.sidebar .step.active span{color: #00b67a;}
.sidebar .step.active span.count{background: #00b67a;color: #fff;}
.sidebar .step span {display: inline-block;font-size: 14px;font-weight: 600;}
.form-content {flex: 1;padding: 40px;position: relative;}
.step-form {display: none;flex-direction: column;}
.step-form.active {display: flex;flex-direction: column;}

.btn-box{display: flex; justify-content: space-between;}
.btn-box1 {justify-content: end;}
.btn-box .prev-btn{padding: 14px 16px;border: none;background: #1c40f2;color: #fff;font-size: 14px;font-weight: 600;cursor: pointer;border-radius: 5px;transition: all 0.3s ease-in;}
.btn-box .prev-btn:hover {background: #00b67a;}
#clone_site_btn{padding: 14px 16px;border: none;background: #00b67a;color: #fff;font-size: 14px;font-weight: 600;cursor: pointer;border-radius: 5px;transition: all 0.3s ease-in; margin-top: 20px;}
#clone_site_btn:hover {background:#1c40f2;}
.step-final{justify-content: center; align-items: center;}
/* .step-final img{background-color: #001475;} */

.clone-site-info-form {max-width: 700px;margin: 40px auto;background: #fff;padding: 30px;border-radius: 12px;font-family: 'Segoe UI', sans-serif;border: 1px solid #00b67a;box-shadow: 4px 5px 0px #00b67a;}
.col-frame {margin-bottom: 20px; position: relative;}
.col-frame label{color: #001042; font-weight: 600;position: absolute;left: 12px;top: 12px;font-size: 16px;transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;}
.clone-site-info-form textarea {width: 100%; padding: 12px; margin-bottom: 0px; border-radius: 6px; border: 1px solid #0010426b;transition: border-color 0.3s ease;}
.col-frame input:focus {border-color: #001042;outline: none;}
.col-frame input {width: 100%;padding: 14px 12px;border: 1px solid #0010426b;border-radius: 6px;font-size: 16px;transition: border-color 0.3s ease;}
.col-frame input:focus + label, 
.col-frame input:not(:placeholder-shown) + label, .validation_error {top: -12px!important;font-size: 12px!important;color: #001042!important;background-color: #ffffff;padding:0 4px;border-radius: 4px;left: 8px!important;}
.col-frame label code, .col-frame small code{color: #00b67a;}
.col-frame label span i{color: #00b67a;}
.clone-site-info-form h2 { text-align: center; margin-bottom:15px; }

.clone-site-info-form button, .clone_site_btn {background: #00b67a; font-family: "Urbanist", sans-serif;font-weight: 600;border-radius: 5px;padding: 16px 32px;color: #ffffff;vertical-align: middle;overflow: hidden;-webkit-transition: all 0.3s ease-in;transition: all 0.3s ease-in;border: 0;}
.clone-site-info-form button:hover, .clone_site_btn:hover {background:#1c40f2;color:#fff;}
.clone-loading-screen {text-align: center;padding: 20px 20px;font-family: 'Segoe UI', sans-serif;}
.loading-icon {font-size: 32px;color: #2c7be5;margin-bottom: 20px;animation: sparkle 1s infinite alternate;}
.field-error, #slug_error {font-size: 13px;padding-left: 2px;animation: fadeInSlide 0.3s ease;margin-top: 0!important;color: #d70303!important;}
.clone-loading-screen h2{margin-bottom: 30px;}



@keyframes sparkle {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.2); opacity: 1; }
}

.loading-bar {width: 300px;margin: 20px auto;height: 6px;background: #eee;border-radius: 3px;overflow: hidden; position: relative;}
.bar-progress { height: 100%;width: 100%;background: #2c7be5;position: absolute;left: 0;top: 0;animation: animateBar 2s linear infinite;}

@keyframes animateBar {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

@keyframes fadeInSlide {
from {opacity: 0;transform: translateY(-5px);}
to {opacity: 1;transform: translateY(0);}
}



@media only screen and (min-width:768px) and (max-width: 991px){
  .network-templates-grid {grid-template-columns: repeat(3, 1fr);gap:20px;padding: 20px;}  
  .network-template-box{height: 350px;}
  .t-head{font-size: 16px;}
  .multi-step-container{width: 95%;}
}

@media only screen and (max-width: 767px){
  .network-templates-grid {grid-template-columns: repeat(1, 1fr);gap:20px;padding: 20px;}  
  .network-template-box{height: 350px;}
  .tab-btn{font-size: 14px; padding: 12px;}
  .clone-site-info-form{margin: 40px 15px;}
  .multi-step-container{width: 95%;}
  .sidebar {width: 80px;padding: 30px 5px;}
  .sidebar .step {display: block;text-align: center;}
  .sidebar .step span.count{margin-right: 0;}
  .form-content {padding: 30px 10px;}
  .col-frame label, .col-frame label code, .col-frame small code{font-size: 14px;}
  .step-form .col-frame input{padding: 14px 8px;}
  .step-form .col-frame label{left: 5px; top:19px;}
}