:root
      {
         --theme:rgba(99, 17, 72, 1);
         --themehover:rgba(99, 17, 72, 0.9);
         /*------------------------logo css------------------*/ 
         --logowidth:190px;
         --logoheight:30px;
         --mobilelogowidth:150px;
         --mobilelogoheight:26px;
         /*----------------------footer--------------------*/
         --themebg:linear-gradient(166deg,rgba(99, 17, 72, 1) 0%, rgba(150, 35, 67, 1) 50%, rgba(84, 8, 0, 1) 100%);
         --footerfontcolor:white;
         --footerfontcolorhover:#111;
         --footertheme:white;
      }
      *
      {
         font-family: 'Poppins', sans-serif;
         margin: 0;
         padding: 0;
         box-sizing:border-box;
         outline: none;
         border: none;
         text-decoration:none;
         transition-duration:all .03s lenear;
      }
      .html
        {
         font-size:100%;
         overflow-x: hidden;
         scroll-behavior: smooth;
         scroll-padding-top: 7rem;
        }
      body
      {
       /*background-image:url(image/bg.jpg);
       background-repeat:no-repeat;
       background-size:cover;
       background-position:center;*/
      } 
     /*--------------------------------animation code------------------------------*/
      @keyframes up2downlogin{0%{transform: translateY(-180%);}100%{transform: translateY(0%);}}
      @keyframes up2down{0%{transform: translateY(-100%);}100%{transform: translateY(0%);}}
      @keyframes down2up{0%{transform: translateY(100%);}100%{transform: translateY(0%);}}
      @keyframes left2right{0%{transform: translateX(-100%);}100%{transform: translateX(0%);}}
      @keyframes right2left{0%{transform: translateX(100%);}100%{transform: translateX(0%);}}
      @keyframes scale{0%{transform: scale(0.25);}100%{transform: scale(1.0);}}
      /*-------------------------header--------------------------*/
          .headers
          {
            width: 100%;
            height: 40px;
            background:var(--theme);
            padding: 7px;
            margin: auto;
            text-align: center; 
            border:0px solid white;
            display: flex;    
          }
          .headers .logo
          {
              width:auto;
              position:absolute;
              left:5;
              top:4;
              animation-name:left2right;
              animation-duration: 800ms;
              animation-iteration-count: 1;
              animation-timing-function: ease;
          }
          .headers .logo img
          {
              margin-bottom:2px;
              width:var(--logowidth);
              height:logoheight;
          }
          .headers .controls
          {
            text-decoration: none;
            display: flex;
            position: absolute;
            right:10;
            background:white;
            color:var(--theme);
            font-size:var(--fs);
            padding:2px 8px;
            border: 1px solid white;
            border-radius: 6px;
            animation-name:right2left;
            animation-duration: 800ms;
            animation-iteration-count: 1;
            animation-timing-function: ease;
            transition: all .15s;
            transform: rotate(-0deg) scale(1.0);
          }
          .headers .controls:hover
          {
              background:var(--theme);
              color:white;
          }
          .login .modal-dialog
          {
              
          }
          .login .modal-dialog .modal-content
          {
             animation-name:up2downlogin;
             animation-duration: 800ms;
             animation-iteration-count: 1;
             animation-timing-function: ease;  
          }
          .login .modal-dialog .modal-content .modal-header
          {
             background:transparent; 
          }
          .login .modal-dialog .modal-content .modal-header .modal-title
          {
            font-size:22px;
            color:var(--theme);
            font-weight:600;
            text-align: center;
            background:transparent; 
          }
          .login .modal-dialog .modal-content .modal-body
          {
              text-align:center;
              background:rgba(255,255,255, 0.92);
          }
          .login .modal-dialog .modal-content .modal-body h6 img
          {
              width:var(--logowidth);
              height:var(--logoheight);
          }
          .login .modal-dialog .modal-content .modal-body h6
          {
              margin:auto;
          }
          .login .modal-dialog .modal-content .modal-body .inputbox input
          {
              width:100%;
              height:40px;
              font-size:15px;
              margin:auto;
              margin-bottom:10px;
              padding-left:10px;
              border-radius:0px;
              border-bottom:1px solid grey;
              color:#000;
              background:transparent;
          }
          .login .modal-dialog .modal-content .modal-body .inputbox input::placeholder
          {
              color:#999;
          }
          .login .modal-dialog .modal-content .modal-body .submit input
          {
              background:var(--theme);
              width:100%;
              height:auto;
              margin-top:15px;
              margin-bottom:10px;
              font-size:16px;
              background:var(--theme);
              border-radius:0px;
              color:#fff;
          }
