:root {
  --white-color:                  #ffffff;
  --primary-color:                #ed1c24;
  --secondary-color:              #ed1c24;
  --section-bg-color:             #f5f5f5;
  --dark-color:                   #000000;
  --p-color:                      #717275;

  --body-font-family:             'DM Sans', sans-serif;

  --h1-font-size:                 60px;
  --h2-font-size:                 42px;
  --h3-font-size:                 36px;
  --h4-font-size:                 32px;
  --h5-font-size:                 24px;
  --h6-font-size:                 22px;
  --p-font-size:                  18px;
  --menu-font-size:               14px;
  --copyright-text-font-size:     16px;

  --font-weight-normal:           400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
}

body {
    background: var(--white-color);
    font-family: var(--body-font-family); 
}

.projects-thumb {
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  margin-bottom: 25px;
  transition: all 0.3s;
  cursor: pointer;
}



.projects-thumb:hover .projects-image {
  transform: scale(1.2);
}

.projects-thumb:hover .custom-btn,
.projects-btn-wrap .custom-btn:hover {
  background: var(--primary-color);
}

.projects-title-wrap {
  background: linear-gradient(to top, var(--dark-color), transparent 90%);
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 25px 25px 10px 25px;
  transition: all 0.2s;
}


.projects-title {
  color: var(--white-color);
}

.projects-image {
  border-radius: 15px;
  width: 100%;
  height: auto;
  transition: all 0.3s;
}

.projects-thumb-large .projects-image {
  object-fit: cover;
  height: 100%;
}