html{
  height: 100%;
  scroll-behavior: smooth; 
}

/* Apply Montserrat to headings */
/* h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; 
}

body, p, span, a, li {
  font-family: 'Roboto', sans-serif;
  font-weight: 400; 
} */


/* Apply Poppins to headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700; /* Bold for strong headings */
}

/* Apply Lato to body text */
p, span {
  font-family: 'Lato', sans-serif;
  font-weight: 700; /* Regular weight */
}




.container{
  max-width: 77rem !important;
}
li .dropdown-menu a{
  text-decoration: none;
}

/* width */
::-webkit-scrollbar {
  width: 8px;
}



/* Handle */
::-webkit-scrollbar-thumb {
  background: #000; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(126 124 124); 
}
.row{
  margin: 0;
}
.blue-border-style
{
  color: #1e3caf;background: linear-gradient(90deg, rgb(86 122 255 / 36%) 28%, rgba(255, 252, 252, 1) 100%);padding-left: 5px;
}
.menu{
  padding: 15px 0;
}
.navbar-nav{
  gap: 20px;
}
.navbar .nav-link{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}
.here-section .menu{
  width: 100%;
  background: #0d0425;
}

#page .here-section{

  width: 100%;
  height: 100% !important;
  overflow: hidden;
  background: url('https://www.secunnix.com/assets/sub_header.jpg') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  padding-top: 1rem;
  position: relative;
}


.here-section h6{
  margin-bottom: 0;
}

.contact-section
{
  background-image: url('assets/images/contact/contactus.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.contact-section input{
  padding:18px;
  background-color: #f7f7f7;
}

.contact-section textarea{
  padding:18px;
  background-color: #f7f7f7;
}

.sectors .card {
  height: 485px;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
}
.sectors img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 200ms ease-in-out transform, 200ms ease-in-out filter;
}

.sectors .content {
  position: absolute;
  transform: translate(150%, 0%);
  background-color: #211c3de8;
  padding: 2rem 1rem;
  color: #fff;
  height: 100%;
  transition: 200ms ease-in transform;
  display: grid;
  justify-items: start;
  align-content: center;
}
.sectors h2 {
  text-shadow: 0 0 .5rem rgba(0, 0, 0, .5);
  margin-bottom: 10px;
}
.sectors .line {
  width: 70px;
  height: 5px;
  background-color: #fff;
  margin-bottom: 10px;
}
.sectors p {
  font-size: .9rem;
  text-shadow: 0 0 .2rem rgba(0, 0, 0, .2);
  margin-bottom: 1rem;
}
.sectors button {
  padding: .3rem 1.5rem;
  background-color: transparent;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid #fff;
  color: #fff;
  border-radius: .5rem;
  cursor: pointer;
  transition: 200ms ease-in-out background-color,
              200ms ease-in-out color;
}
.sectors button:hover {
  background-color: #fff;
  color: rgba(169, 101, 0, .8);
}

.sectors .card:hover .content {
  transform: translate(0,0%);
  width: 100%;
  display: grid;
  justify-items: start;
  align-content: center;
}




/* Footer */

footer{
  background: #0d0425;
  margin-top:50px;
}
footer .logo-section{
  padding:35px 0;
}
footer .copyright-section{
  padding:25px 0;
  text-align: center;
  background: var(--rg-gradient-a, linear-gradient(120deg, #0d0425 20.08%, #282445 75.81%));
  margin-top: 35px;
}
footer .footer-content .heading{
  font-size: 1.3rem !important;
  margin-bottom: 15px;
  font-weight: 600;
}
footer .footer-content .list-item{
  font-size: 1.1rem;
  font-weight: 400;
  padding-bottom:3px;
}
 






.footer-company-logos img{
  filter: grayscale(1);
}
.footer .social-icon{
  display: flex;
  gap: 30px;
  align-items: center;
  font-size: 30px;
}

.footer .quick-menu{
  padding-left:40px;
}


.footer .quick-menu ul li a{
  color:#fff;
  text-decoration:none;
}
.icon div{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom:15px;
}
.icon div p{
  margin:0;
  font-size: 18px;
}


/* Scroll-to-Top Button Styles */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #1e3caf;
  color: white;
  border: none;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  /* transition: opacity 0.3s ease, transform 0.3s ease; */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Add smooth transition */

}

.scroll-to-top:hover {
  background-color: #0056b3;
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);

}

.scroll-to-top i {
  font-size: 20px;
}