@media (max-width: 768px)
          {
              .headers .logo
             {
              width:auto;
              position:absolute;
              left:2;
              top:5;
              }
             .headers .logo
             {
              width:auto;
              position:absolute;
             }
             .headers .logo img
             {
              margin-bottom:1px;
              width:var(--mobilelogowidth);
              height:var(--mobilelogoheight);
              }
             .headers .controls
             {
               padding:0px 6px;
               right:3;
             }
             .login .modal-dialog .modal-content .modal-body h6 img
            {
                 width:var(--mobilelogowidth);
                height:var(--mobilelogoheight);
            }
          }
/*-------------------------footer css--------------------*/
     .footer
     {
        background:linear-gradient(135deg,var(--theme) 0%, rgba(117, 30, 125,0.99) 50%, var(--theme) 100%);
        text-align: center;
        margin-top:4px;
        width:100%;
        border-top-left-radius:20px;
        border-top-right-radius:20px;
     }
     .footer b
     {
         color:var(--footerfontcolor);
         font-size:25px;
     }
     .footer img
     {
         width:var(--logowidth);
         height:var(--logoheight);
         margin-bottom:20px;
         animation-name:scale;
         animation-duration: 400ms;
         animation-iteration-count: 1;
         animation-timing-function: ease;
     }
     .footer .footer1 .footer2 .footer3 .footer4 h3
     {
        color:var(--footerfontcolor);
     }
     .footer .footer1 .footer2 .footer3 .footer4 .secondheading,
     .footer .footer1 .footer2 .footer3 .footer4
     {
        color:var(--footerfontcolor);
     }
     .footer .footer1 .footer2 .footer3 .footer4 .text,
     .footer .footer1 .social .socials .text
     {
        font-size:16px;
        color:var(--footerfontcolor);
     }
     .footer .footer1 .footer2 .footer3 .linksleft h5,
     .footer .footer1 .footer2 .footer3 .linksright h5
     {
        font-size:16px;
        text-transform: capitalize;
        color:var(--footertheme);
        font-weight:600;
     }
     .footer .footer1 .footer2 .footer3
     {
        margin:auto;
     }
      .footer .footer1 .footer2 .footer3 .linksleft,
     .footer .footer1 .footer2 .footer3 .linksright
     {
        text-align:left;
        padding:auto;
        margin:auto;
        animation-name:scale;
         animation-duration: 400ms;
         animation-iteration-count: 1;
         animation-timing-function: ease;
     }
     .footer .footer1 .footer2 .footer3 .linksleft ul li a,
     .footer .footer1 .footer2 .footer3 .linksright ul li a
     {
        font-size:16px;
        color:var(--footerfontcolor);
        text-decoration: none;
        margin:auto;
        font-weight: 400;
        text-align:left;
     }
     .footer .footer1 .footer2 .footer3 .linksleft ul li a:hover,
     .footer .footer1 .footer2 .footer3 .linksright ul li a:hover
     {
        text-decoration: underline;
        color:var(--footertheme);
     }
     .footer .footer1 .state
     {
        font-size:var(--fontsize);
        color:var(--footerfontcolor);
     }
     
     .footer .footer1 .icons .favicon .fab
     {
         border:1px solid var(--footertheme);
         border-radius:15px;
         width:41px;
         height:40px;
         padding:10px 8px;
         color:var(--footertheme);
         font-size:16px;
         animation-name:scale;
         animation-duration: 400ms;
         animation-iteration-count: 1;
         animation-timing-function: ease;
     }
     .footer .footer1 .icons .favicon .fab:hover
     {
         border:1px solid var(--footertheme);
         background:var(--footertheme);
         color:#666;
     }
     .copyright .a .b .c
     {
        background:transparent;
        color:var(--footerfontcolor);
        font-weight: 400;
     }
     .footer .lastrow
     {
        
        height:40px;
        background:rgba(0,0,0,0.1);
        color:rgba(255,255,255, 0.3);
        font-size: 10px;;
        margin:auto;
        padding-top:6px;
        text-align: center;
        animation-name:scale;
         animation-duration: 400ms;
         animation-iteration-count: 1;
         animation-timing-function: ease;
     }
