:root{
  --bg:#f6f8ff;
  --text:#1a2a5c;  
  --btntx:#fff;
  --primary:#1A38A0;
  --secondary:#6b7bbd;
  --card:#ffffff;
  --border:#e6ebff;
  --nav:#ffffffd3;
  --navbr:#1C1D1E;
  --footer:#0b1220;
  --footer-text:#9aa4d6;
  --svgst:#fff;
}

body.theme-dark{
  --bg:#0b1220;
  --text:#e6ecff;
  --btntx:#000;
  --primary:#4DF0FF;
  --secondary:#fff;
  --card:#111827;
  --border:#1f2937;
  --nav:#131313af;
  --navbr:#999999;
  --footer:#020617;
  --footer-text:#94a3b8;
  --svgst:#000;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Montserrat Alternates',sans-serif}
body{background:var(--bg);color:var(--text);overflow-x:hidden;transition:.3s; line-height: 1.7;}

header{position:fixed;top:20px;left:50%;transform:translateX(-50%);width:90%;max-width:1200px;z-index:1000}
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-radius:50px; background:var(--nav); border: 1px solid var(--navbr); box-shadow:0 20px 40px rgba(0,0,0,0.06); }
.nav::before{filter: blur(8px); }
.logo{ margin-top: 6px; }
nav a{margin:0 16px;color:var(--text);text-decoration:none;font-weight:500;  font-weight: 600;}
nav a:hover{opacity:1}
.btn{background:var(--primary);color:var(--btntx);padding:10px 18px;border-radius:8px;font-weight:600;text-decoration:none}

.toggle{cursor:pointer;font-size:18px;margin-left:10px; margin-top: 5px;}
.toggle::before{

}
 
.grid{position:absolute;bottom:0;left:0;width:100%;height:60%;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:40px 40px;opacity:.3}

.section{padding:100px 8%;  min-height: 100vh; max-width: 1350px; margin: auto;}
.section h2{font-size:24px;color:var(--primary)}
.section p{color:var(--secondary);margin-top:10px}

.cta{display:flex;justify-content:space-between;align-items:center;margin-top:60px;flex-wrap:wrap;gap:40px}
.footer-col{max-width: 24%;}
footer{background:var(--footer);color:var(--footer-text);padding:60px 8%;margin-top:100px}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px}
.footer-col h4{color:#fff;margin-bottom:10px}
.footer-col p{font-size:14px;margin-bottom:6px}
.ex1-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ex1-footer-list li a {
  color: #dbe7ff;
  text-decoration: none;
  font-size: 14px;
}

.ex1-social-icons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 21px;
}

.ex1-social-icons a {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.ex1-social-icons a .svg_icon, .ex1-social-icons a svg {
  display: block;
  height: 100%;
  width: 100%;
}

h3{
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 10px;
}
h4{
  font-weight: 600;
  font-size: 20px;
}
nav{
  display: flex;
  align-items: center;
}

#darkIcon {
  display: none;
}

.toggle img {
  width: 24px;
  cursor: pointer;
}

.dropdown { position: relative; cursor: pointer; }

 .dropdown-content {
            display: none;
            position: absolute; 
            min-width: 130px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 12px 0;

    left: 0;
    top: 50px;
    background-color: var(--bg);
          }

          .dropdown:hover .dropdown-content {
            display: block; 
          }
          .dropdown:hover .drpc2 {
            display: block; 
            padding: 2px 16px;
            margin-top: 15px;
          }
          .menu__button-icon{
            width: 12px;
            stroke: var(--svgst);
          }
          .ic_div{
            display: flex;
            align-items: center;
            height: 200px;
          }
          .ic_div img{
            margin: 5px;
          }
          #darkLogo{
            display: none;
          }


@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

@media(max-width:900px){.hero{flex-direction:column;text-align:center}.features,.cta{flex-direction:column;text-align:center}}
@media(max-width:700px){ 
  .logo img{ width: 90px !important; }
  .w-100{
    width: 100% !important;
    max-width: 100% !important;
  }
  
}
table{
  margin-top: 10px;
}

table td {
  padding: 15px;
  border: 1px solid var(--footer-text);
}
  table th{
  padding: 15px;
  border: 1px solid var(--footer-text);
}
.tab{
  cursor: pointer;
  padding:10px 20px;
  margin:80px 2px 0; 
  display:inline-block; 
  border-radius:3px 3px 0px 0px;
  /* box-shadow: 0 0.5rem 0.8rem #00000080; */
}
.panels{ 
  min-height:200px;
  width:100%; 
  border-radius:3px;
  overflow:hidden;
  padding:0px;  
  border-top: 1px dashed #1f4b98 ;

}
.panel{
  display:none;
  animation: fadein .8s;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.panel-title{
  font-size:1.5em;
  font-weight:bold
}
.radio{
  display:none;
}
#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel,
#three:checked ~ .panels #three-panel{
  display:block
}
#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab,
#three:checked ~ .tabs #three-tab{
  background:#1f4b98;
  color:#ffffff;
  border-top: 0px solid #000;
  border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}


.userBox{
  width: 46%; margin: 20px 2%; padding: 20px; font-size: 18px; border: 2px solid var(--secondary); border-radius: 15px; background-color: var(--footer-text);
}
.userBox > a{
  display: flex; justify-content: left; color:var(--bg); 
}

@media (max-width: 600px) {
  .tab{ 
  padding:10px 7px; 
  font-size: 14px;
  }
  .panels {
    padding: 0;
  }
  .userBox{
    font-size: 14px; 
  }
  .userBox > a img{
    display: none;
 }
}