/* INSTAGRAM LINK GENERATOR STARTS */
.card {
      background: #fff;
      border-radius: 16px;
      border: 1px solid #e5e5e5;
      padding: 1.5rem;
      width: 100%;
    
    }
 
    .header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 1.5rem;
    }
 
    .ig-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
 
    .ig-icon svg { display: block; }
 
    .header-text p:first-child {
      font-size: 17px;
      font-weight: 500;
      color: #111;
    }
 
    .header-text p:last-child {
      font-size: 13px;
      color: #888;
      margin-top: -12px;
    }
 
    label {
      font-size: 13px;
      color: #666;
      display: block;
      margin-bottom: 6px;
    }
 
    .input-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }
 
    .input-wrap {
      display: flex;
      align-items: center;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      flex: 1;
      background: #fafafa;
      transition: border-color 0.2s;
    }
 
    .input-wrap:focus-within { border-color: #aaa; }
 
    .at-sign {
      padding: 0 10px;
      font-size: 15px;
      color: #bbb;
      user-select: none;
    }
 
  input[type="text2"] {
      border: none;
      background: transparent;
      flex: 1;
      padding: 10px 10px 10px 0;
      font-size: 15px;
      outline: none;
      color: #111;
    } */
 
    button {
      cursor: pointer;
      font-family: inherit;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: transparent;
      color: #555;
      padding: 9px 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s, border-color 0.15s;
    }
 
    button:hover { background: #f5f5f5; border-color: #bbb; }
    button:active { transform: scale(0.98); }
 
    .result-box { margin-top: 1rem; display: none; }
 
    .link-display {
      display: flex;
      align-items: center;
      background: #fafafa;
      border: 1px solid #e5e5e5;
      border-radius: 8px;
      padding: 10px 12px;
    }
 
    #generatedLink {
      flex: 1;
      font-size: 14px;
      color: #111;
      word-break: break-all;
      font-family: 'Courier New', monospace;
    }
 
    .action-row {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }
 
    #copyBtn {
      flex: 1;
      justify-content: center;
      background: #FFA500;
      padding: 10px 20px;
      color: white;
      border: none;
      
    }
 
    #copyBtn:hover { background: #FF8C00; }

   #clearbox{
      cursor: pointer;
      font-family: inherit;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: transparent;
      color: #555;
      padding: 9px 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s, border-color 0.15s; 
    }


    #openBtn {
      flex: 1;
      justify-content: center;
      background: #e8f0fe;
      padding: 10px 20px;
      color: #1a56db;
      border: none;
    }
	#openBtn:hover { background: #d0e3fd; }
 
    .empty-state {
      margin-top: 1rem;
      text-align: center;
      padding: 1.5rem 0;
      color: #bbb;
      font-size: 13px;
    }
 
    .empty-state i {
      font-size: 28px;
      display: block;
      margin-bottom: 6px;
    }
 
    .toast {
      display: none;
      position: fixed;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 10px 18px;
      font-size: 13px;
      color: #333;
      white-space: nowrap;
      z-index: 999;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
 
    .toast i { font-size: 15px; color: #22c55e; margin-right: 6px; }
 /* INSTAGRAM LINK GENERATOR END */

 /* TIKTOK LINK GENERATOR STARTS */
  .tt-card {
      background: #fff;
      border-radius: 16px;
      border: 1px solid #e5e5e5;
      padding: 1.5rem;
      width: 100%;
      
    }
 
    .tt-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 1.5rem;
    }
 
    .tt-brand-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: #010101;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
 
    .tt-header-text p:first-child {
      font-size: 17px;
      font-weight: 500;
      color: #111;
    }
 
    .tt-header-text p:last-child {
      font-size: 13px;
      color: #888;
      margin-top: -12px;
    }
 
    .tt-label {
      font-size: 13px;
      color: #666;
      display: block;
      margin-bottom: 6px;
    }
 
    .tt-input-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }
 
    .tt-input-wrap {
      display: flex;
      align-items: center;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      flex: 1;
      background: #fafafa;
      transition: border-color 0.2s;
    }
 
    .tt-input-wrap:focus-within { border-color: #aaa; }
 
    .tt-at-sign {
      padding: 0 10px;
      font-size: 15px;
      color: #bbb;
      user-select: none;
    }
 
    #tt-username-input {
      border: none;
      background: transparent;
      flex: 1;
      padding: 10px 10px 10px 0;
      font-size: 15px;
      outline: none;
      color: #111;
    }
 
    .tt-btn {
      cursor: pointer;
      font-family: inherit;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: transparent;
      color: #555;
      padding: 9px 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s, border-color 0.15s;
    }
 
    .tt-btn:hover { background: #f5f5f5; border-color: #bbb; }
    .tt-btn:active { transform: scale(0.98); }
 
    .tt-result-box { margin-top: 1rem; display: none; }
 
    .tt-link-display {
      display: flex;
      align-items: center;
      background: #fafafa;
      border: 1px solid #e5e5e5;
      border-radius: 8px;
      padding: 10px 12px;
    }
 
    #tt-generated-link {
      flex: 1;
      font-size: 14px;
      color: #111;
      word-break: break-all;
      font-family: 'Courier New', monospace;
    }
 
    .tt-action-row {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }
 
    #tt-copy-btn {
      flex: 1;
      justify-content: center;
      background: #fff0f3;
      color: #ee1d52;
      border-color: #f9c4cf;
    }
 
    #tt-copy-btn:hover { background: #ffe0e6; }
 
    #tt-open-btn {
      flex: 1;
      justify-content: center;
    }
 
    .tt-empty-state {
      margin-top: 1rem;
      text-align: center;
      padding: 1.5rem 0;
      color: #bbb;
      font-size: 13px;
    }
 
    .tt-empty-state i {
      font-size: 28px;
      display: block;
      margin-bottom: 6px;
    }
 
    #tt-toast {
      display: none;
      position: fixed;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 10px 18px;
      font-size: 13px;
      color: #333;
      white-space: nowrap;
      z-index: 999;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
 
    #tt-toast i { font-size: 15px; color: #22c55e; margin-right: 6px; }
 /* TIKTOK LINK GENERATOR ENDS */

 /* WHATSAPP LINK GENERATOR STARTS */
  
  