@media (max-width: 768px)
  {
    .footer
    {
        width:100%;
        
    }
     .footer img
     {
         width:var(--mobilelogowidth);
         height:var(--mobilelogoheight);
         margin-bottom:20px;
     }
     .footer .footer1 .footer2 .footer3
     {
        margin:auto;
        width:100%;
        
     }
    .footer .footer1 .footer2 .footer3 .linksleft
    {
      text-align: center;
    }
    .footer .footer1 .footer2 .footer3 .linksleft h5,
    .footer .footer1 .footer2 .footer3 .linksright h5
    {
       font-size:13px; 
    }
    .footer .footer1 .footer2 .footer3 .footer4 .text,
    .footer .footer1 .social .socials .text
    {
        font-size:10px;
    }
    .footer .footer1 .footer2 .footer3 .linksleft ul li
    {
        font-size:12px; 
        text-align:left;
    }
    .footer .footer1 .footer2 .footer3 .linksright ul li
    {
        font-size:11px; 
        text-align:right;
    }
    .footer .footer1 .footer2 .footer3 .linksleft ul li a,
    .footer .footer1 .footer2 .footer3 .linksright ul li a
    {
        font-size:12px;
    }
    .footer .footer1 .footer2 .footer3 .linksleft h5
    {
        text-align:left;
    }
    .footer .footer1 .footer2 .footer3 .linksright h5
    {
        text-align:right;
    }
    .copyright .a .b .c
    {
        font-size:10px;
    }
    .footer .footer1 .state
    {
       font-size:10px;
    }
     .footer .footer1 .icons .favicon .fab
     {
         border-radius:20px;
         font-size:17px;
         animation-name:scale;
         animation-duration: 200ms;
         animation-iteration-count: 1;
         animation-timing-function: ease;
     }
     .footer .footer1 .icons .favicon .fab:hover
     {
         color:white;
     }
     .footer .lastrow
     {
        
        height:20px;
        font-size:10px;
        margin:auto;
        padding-top:2px;
        text-align: center;
     }
}
/*---------------------------------all terms and conditions css-----------------------------*/
       .policy
      {
          width:100%;
          font-size:12px;
          color:var(--fontcolor);
          text-align:justify;
          background:white;
          padding:10px 10px;
      }
      .policy h5
      {
          font-size:var(--midheadingsize);
          color:var(--theme);
         
      }
@media (max-width: 768px)
      {
          .mainheading
          {
              font-size:var(--mobilemidheadingsize);
          }
         .policy
             {
               font-size:var(--fontsizemobile);
               text-align:justify;
             } 
         .policy h5
            {
              font-size:var(--mobileheadingsize);
            }
      }
      .policy ul li b,
      .policy ul li,
      .policy h5 b,
      .policy h5,
      .policy p,
      .policy
      {
         font-size:var(--fontsize); 
      }
   }