@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
/*========== GENERAL STYLE =================================*/
  :root {
  --color-first:#464ACB;
  --color-second:#D83F51;
  --color-content:#2a2d3e;
  --color-dark:#000;
  --color-dark-2:#616161;
  --shadow1: 0 .2rem 1rem rgba(0, 0, 0, .15);
  --shadow-light: 0 0 1rem rgba(0, 0, 0, .05);
  }
  *, ::before, ::after {box-sizing: border-box;}
  * {
    margin: 0;
    padding: 0;
    font-family:"Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.5;
    color: var(--color-dark);
    text-transform: none;
  } 
  html {scroll-behavior: smooth;}
  body{background:var(--bg-gray);}
  a,a:hover,a:focus,a:focus-visible {text-decoration: none;outline: none;}
  a{ text-decoration: none; }
  html {scroll-behavior: smooth;font-family: sans-serif;}
  ul li { list-style: none; }
.webContent .mainHeading{
    font-size:2.5rem;
    font-weight:800;
    line-height:1.2;
    letter-spacing: 0px;
    color:var(--color-dark);
    text-transform: capitalize;
  }
.webContent .subHeading {
  font-size: 1.4rem;
  font-weight: 500;
}
.webContent p {
  font-weight: 400;
  color: var(--color-dark-2);
  font-size: 1rem;
  line-height: 1.6;
}

  .color-first{color: var(--color-first) !important;}
  .color-second{color: var(--color-second) !important;}
  .color-dark{color: var(--color-dark) !important;}
  .bg-color-dark{background: var(--color-content) !important;}
  .bg-first{background: var(--color-first) !important;}
  .bg-light{background: var(--bg-light) !important;}
  .cursor-pointer {cursor: pointer !important;}

 .button, .buttons,input[type=submit].buttons{
    display: inline-block;
    text-align: center;
    padding: 12px 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    border: 2px solid transparent;
    text-transform: capitalize;
    outline: 0;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }
  .buttons.btn-first, .button.btn-second:hover{background-color:var(--color-first);border:1px solid var(--color-first);}
  .buttons.btn-second,.buttons.btn-first:hover{background-color: var(--color-second);border:1px solid var(--color-second);}
  .buttons.btn-second:focus,.buttons.btn-first:focus,input[type=submit].buttons:focus{color: #fff;}

/*.................... @media screen ....................*/
  @media screen and (max-width: 1340px) {
    .webContent .mainHeading{font-size: 2.7rem;}
    .webContent .subHeading {font-size: 1.3rem;}
  }
  @media screen and (max-width: 991px) {
    .webContent .mainHeading{font-size: 2.2rem;}
    .webContent p{font-size: 15px;line-height: 22px;}
    .webContent .subHeading {font-size: 1.2rem;}
  }
  @media screen and (max-width: 767px) {
    .webContent .mainHeading{font-size: 1.8rem;}
    .webContent .subHeading {font-size: 1.1rem;}
    .webContent p{font-size: 14px;line-height: 20px;}
  }
  @media screen and (max-width: 450px) {
    .webContent .mainHeading{font-size: 1.4rem;}
    .webContent .subHeading {font-size: 1rem;}
  }

.modal .logo {width: 150px;padding-top: 12px;}
.ip-modal1{background-color: rgba(0,0,0,.90)!important;}
.ip-modal1 .modal-body{background-color: #fff;}
.ip-step-text{margin-top:10px;margin-bottom:10px;}
#step1, #step2, #step3{text-align: center;}
.subtitle {
font-size: 14px;
color: #333;
margin-bottom: 20px;
}
.highlight {
display: inline-block;
background:var(--color-content);
color: #fff;
padding: 10px 16px;
border-radius: 25px;
font-size: 13px;
margin-bottom: 20px;
}
.loader {
position: relative;
width: 140px;
height: 140px;
margin: 0 auto;
border-radius: 50%;
border: 6px solid #e6e6e6;
border-top: 6px solid #1b3f5d;
animation: loader 1s linear infinite;
}
.loader-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
}
.modal-logo{
width:140px;
}

@keyframes loader {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


.spinner {
position: relative;
width: 100px;
height: 100px;
border: 8px solid Var(--color-first); /* outer circle color */
border-radius: 50%;
animation: spin 2s linear infinite;
display: flex;
justify-content: center;
align-items: center;
margin-top:1rem;
}

.spinner-inner {
width: 50px;
height: 50px;
background: Var(--color-first); /* inner circle color */
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 42px;
font-weight: bold;
animation: none; /* S stays fixed */
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}