/* Green #78a048 */

 /* yellow #f6ee8f */

 /* dark #122017 */



 :root {

   --color-primary: black;

   --color-accent: #2461b1;

   /* --color-secondary: #78a048; */



 }



 .header {

   background-color: transparent;

   /* background-color: #ffffff; */

 }



 /* .navbar .navbar-brand{

    background-color: var(--color-accent);

 } */



 .navbar .navbar-brand img {

   width: 50px;

 }



 .navbar ul li {

   padding-left: 16px;

   padding-right: 16px;

 }



 .navbar ul li a {

   color: #ffffff;

   /* font-family: "Outfit", sans-serif; */

   font-size: 14px;

   text-transform:capitalize;

   font-weight: 500;

   padding-left: 20px !important;

   padding-right: 20px !important;

 }

  @media screen and (max-width:990px) {

  .navbar-nav .nav-link{

     color: #000;

  }

  

 }

 @media screen and (max-width:768px) {

  .navbar-nav .nav-link{

     color: #000;

  }

  

 }



 .navbar ul li a.nav-link:focus {

   color: white !important;

 }





 .navbar ul li a.nav-link:hover {

   color: #ffffff;

   background-color: var(--color-accent);

 }



 .navbar .login-btn a {

   background-color: #164222;

   padding-left: 25px !important;

   padding-right: 25px !important;

 }



 body {

   font-family: "Inter", sans-serif;

   /* color: #134224; */





 }



 .main-bg {



   /* background-image: url(assets/images/background.jpg); */

   background-image: url("<?= base_url('assets/images/background.jpg'); ?>");

   background-image: url("<?= base_url('assets/images/f-background.jpg'); ?>");

   /* background-image: url(../images/ff-background.jpg); */

   background-repeat: no-repeat;

   background-size: cover;

   /* background-position: center center ; */

   /* background-size: auto 80%; */

   /* background-size: cover; */

   /* height: 150vh; */

   /* max-height: 100vh; */

   height: auto;

   position: relative;

   z-index: 1;



 }



 @media (min-width: 769px) and (max-width:1440px) {

   .main-bg {

     height: 180vh;

   }

 }



 @media (max-width: 576px) {

   .navbar-nav .nav-link {

     color: black;

   }



   .navbar ul li a {

     padding-left: 0px !important;

   }



   main {

     position: relative !important;

     height: auto !important;



   }



   .main-bg {

     background-size: cover;

     overflow: hidden;

     background-position: center;

   }



   .tab-des {

     padding-left: 0;

   }



   .col-md-7.tab-des {

     margin-bottom: auto !important;

   }



   .en-title-logo {

     height: 25% !important;

     padding: 0px 25px !important;

     padding-top: 20px !important;

   }



   .en-title-logo h4 {

     font-size: 22px;

   }



   .en-title-logo p {

     font-size: 14px;

   }



  



 }



 .overlay {

   position: absolute;

   top: 0;

   left: 0;

   height: 100%;

   width: 100%;

   /* background-color: #1933228e; */

   opacity: 0.8;

   /* z-index: 0; */

 }



 .col-md-7.tab-des {

   margin-bottom: -130px;

   box-shadow: 1px 1px 6px 1px rgba(158, 157, 157, 0.705);

   padding-left: 0;

 }



 .tab-des {

   z-index: 55;

   padding-right: 0;

 }



 .en-title-logo {

   background-color: var(--color-accent);

 }



 .en-title-logo h4 {

   font-family: "Sofia Sans Extra Condensed", sans-serif;

   font-size: 29px;

 }



 .en-title-logo .cond-text p {

   font-family: "Sofia Sans Extra Condensed", sans-serif;

   line-height: 15px;

 }



 .sec-1 h4 {

   color: var(--color-accent);

 }



 .sec-1 p {

   line-height: 16px;

   font-size: 13px;

 }



 .donut-wrapper {

   /* max-width: 450px; */

   /* margin: auto; */

   margin-top: 150px;

   /* transform: translateY(130px); */

   /* padding-right: 41px; */

 }



 svg {

   width: 100%;

   height: auto;

   /* transform: rotate(-90deg); */

   box-shadow: 12px 33px 10px solid red;

   /* Start from top */

 }



 svg text {

   cursor: pointer;

 }



 path.slice {

   cursor: pointer;

   transition: fill 0.3s ease;

 }



 path.slice:hover {

   fill-opacity: 0.8;

 }







 .tab-content-box {

   display: none;

   background-color: white;

   z-index: 999;

 }



 .tab-content-box.active {

   display: block;

 }



 .tab-products-sec>h6 {

   color: var(--color-accent);

 }





 .tab-products-sec .view-more a.btn {

   background-color: var(--color-accent);

   color: #ffffff;

   font-size: 13px;

 }



 .tab-products-sec .view-more a.btn:hover {

   background-color: #387cd4;

   /* color: #fff; */

 }



 



 /* .products .card img:hover{

    transform: scale();

 } */



 .products .card-text {

   font-size: 12px;

   line-height: 15px;

   /* color: #fff; */

 }



 .products .card-body a.btn {

   font-size: 13px;

   /* color: #fff; */

 }



 .products .card .rating i {

   font-size: 12px;

 }



 .sec-break {

   border: none;

   height: 2px;

   background-image: repeating-linear-gradient(to right,

       blue 0,

       blue 4px,

       transparent 4px,

       transparent 6px);

   margin: 20px 0 0 0;

 }



 .sec-3 .heading h6 {

   color: var(--color-accent);

 }



 


 .services-box .card {

   /* background-color: var(--color-secondary); */

   background-color: transparent;

   /* color: #ffffff; */

 }



 .services-box .card-text {

   font-size: 12px;

   line-height: 15px;

 }



 .services-box .card .card-body i {

   top: -25px;

   padding: 8px 13px;

   color: var(--color-primary);

   background-color: var(--color-accent);

   font-size: 18px;

 }





 .all-tab-services .view-more a.btn {

   background-color: var(--color-accent);

   color: #ffffff;

   font-size: 13px;

 }



 .all-tab-services .view-more a.btn:hover {

   background-color: #387cd4;





 }



 .count-box>p {

   font-weight: 400;

   color: var(--color-accent);

 }



 .count-box-text {

   font-weight: 700;

   margin-top: -15px;

 }



 .footer-wrapper a {

   color: var(--color-primary);

 }



 .footer-wrapper li a {

   font-size: 12px;

 }



 /* ========================= */



 .carousel-wrapper {

   position: relative !important;

 }





 .owl-carousel .owl-nav button.owl-next,

 .owl-carousel .owl-nav button.owl-prev,

 .owl-carousel button.owl-dot {

   background: 0 0;

   color: var(--color-primary) !important;

   border: none;

   /* padding: 0 !important; */

   font-size: 45px !important;

   font: inherit;

 }



 .owl-carousel.services-carousel .owl-nav .owl-prev,

 .owl-carousel.services-carousel .owl-nav .owl-next {

   /* background-color: #007bff;    */

   color: white;

   border: none;

   /* padding: 20px 15px; */

   /* border-radius: 50%; */

   font-size: 40px;

   /* transition: background 0.3s ease; */

 }



 /* .owl-theme .owl-nav [class*=owl-]:hover{

    background-color: none;

}



.owl-carousel .owl-nav button.owl-prev:hover,

.owl-carousel .owl-nav button.owl-next:hover {

  background-color: transparent; 

  color: #fff;               

}



.owl-carousel .owl-nav {

  position: absolute;

  top: 35%;

  width: 100%;

  display: flex;

  justify-content: space-between;

  pointer-events: none; 

}



.owl-carousel .owl-nav button {

  background-color: #000;

  color: #fff;

  border: none;

  padding: 10px 15px;

  border-radius: 50%;

  pointer-events: all; 

} */



 /* font-size: 40px; */

 /* background-color: red; */



 /* .owl-carousel .owl-nav button.owl-prev {

  margin-left: -15px;

}



.owl-carousel .owl-nav button.owl-next {

  margin-right: -15px; 

} */







 .cursor-dot,

 .cursor-ring {

   position: fixed;

   top: 0;

   left: 0;

   pointer-events: none;

   border-radius: 50%;

   transform: translate(-50%, -50%);

   z-index: 9999;

 }





 .cursor-dot {

   width: 8px;

   height: 8px;

   background: yellow;

 }





 .cursor-ring {

   width: 32px;

   height: 32px;

   border: 2px solid yellow;

   background: transparent;

 }







 /* Tab list */

 .cn-button {

   position: absolute;

   top: 14%;

   left: 44%;

   z-index: 11;

   margin-top: 9em;

   margin-left: -2em;

   padding: 0;

   width: 7em;

   height: 7em;

   border: none;

   border-radius: 50%;

   background: none;

   background-color: #fff;

   color: var(--theme);

   text-align: center;

   font-weight: 700;

   font-size: 1.0em;

   text-transform: uppercase;

   cursor: pointer;

   -webkit-backface-visibility: hidden;

   transition: transform 0.3s ease, background-color 0.3s ease;

 }



 .csstransforms .cn-wrapper {

   position: absolute;

   top: 100%;

   left: 50%;

   z-index: 10;

   margin-top: -13em;

   margin-left: -13.5em;

   width: 27em;

   height: 27em;

   border-radius: 50%;

   background: transparent;

   opacity: 0;

   -webkit-transition: all .3s ease 0.3s;

   -moz-transition: all .3s ease 0.3s;

   transition: all .3s ease 0.3s;

   -webkit-transform: scale(0.1);

   -ms-transform: scale(0.1);

   -moz-transform: scale(0.1);

   transform: scale(0.1);

   pointer-events: none;

   overflow: hidden;

 }



 /*cover to prevent extra space of anchors from being clickable*/

 .csstransforms .cn-wrapper:after {

   content: ".";

   display: block;

   font-size: 2em;

   width: 6.2em;

   height: 6.2em;

   position: absolute;

   left: 50%;

   margin-left: -3.1em;

   top: 50%;

   margin-top: -3.1em;

   border-radius: 50%;

   z-index: 10;

   color: transparent;

 }



 .csstransforms .opened-nav {

   border-radius: 50%;

   opacity: 1;

   -webkit-transition: all .3s ease;

   -moz-transition: all .3s ease;

   transition: all .3s ease;

   -webkit-transform: scale(1);

   -moz-transform: scale(1);

   -ms-transform: scale(1);

   transform: scale(1);

   pointer-events: auto;

 }



 .cn-wrapper ul {

   position: relative;

   list-style: none;

   margin: 0;

 }



 .cn-wrapper li {

   position: absolute;

   top: 50%;

   left: 50%;

   overflow: hidden;

   margin-top: -1.3em;

   margin-left: -10em;

   width: 10em;

   height: 10em;

   font-size: 1.5em;

   -webkit-transition: all .3s ease;

   -moz-transition: all .3s ease;

   transition: all .3s ease;

   -webkit-transform: rotate(60deg) skew(60deg);

   -moz-transform: rotate(60deg) skew(60deg);

   -ms-transform: rotate(60deg) skew(60deg);

   transform: rotate(60deg) skew(60deg);

   -webkit-transform-origin: 100% 100%;

   -moz-transform-origin: 100% 100%;

   transform-origin: 99% 100%;

   pointer-events: none;

 }



 .cn-wrapper li a {

   position: absolute;

   right: -7.25em;

   bottom: -7.25em;

   display: block;

   width: 14.5em;

   height: 14.5em;

   /* border-radius: 50%; */

   -moz-box-sizing: border-box;

   box-sizing: border-box;

   background: #429a67;

   color: #fff;

   text-align: center;

   text-decoration: none;

   font-size: 1.1em;

   line-height: 2;

   -webkit-transform: skew(-30deg) rotate(-60deg) scale(1);

   -moz-transform: skew(-30deg) rotate(-60deg) scale(1);

   -ms-transform: skew(-30deg) rotate(-60deg) scale(1);

   transform: skew(-31deg) rotate(-60deg) scale(1);

   -webkit-backface-visibility: hidden;

   backface-visibility: hidden;

   pointer-events: auto;

 }



 .opened-nav li a {

   background-color: blueviolet;

 }



 .cn-wrapper li a span {

   position: relative;

   top: 1em;

   display: block;

   font-size: .9em;

   font-weight: 700;

   text-transform: uppercase;

 }



 .cn-wrapper li a:hover,

 .cn-wrapper li a:active,

 .cn-wrapper li a:focus {

   opacity: 0.8;

 }



 .cn-wrapper li a:focus {

   position: fixed;

   /* fix the displacement bug in webkit browsers when using tab key */

 }



 .opened-nav li {

   -webkit-transition: all .3s ease .3s;

   -moz-transition: all .3s ease .3s;

   transition: all .3s ease .3s;

 }



 .opened-nav li:first-child {

   -webkit-transform: rotate(0deg) skew(30deg);

   -moz-transform: rotate(0deg) skew(30deg);

   -ms-transform: rotate(0deg) skew(30deg);

   transform: rotate(0deg) skew(31deg);

 }



 .opened-nav li:nth-child(2) {

   -webkit-transform: rotate(12deg) skew(30deg);

   -moz-transform: rotate(12deg) skew(30deg);

   -ms-transform: rotate(12deg) skew(30deg);

   transform: rotate(60deg) skew(31deg);

 }



 .opened-nav li:nth-child(3) {

   -webkit-transform: rotate(44deg) skew(30deg);

   -moz-transform: rotate(44deg) skew(30deg);

   -ms-transform: rotate(44deg) skew(30deg);

   transform: rotate(120deg) skew(31deg);

 }



 .opened-nav li:nth-child(4) {

   -webkit-transform: rotate(76deg) skew(30deg);

   -moz-transform: rotate(76deg) skew(30deg);

   -ms-transform: rotate(76deg) skew(30deg);

   transform: rotate(180deg) skew(31deg);

 }



 .opened-nav li:nth-child(5) {

   -webkit-transform: rotate(108deg) skew(30deg);

   -moz-transform: rotate(108deg) skew(30deg);

   -ms-transform: rotate(108deg) skew(30deg);

   transform: rotate(240deg) skew(31deg);

 }



 .opened-nav li:nth-child(6) {

   -webkit-transform: rotate(140deg) skew(30deg);

   -moz-transform: rotate(140deg) skew(30deg);

   -ms-transform: rotate(140deg) skew(30deg);

   transform: rotate(300deg) skew(31deg);

 }



 .no-csstransforms .cn-wrapper {

   overflow: hidden;

   margin: 10em auto;

   padding: .5em;

   text-align: center;

 }



 .no-csstransforms .cn-wrapper ul {

   display: inline-block;

 }



 .no-csstransforms .cn-wrapper li {

   float: left;

   width: 5em;

   height: 5em;

   background-color: #fff;

   text-align: center;

   font-size: 1em;

   line-height: 5em;

 }



 .no-csstransforms .cn-wrapper li a {

   display: block;

   width: 100%;

   height: 100%;

   color: inherit;

   text-decoration: none;

 }



 .no-csstransforms .cn-wrapper li a:hover,

 .no-csstransforms .cn-wrapper li a:active,

 .no-csstransforms .cn-wrapper li a:focus {

   background-color: #f8f8f8;

 }



 .no-csstransforms .cn-wrapper li.active a {

   background-color: #6F325C;

   color: #fff;

 }



 .no-csstransforms .cn-button {

   display: none;

 }



 @media only screen and (max-width: 620px) {

   .no-csstransforms li {

     width: 4em;

     height: 4em;

     line-height: 4em;

   }

 }



 @media only screen and (max-width: 500px) {

   .no-ccstransforms .cn-wrapper {

     padding: .5em;

   }



   .no-csstransforms .cn-wrapper li {

     width: 4em;

     height: 4em;

     font-size: .9em;

     line-height: 4em;

   }

 }



 @media only screen and (max-width: 480px) {

   .csstransforms .cn-wrapper {

     font-size: .68em;

   }



   .cn-button {

     font-size: 1em;

   }

 }



 @media only screen and (max-width:420px) {

   .no-csstransforms .cn-wrapper li {

     width: 100%;

     height: 3em;

     line-height: 3em;

   }

 }



 @media (max-width: 576px) {

   .donut-wrapper {

     /* overflow-x: hidden; */

     height: 80vh;

     margin-top: 20px;

   }



   .cn-wrapper li a {

     width: 13.5em;

     height: 13.5em;

     font-size: 0.96em;

     /* bottom: 8.25em; */

   }



   .count-box {

     display: flex;

     flex-direction: column;

     justify-content: center;

     align-items: center;

   }



   .count-box .display-4 {

     font-size: 90px;

   }



   .count-box-text {

     margin-top: -16px;

     font-size: 20px;

   }



   .cn-button {

     position: absolute;

     top: 10%;

     left: 46%;

     z-index: 11;

     margin-top: 10em;

     margin-left: -2em;

     padding: 0;

     width: 5.5em;

     height: 5.5em;



   }



   .cn-wrapper li {

     left: 51%;

     /* margin-top: -2.3em; */

   }



   .navbar-toggler {

     margin-right: 6px;

   }



   .navbar-toggler:focus {

     outline: none;

     box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.575);

   }



   footer .container-fluid .container-fluid {

     display: flex;

     justify-content: center;

     align-items: center;

     padding-bottom: 0px !important;

   }



 }







 .custom-offcanvas {

   background-color: white !important;

   /* height: auto !important; */

   /* max-height: 100vh; Prevent overflow */

   /* top: 0;

  bottom: auto; 

  box-shadow: none; 

  border: none;  */

   /* width: fit-content;  */

 }



 .offcanvas-backdrop.show {

   background-color: rgba(0, 0, 0, 0.3);

 }







 .tab-pane {

   transition: opacity 0.4s ease-in-out;

 }



 .tab-content-box {

   transition: opacity 0.4s ease-in-out;

 }









 /* ============================== About Page ======================= */

 .about-section {

   background-image: url(../images/about.jpg);

   /* background-size: bottom  center 100%; */

   background-size: cover;

   background-position: center;
   background-attachment: fixed;
   height: 100%;

 }



 .about-hero-section {

   margin-top: 55px;



 }



 .hero-content h1 {

   color: white;

 }



 .hero-content .lead {

   color: white;

 }



 .timeline-line {

   position: absolute;

   left: 50%;

   top: 0;

   bottom: 0;

   width: 2px;

   background: #dee2e6;

   transform: translateX(-50%);

 }



 .timeline-dot {

   position: absolute;

   top: 20px;

   width: 12px;

   height: 12px;

   background: var(--color-accent);

   border-radius: 50%;

   /* color: #2461b1; */

   border: 3px solid white;

   box-shadow: 0 0 0 2px var(--color-accent);

 }



 .timeline-item:nth-child(even) .timeline-dot {

   right: -30px;

 }



 .timeline-item:nth-child(odd) .timeline-dot {

   left: -30px;

 }



 @media (max-width: 768px) {

   .timeline-line {

     left: 20px;

   }



   .timeline-dot {

     left: 14px !important;

   }



   .timeline-item .card .card-body p {

     font-size: 14px;

   }

 }



 section h2 {

   color: var(--color-accent);

 }



 .timeline-item .card {

   box-shadow: 1px 1px 6px 1px rgba(158, 157, 157, 0.705) !important;



 }



 .timeline-item .card .card-body h5 {

   color: var(--color-accent);

 }



 .stat-sec .row .card div {

   color: var(--color-accent);

 }



 .stat-sec .row .card div.display-4 {

   font-weight: 400;

 }





 .about-pg-btn a.btn {

   background-color: var(--color-accent);

   color: #ffffff;

   font-size: 16px;

 }



 .about-pg-btn a.btn:hover {

   background-color: #387cd4;



 }



 .call-to-action h3 {

   color: var(--color-accent);

 }





 /* =========================== COntact Page ======================= */

 .contact-section-1 {

   background-image:url("<?= base_url('assets/images/f-background.jpg'); ?>");

   background-size: cover;

   background-position: center;

 }



 @media (max-width: 768px) {
   .section-title h2 {

     font-size: 1.45rem !important;

   }



   #contactForm .form-label {

     font-size: 14px;

   }



   .form-select option {

     font-size: 14px;



   }



   #contactForm textarea::placeholder {

     font-size: 14px;



   }



   .contact-submit {

     text-align: center;

     margin-bottom: 20px;

   }

 }



 .contact-btn {

   background-color: var(--color-accent);

   color: #ffffff;

   font-size: 16px;

 }



 .contact-btn:hover {

   background-color: #387cd4;

   color: #ffffff;



 }





 .section-title {

   text-align: center;

   margin-bottom: 3rem;

 }



 .section-title h2 {

   font-weight: 700;

   font-size: 2.5rem;

   color: var(--text-primary);

   margin-bottom: 0.5rem;

 }



 .section-title p {

   color: var(--text-secondary);

   font-size: 1.1rem;

 }



 .map-container {

   border-radius: 8px;

   overflow: hidden;

   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

   border: 1px solid #eee;

 }



 .map-container iframe {

   width: 100%;

   border: none;

 }







 /* ============================ Pakages Page ============================ */



 /* Features List */

 .features-list {

   margin-bottom: 2rem;

 }



 .feature-item {

   display: flex;

   align-items: center;

   justify-content: space-between;

   padding: 0.75rem 0;

   border-bottom: 1px solid #dee2e6;

   transition: all 0.3s ease;

   padding-left: 10px;

   /* padding: 10px; */

   padding-right: 8px;

 }



 .feature-item:last-child {

   border-bottom: none;



 }



 .feature-item:hover {

   background: rgba(56, 56, 59, 0.05);

   margin: 0 -1rem;

   padding-left: 10px;

   /* padding: 10px; */

   padding-right: 8px;

   border-radius: 8px;

 }



 .feature-text {

   /* color: black; */

   font-weight: 500;

   /* font-size: 0.95rem; */

 }



 .feature-item .badge {

   font-size: 0.80rem;

   font-weight: 600;

   /* text-transform: uppercase; */

 }





 .card-header {

   text-align: center;

   margin-bottom: var(--spacing-lg);

 }



 @media (max-width: 768px) {



   .pricing-table .card-header h2 {

     font-size: 1.8rem !important;

     color: #ff264a;

     margin-bottom: var(--spacing-sm);

   }



   .section-title h2 {

     font-size: 2rem;

   }

 }





 .pricing-table .card-header h2 {

   font-size: 2.2rem;

   color: black;

   margin-bottom: var(--spacing-sm);

 }



 .pricing-table {

   z-index: 1;

   transition: transform 0.3s ease, box-shadow 0.3s ease;

   position: relative;



 }



 .pricing-table:hover {

   transform: scale(1.03);

   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

   /* Optional for depth */

 }





 .price-button {

   /* background-image: linear-gradient(276deg, #1a237e 0%, var(--color-accent) 100%); */

   transition: all 0.3s ease;

 }



 .price-button:hover {

   background-color: #2f75cf;

   color: white;

 }



 .pro-price-btn {

   display: block;

   color: #fff;

   margin-top: 2rem;

   padding: .75rem;

   border-radius: 2px;

   text-align: center;

   font-weight: 500;

   transition: .3s;

 }



 /* ======================== Login Page ========================= */



 .login-container {

   background: rgba(255, 255, 255, 0.95);

   backdrop-filter: blur(10px);

   border-radius: 20px;

   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

   overflow: hidden;

   /* margin: 25px; */

   transition: transform 0.3s ease;

 }



 .login-container:hover {

   transform: translateY(-5px);

 }



 .login-header {

   background: linear-gradient(135deg, #667eea 0%, #0077b5 100%);

   color: white;

   text-align: center;

   padding: 2rem;

 }



 .login-header i {

   font-size: 3rem;

   margin-bottom: 1rem;

   opacity: 0.9;

 }



 .login-form {

   padding: 2.5rem;

 }



 @media (max-width:786px) {

   .login-form {

     padding: 1.2rem;

   }



   .login-header {

     padding: 1rem;

   }



   .login-header i {

     font-size: 2.5rem;

   }

 }



 .form-floating {

   margin-bottom: 1.5rem;

 }



 .form-floating input {

   border: 2px solid #e9ecef;

   border-radius: 12px;

   transition: all 0.3s ease;

 }



 .form-floating input:focus {

   border-color: #667eea;

   box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);

 }



 .btn-login {

   background: #0077b5;

   border: none;

   border-radius: 12px;

   padding: 12px;

   font-weight: 600;

   letter-spacing: 0.5px;

   transition: all 0.3s ease;

   position: relative;

   font-size: 20px;

   overflow: hidden;

 }



 .btn-login:hover {

   transform: translateY(-2px);

   box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);

 }



 .btn-login:before {

   content: '';

   position: absolute;

   top: 0;

   left: -100%;

   width: 100%;

   height: 100%;

   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

   transition: left 0.5s;

 }



 .btn-login:hover:before {

   left: 100%;

 }





 .forgot-password {

   color: #667eea;

   text-decoration: none;

   font-weight: 500;

   transition: color 0.3s ease;

 }



 .forgot-password:hover {

   color: #764ba2;

 }



 .signup-link {

   background: #f8f9fa;

   border-radius: 12px;

   /* padding: 1.5rem; */

   margin-top: 2rem;

   text-align: center;

 }



 .signup-link p {

   font-size: 16px;

 }



 .signup-link a {

   color: #667eea;

   text-decoration: none;

   font-weight: 600;

 }



 .signup-link a:hover {

   color: #764ba2;

 }



 .input-group-text {

   background: transparent;

   border-right: none;

   color: #667eea;

 }



 .password-toggle {

   cursor: pointer;

   color: #6c757d;

   transition: color 0.3s ease;

 }



 .password-toggle:hover {

   color: #667eea;

 }



 .form-floating label {

   font-size: 15px;

 }



 @media (max-width:786px) {

   .remember-me label {

     font-size: 13px;

   }



   .remember-me a {

     font-size: 13px;

   }



   .btn-login i {

     font-size: 16px !important;

   }



   .btn-login {

     font-size: 16px !important;

   }



   .signup-link p {

     font-size: 14px;

   }

 }



 /* .nav-pills .nav-link.active{

  padding: 8px !important;

 } */

 .nav-pills .nav-link{
    width: max-content;
    height: min-content;
}