@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
:root {
  --default-font: 'poppins', sans-serif;
}

:root { 
  --background-color: #ffffff; 
  --default-color: #111111; 
  --heading-color: #3e5055; 
  --accent-color: #388da8; 
  --surface-color: #ffffff; 
  --contrast-color: #ffffff; 
  --first-color: #d2242a;
  --second-color: #ffcc00;
  
}

.ref{
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  transition: 0.3s ease;
}

.ref:hover{
  color: var(--default-color);
}

.page-title {
  padding: 40px 5% 50px;
  text-align: center;
  position: relative;
}

.page-title h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.page-title h1:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--second-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.page-title h1.swat span{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  padding-bottom: 10px;
}

.page-title p {
  margin-bottom: 0;
}

@media (max-width: 640px){
  .page-title{
    padding-bottom: 50px;
  }
  .page-title h1 {
    font-size: 2rem;
    margin-bottom: 15px;
    padding-bottom: 15px;
  }
  .page-title h1.swat span{
    display: none;
  }
  .page-title p{
    font-size: 14px;
  }
}