/* WHATSAPP LINK GENERATOR ENDS */

 
 





































body {
    font-family: 'Montserrat', sans-serif;
      padding: 0;
    min-height: 100vh;
  }
.well h4{text-align: center;
}
  .side-box {
    display: flex;
    margin-bottom: 15px;
    border-radius: 10px;
    padding: 20px 30px;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
  .side-box{
    background-color: #303030;}
/* dashboard style ends here*/
.introtxtsignin{display:block;text-align:center;font-size:20px; font-weight:bolder;}
.cacimg{width:100%;}
/*footer{text-align:center; background:black; color:white; padding:20px;}*/
footer { background:#303030;
  margin-top:30px;height:330px; border-top-right-radius:125px;
  justify-content:center; background-size: cover; padding:40px;
  border-top-right-radius:125px;padding-left:150px;}

  .ftrow{width:85%; margin:20px; display:flex; flex-wrap:wrap;
  align-items: flex-start; justify-content:space-between;
  }
  .ftlogo{width:150px;margin-left:20px;margin-bottom:-60px;padding:10px;}
  .ftcol{flex-basis:25%;padding:10px; 
  }
  .ftcol:nth-child(3){flex-basis:15%}
  .ftcol i{ margin-right:10px; color:#FFBB00;
  }
  .fttxt1{font-size:20px;font-family: Spartan MB Black;color:white;font-weight:bolder;}
  .fttxt2{font-family: Helvetica;color:white;font-weight:bolder;
  font-size:14px; line-height: 20px;}
  .fttxt2 a{text-decoration: none; color: white;}
  .fttxt2 a:hover{color:#FFBB00;}
  .ftr-links{font-size:14px;
  color:white;width:80%;text-decoration:none;}
  .ftr-links:hover{color:yellow;}
  .ftcol4 i{ border-radius:50%; margin-right:10px; color: #FFBB00;
  font-size:24px; width:40px; height:40px; line-height:40px; background:white;
  text-align:center;
  }
  .copyright{font-size:15px;margin-top:-20px;
  color:white;text-align:center; font-weight:bolder;}




/* Footer end here*/
.navbar-toggle:hove{background-color:#ff3300; color:#4d4d4d;}
.navbar-header {background-color: #4d4d4d;}
.container-fluid {background-color: #4d4d4d;}
.whyus{font-size:30px; text-align:center; font-weight:bolder; color:white;}
.introtxt2{display:block;text-align:center;font-size:15px;}
a{color:Red;}
a:hover{color:Orange;}
.newordercontainer {background-color:#303030; padding:20px; margin-bottom: 20px;}
.rspg1{font-size:35px; font-weight:bolder; margin-top:30px;margin-bottom:30px;}
.rspg3{font-size:20px; line-height:35px; font-weight:bolder;}
.rspgcon{background-color:#303030; padding:20px; margin:20px;}

/* Auto Pop up*/
.popup{display:flex; align-items:center; justify-content: center; }
.content{position: relative; width: 600px; height:150px; background: rgb(255, 255, 255);
box-shadow: 0 5px 15px grey; padding: 20px; margin-top: 20px; border-radius: 10px;}
.poptxt{font-weight:bolder; text-align:center;
  font-size: 20px;  font-family: Spartan MB Black; color: red; display: block;
  letter-spacing: 2px;
}
.poptxt2{
  font-size: 20px;  font-family: Spartan MB Black; color: rgb(0, 0, 0); display: block;
  letter-spacing: 2px;
}
.close{position: absolute; top:20px; right: 20px; width: 10px; height: 10px; 
background:url(https://storage.perfectcdn.com/dxlbml/8y30h5rytpx2a70x.png); background-size: cover; cursor: pointer;}
#modalcontainer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.83);
  display: none;
} 
/* Auto Pop up Ends Here*/
.cshd3{ display: block; 
  background-color: Green; color:white;
  height: 50px; 
}
.cshd{ display: block; 
  background-color: red; color:white;
  height: 50px; 
}/* background-color: rgb(224, 146, 0);*/
.cshd .cshdtxt{
  padding-top: 15px;
  text-align: center;
  font-weight: bolder;
}
.cshd3 .cshdtxt{
  padding-top: 15px;
  text-align: center;
  font-weight: bolder;
}
.cshd a{
  text-decoration: none;
  padding: 5px 10px 5px 10px;
  background-color: #000000;
  border-radius: 10px; color: rgb(224, 146, 0); margin-right: 3px;
}
.cshd3 a{
  text-decoration: none;
  padding: 5px 10px 5px 10px;
  background-color: #000000;
  border-radius: 10px; color: rgb(224, 146, 0); margin-right: 3px;
}
.cshd a:hover{
  background-color: #ffffff;
  border-radius: 10px; color: #010024;
}
.cshd3 a:hover{
  background-color: #ffffff;
  border-radius: 10px; color: #010024;
}
.cshd2{ display: block; 
  background-color: red; color:white;
  height: 50px; 
}
.cshd2 .cshdtxt2{
  padding-top: 15px;
  text-align: center;
  font-weight: bolder;
}
.cshd2 a{
  text-decoration: none;
  padding: 5px 10px 5px 10px;
  background-color: #000000;
  border-radius: 10px; color: rgb(224, 146, 0); margin-right: 3px;
}
.cshd2 a:hover{
  background-color: #ffffff;
  border-radius: 10px; color: #010024;
}

@media screen and (max-width:767px){
  .cshd2 .cshdtxt2{
  font-size:12px;
}
.content{position: relative; width: 90%; height:200px; background: rgb(255, 255, 255);
box-shadow: 0 5px 15px grey; padding: 20px; margin-top: 20px; border-radius: 10px;}
footer {padding:0px; height:680px; border-top-right-radius:125px;
justify-content:center;}
.ftcol{flex-basis:100%;padding:10px;}
.ftlogo{margin-top:30px;padding:10px;}
.copyright{font-size:15px;margin-top: 10px;margin-left:20px; color:white;}
}