* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  outline: none;
  border: none;
  text-decoration: none;
  transition: .2s linear;
}

html{
  font-size: 67.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  overflow-x: hidden;
}

body{
  margin: 0;
  padding: 0;
  height: 100%;
}

section{
  padding: 2rem 9%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 73% 94%, 0 100%);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  padding: 1.2rem 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo {
  font-size: 2.2rem;
  color: #333;
  font-weight: 600;
  text-transform: none;
}

.logopic {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.navbar {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.nav-link {
  font-size: 1.6rem;
  color: #4a4a4a;
  font-weight: 500;
  text-transform: none;
  padding: 0.5rem 0;
  position: relative;
}

.nav-link:after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background: #00b289;
  left: 0;
  bottom: 0;
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: #00b289;
}

.nav-link:hover:after {
  width: 100%;
}

.nav-button {
  font-size: 1.6rem;
  color: white;
  background-color: #00b289;
  padding: 1rem 2rem;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.nav-button:hover {
  background-color: #009e7a;
}

#toggler{
  display: none;
}

.bars{
  font-size: 3rem;
  color: #333;
  border-radius: .5rem;
  padding: .5rem 1.5rem;
  cursor: pointer;
  border: 1rem solid rgba(0,0,0,.3);
  display: none;
}

.home{
  display: flex;
  align-items: center;
  min-height: 100vh;
  background:  linear-gradient(90deg,rgb(30, 29, 112),rgb(59, 57, 153)),
  white; /* here is your single color */
  background-size: cover;
  background-position: center;
  filter: brightness(85%);
}

.content{
  max-width: 50rem;
}

.content h2{
  font-size: 6rem;
  color: white;
}
.content h3{
  font-size: 6rem;
  color: rgb(12, 12, 12);
}  
.content span{
  font-size: 2rem;
  color: #6cc4cf;
  padding: 1rem 0;
  line-height: 1.5;
}

.content p{
  font-size: 1.7rem;
  color: #6730ce;
  padding: 1rem 0;
  line-height: 1.5;
}


.row{
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem 0;
  padding-bottom: 3rem;
}

.video-contain{
  flex: 1 1 40rem;
  position: relative;
}

.video-contain video{
  width: 100%;
  border: 1.5rem solid #fff;
  border-radius: .5rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
  height: 1005;
  object-fit: cover;
}

.content{
  flex: 1 1 40rem;
}

.heading{
  text-align: center;
  font-size: 4rem;
  color:#00383f;
  padding: 1rem;
  margin: 2rem 0;
  background: #fff;
}

.heading span{
  color: #6cc4cf;
}

.btn{
  display: inline;
  margin-top: 3rem;
  border-radius: 5rem;
  background: black;
  color: aliceblue;
  padding: .9rem 3.5rem;
  cursor:pointer;
  font-size:1.9rem;
}

.btn:hover{
  background:#00383f ;
}

.box-con{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.bo{
  flex: 1 1 30rem;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
  border-radius: .5rem;
  padding: 3rem 2rem;
  position: relative;
}

.fa-quote-right{
  position: absolute;
  bottom: 3rem; right: 3rem;
  font-size: 6rem;
  color: #eee
}

.stars i{
  color: #95cfd5;
  font-size: 2rem;
}

.bo p{
  color: grey;
  font-size: 1.5rem;
  line-height: 1.5;
  padding-top: 2rem;
}

.user{
  display: flex;
  align-items: center;
  padding-top: 2rem;
}

.user h3{
  font-size: 2rem;
  color: #333;
}

.user span{
  font-size: 1.5rem;
  color: #999;
}

.icon {
  padding-top: 60px;
  background: #eee;
  display: flex;
  flex-wrap: wrap;
  padding-top: 5rem;
  padding-bottom: 5rem;
  
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.25);
  overflow: hidden;
}

.icon h2{
  color:#00383f;
  padding:5rem ;
}

.icon span{
  color: #6cc4cf;
}

.grp {
  background: #fff;
  border: 1rem solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding:2rem;
  display: flex;
  align-items: center;
  flex: 1 1 25rem
}

.grp img {
  width: 100%;
  height: 5rem;
  margin-right: 2rem;
  object-fit: contain;
}



@media(max-width:991px){
  html{
    font-size: 55%;
  }
  header{
     padding: 2rem;
  }
  section{
    padding: 2rem;
 }
 .home{
  background-position: left;
 }
}

@media(max-width:768px){
  .bars{
    display: block;
  }
  .navbar{
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #eee;
    border-top: .1rem solid  rgba(0,0,0,.1);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }

  #toggler:checked~.navbar{
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  .navbar a{
    margin: 1.5rem;
    padding: 1.5rem;
    background: #fff;
    border: 1rem solid rgba(0,0,0,.1);
    display: block;
  }

  .content h3{
    font-size: 6rem;
  }
  .content span{
    font-size: 2rem;
  }
}

@media(max-width:450px){
  html{
    font-size: 50%;
  }
  .heading{
    font-size: 3rem;
  }
}

/* Footer Styles */
footer {
  background-color: #1f2937;
  color: #f3f4f6;
  padding: 2rem 0;
}

footer h2.title-font {
  font-size: 1.4rem !important;
  margin-bottom: 1.5rem;
  color: #f3f4f6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

footer .text-gray-400 {
  font-size: 1.4rem !important;
  color: #9ca3af !important;
}

footer nav.list-none li {
  margin-bottom: 1rem;
}

footer nav.list-none a {
  font-size: 1.4rem !important;
  color: #9ca3af !important;
  transition: color 0.3s ease;
  text-transform: none;
}

footer nav.list-none a:hover {
  color: white !important;
}

footer .container input[type="text"] {
  font-size: 1.4rem !important;
  padding: 0.8rem;
  background-color: transparent;
  border: 1px solid #4b5563;
}

footer button.footer-button {
  font-size: 1.4rem !important;
  padding: 0.8rem 1.6rem !important;
  background-color: #4f46e5;
}

footer .text-sm {
  font-size: 1.3rem !important;
}

footer .location-text {
  font-size: 1.3rem !important;
  color: #9ca3af;
}

footer .bg-gray-800 {
  background-color: #1a1f2b !important;
  padding: 1.5rem 0;
}

footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
}

/* Categories Section */
.categories-section {
  padding: 4rem 0;
}

.categories-section h2 {
  font-size: 2.4rem;
  margin-bottom: 2rem;
}

.categories-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
}

@media (max-width: 768px) {
  footer h2.title-font {
    font-size: 1.8rem !important;
  }

  footer .text-gray-400,
  footer nav.list-none a,
  footer input[type="text"],
  footer button {
    font-size: 1.4rem !important;
  }

  .categories-list {
    grid-template-columns: repeat(2, 1fr);
  }
}