.desktop-icons{
  display: block ;
}
.mobile-icons{
  display: none !important;
}

.footer-company-logos img{
 width: auto !important;
}
.offcanvas-mobile-menu{
  top: 0px;
  transform: translateX(0px);
  overflow: hidden;
  width: 100%;
  backdrop-filter: blur(20px) !important;
  background: #0d042575 !important;
  border-radius:  0;
  padding: 10px;
}
@media screen and (max-width: 991px) {
    .mobile-service-image-width,.footer-company-logos img{
      width: 100% !important;
    }
}


@media screen and (max-width: 768px) {
  .navbar{
    display: none !important;
  }
  .mobile-menu li a{
    text-decoration: none !important;
  }
  .mobile-menu-li{
    padding: 10px;
  }

  .menu .row{
    padding:0 20px !important;
    margin: 0;
  }
  .menu .logo{
    padding: 0 !important;
  }



  .mobile-d-none{
    display: none !important;
  }
  .top-bar{
    display: none !important;
  }
  .desktop-icons{
    display: none !important;
  }
  .mobile-icons{
    display: flex !important;
  }
  .here-section .top-bar .no-border{
    border:none !important
  }
  #bannertitle2{
    font-size: 65px !important;
  }
  .here-section .banner-text{
    padding:100px 20px 150px 20px !important;
  }



  .about-section {
    padding: 25px !important;
  }

  .our-priority{
    height: 100% !important;
    padding: 50px 0;
  }
  .our-priority p br {
    display: none;
  }

  .services-section{
    padding:60px 10px !important;
  }
  .services-section .col-lg-6{
    padding:0 !important;
  }
  .services-section button , .contact-section a div{
    width: 100% !important;
  }
  .contact-section a div{
    margin-bottom: 10px;
  }

  .mobile-service-image-width{
    width: 100%;
  }

 


  .footer .quick-menu{
    padding-left:10px;
    padding-top:25px;
  }
}


.sectors2 .card {
  height: 485px;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
}
.sectors2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 200ms ease-in-out transform, 200ms ease-in-out filter;
}
.sectors2 .card {
  padding: 2rem 1rem;
  color: #fff;
  height: 100%;
  display: grid;
  justify-items: start;
  align-content: end;
}
.sectors2 .card:hover {
 
  background-color: #0000007a !important;
  padding: 2rem 1rem;
  width: 100% !important;
  color: #fff;
  height: 100%;
  transition: 200ms ease-in transform;
  display: grid;
  justify-items: start;
  align-content: end;
}


.sectors2 .card h2 {
  font-size: 34px !important;
  text-shadow: 0 0 .5rem rgba(0, 0, 0, .5);
  margin-bottom: 10px;
}
.sectors2 .line {
  width: 70px;
  height: 5px;
  background-color: #FF9800;
  margin-bottom: 10px;
}
.sectors2 p {
  font-size: .9rem;
  text-shadow: 0 0 .2rem rgba(0, 0, 0, .2);
  margin-bottom: 1rem;
}
.sectors2 button {
  padding: .3rem 1.5rem;
  background-color: transparent;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid #fff;
  color: #fff;
  border-radius: .5rem;
  cursor: pointer;
  transition: 200ms ease-in-out background-color,
              200ms ease-in-out color;
}
.sectors2 button:hover {
  background-color: #fff;
  color: rgba(169, 101, 0, .8);
}

.sectors2 .card:hover .content {
  transform: translate(0,0%);
  width: 100%;
  display: grid;
  justify-items: start;
  align-content: center;
}



.privacy{
  background: black;
    height: 350px;
}
.privacy-contant{
  text-align: center;
    padding-top: 120px;
    color: white;
}
.privacy-contant h1{
  font-size: 65px;
  font-weight: 500;
}
.privacy-contant p{
  font-size: 16px;
  font-weight: 500;
}
.list-style li{
 list-style: none;
 padding-left: 25px !important;
 padding-bottom: 12px;
 padding-top: 16px;
 border-left: 3px solid;
 border-color: rgba(0, 0, 0, 0.26);

}
.list-style li:hover{
  border-left:3px solid black;
  padding-top: 23px;
}
.list-style a{
 text-decoration: none;
 color: #3e3e3e;
 font-size: 18px;
 font-weight: 500;

}

.table-contant{
 position: sticky;
 top: 50px;
}


@media screen and (max-width: 768px) {
  .table-contant {
    margin-bottom: 50px;
    background: #eee;
    padding: 24px;
    border-radius: 10px;
  }
}