@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css');

html, body{
    width:100%;
    min-height:100%;
    margin:0;
    padding: 0; 
    background-color: #f9f9f9;
    font-family: "Poppins", sans-serif;
    font-size: 105%;
    line-height:1.5;
}
.py-6{padding-top: 6% !important; padding-bottom: 6% !important;}
.py-7{padding-top: 7% !important; padding-bottom: 7% !important;}
.header{position:fixed; top:0; left:0; z-index: 999; width:100%; height:60px; padding:2px 10px; background-color: #03030352; color: #eee;}
.logo img{ height:60px;}
.head-nav{ display: block; text-align: right; width: 100%;}
.head-nav ul{ display: inline-block; text-align: right; list-style-type: none;}
.head-nav ul li{display: inline-block; margin: 0 5px;}
.head-nav ul li a{ display: block; padding: 15px 20px 5px; text-decoration: none; color: #eee; font-size: 1rem;}
.head-nav ul li a:hover{ display: block; padding: 15px 20px 5px; text-decoration: none; color: #f3c809;}

.section, .hero-section{
    position: relative;
    padding: 4% 0;
    width: 100%;
    background-color:#f9f9f9;
    background-position: center;
    background-size: cover;
}
.hero-section{
    background-color: #11111134;
    height:100vh;
    background-blend-mode: darken;
    background-attachment: fixed;
}

.c-title-1, .c-title-2, .c-title-3, .c-title-4{
    color: #034EA2;
    font-size: clamp(1.4rem, 6vw, 4rem);
    font-weight: 600;
}
.c-title-2{
    font-size: clamp(1.2rem, 4vw, 3rem);
}
.c-title-3{
    font-size: clamp(1rem, 3vw, 2rem);
}
.c-title-4{
    font-size: clamp(.9rem, 2vw, 1.4rem);
}
.c-caption{color: #ED6F00; font-size: clamp(1rem, 2vw, 1.3rem); padding:10px;}
.cont-box{padding:1% 10px; margin: 10px 0; width:100%;}
.cont-box p{line-height:1.6; padding: 5px 10px;}
.cont-img, .bg-img-box{position:relative; width:100%; padding:5% 10px; margin: 20px 0; border-radius: 15px; background-color: #e9e9e9; background-position: center; background-size: cover; text-align: center; min-height:300px; line-height:300px; overflow:hidden;}
.bg-img-box .skin{position:absolute; top:0; left:0; width:100%; height:100%; background-color: #034da2ef; transition: all .5s ease-in-out; }
.bg-img-box:hover .skin{position:absolute; top:0; left:0; width:100%; height:100%; background-color: #02326842; transition: all .5s ease-in-out; }
.c-btn{ text-align:center; color:#fff; background-color: #034EA2; padding:7px 20px; border: 2px solid #0459b9; border-radius:3px; display: inline-block; text-decoration: none; transition: all .5s ease-in-out; }
.c-btn:hover{ text-align:center; color:#fff; background-color: #1764bb; text-decoration: none; transition: all .5s ease-in-out; }
.center-items{
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
}

.c-box{
    background:#00AFAA;
    color: #fff;
    transition:all 0.5s ease-in-out;
    overflow:hidden;
    box-shadow:-5px 5px 16px #bdbcbc;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 15px;
}
.c-box .title{padding:10px; font-weight:600; font-size: 1.2rem;}
.c-box p{padding:10px; font-weight:300; font-size: 1rem;}

.flexy{display:flex;}
.flex1{
    display:inline-flex;
    width:150px;
    flex:1;
    min-height: 300px;
    background:#f4f5f4;
    border:1px solid rgb(216, 215, 215);
    transition:all 0.5s ease-in-out;
    overflow:hidden;
    box-shadow:-5px 5px 16px #bdbcbc;
    border-radius: 17px 0 0 17px;
    margin-right: -35px;
    padding: 20px;
}
.flex1:last-child{
    border-radius: 17px;
}
.flex1 .w-300{min-width:400px; max-width:400px; padding:20px;}
.flex1 .w-300 ul{font-size: .8rem; padding:10px 20px;}
.flex1 .w-300 ul li{padding-bottom:6px;}
.flex1:hover{
    flex:1.5;
    transition:all 0.5s ease-in-out;
}

.login-logo img{ height:70px;}
/* ------------- */
/* --------progress bar ------ */
.timeline{text-align:center; margin-bottom: 10px;}
.timeline h5{font-size: 1rem; color: #333; margin-top: 7px;}
.timeline h6{font-size: .8rem; color:#ED6F00;}
progress[value] {
    --background: 
      radial-gradient(50% 50%,var(--c) 98%,#0000) top/10% 10% no-repeat,
      conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); 
  
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--background);
    -webkit-mask: radial-gradient(50% 50%,#0000 79%,#000 80% 100%,#0000 102%)
  }
  progress[value]::-webkit-progress-bar {
    background: var(--background);
  }
  progress[value]::-webkit-progress-value {
    background: #0000;
  }
  progress[value]::-moz-progress-bar {
    background: #0000;
  }
  
  .label {
    --w: 160px;    /* the width*/
    --c: #31c6f7;  /* the color */
    
    font-size: 20px;
    font-weight: bold;
    display: inline-grid;
    place-content: center;
    width: var(--w);
    aspect-ratio: 1;
    position: relative;
  }
  .label::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 45%;
    background: var(--c);
    transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
  }
/* --------------------------- */
.left-border{
    padding: 15px 20px;
    display: block;
    border-left: 3px solid #034EA2;
}
.left-border h5{color: #ED6F00; margin: 5px 0; font-size: 1.1rem;}
.left-border h6{margin: 5px 0; font-size: 1rem;}
.left-border p{padding: 5px 0; font-size: .9rem;}
/* --------------------------- */
.features {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}
.flex-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}


/* -------- */
.nav-link{
    background-color: #eee;
    color: #222;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 12px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #034EA2;
}
.tab-pane{padding: 15px 20px;}
/* -------- */
.card-body .captn{font-size:.8rem; color:#555;}
.card-title{font-weight: 600;}
.card-text{font-size: .9rem;}
/* ------------------- */
.accordion-item, .accordion-item:first-of-type, .accordion-item:last-of-type {
    margin-bottom: 20px;
    border-radius: 20px;
    overflow: hidden;
}
/* ------------------- */
.left-stack-border{border-left: 4px solid #ddd; padding:5px 0; transition:all .5s ease-in-out;}
.left-stack-border:hover{border-left: 4px solid #ecb707; padding:5px 0; transition:all .5s ease-in-out;}
.left-stack-border h4{padding:0 20px; font-size: 1.2rem; transition:all .5s ease-in-out;}
.left-stack-border:hover h4{padding:0 20px; font-size: 1.24rem; font-weight: 700; transition:all .5s ease-in-out;}
.left-stack-border p{padding:0 20px; font-size: .8rem;}
/* ----------------------- */
.footer{position:relative;  width:100%; min-height:260px; padding:4% 10px; background-color: #1a488e; color: #eee;}
.footer-inner ul{list-style-type: none;}
.footer-inner ul li a{text-decoration: none; color:#fff; display:block; padding:4px 6px; transition: all .5s ease-in-out;}
.footer-inner ul li a:hover{text-decoration: none; color:#ecb707; display:block; padding:4px 6px; transition: all .5s ease-in-out;}
/* --------------------------- */
@media(max-width: 768px){
    .features{display: block;}
    .flex-box{display: block;}
    .flexy{display:block;}
    .flex1{
        display:block;
        width:100%;
        flex:1;
        min-height: 300px;
        background:#f4f5f4;
        border:1px solid rgb(216, 215, 215);
        transition:all 0.5s ease-in-out;
        overflow:hidden;
        box-shadow:-5px 5px 16px #bdbcbc;
        border-radius: 17px 17px;
        margin-right: 0;
        margin-bottom:10px;
    }
    .flex1 .w-300{min-width: 90%; max-width:100%; padding:20px;}
}