:root {
  --color-primary: #0C00BA;
  --color-secondary: #41CBF7;
}

.drift__button {
  display: inline-block;
  padding: 12px 24px;
  
  background-color: var(--color-primary);
  color: white;
  border-radius: 50px;

  text-decoration: none;
  font-size: 16px;
  font-weight: bold;

  transition: 0.3s ease;

  &.drift__button--large {
    padding: 20px 40px;
    font-size: 24px;
  }

  &.drift__button--white {
    background-color: white;
    color: var(--color-primary);
  }

  &:hover {
    background-color: var(--color-secondary);
    color: white
  }
}

@media (max-width: 980px) {
  .drift__button.drift__button--large {
    padding: 12px 24px;
    font-size: 16px;
  }
}

.homeslider {
    margin-bottom: -1px;
    padding-left: 174px;
    padding-top: 30px;
    
    background-color: white;
    overflow: hidden;
    clip-path: path('M3103.275,0,300.659.086c-40.761,0-80.515,33.639-88.787,75.128l-70.315,353.9c-16.167,65.958-75.534,61.468-75.374,61.57l3037.092-.056Z');
    
    .swiper-wrapper {
      left: -5px;

      display: flex;
      align-items: flex-start;
    }
  
  .slide {
      position: relative;
      width: auto !important;
      flex-shrink: 0;
      margin-right: -40px;
      max-width: 85vw;
      
      img {
        aspect-ratio: 630/460;
        object-fit: cover;
        display: block;
        clip-path: path('M 68.686 460 L 491.306 460 C 523.397 460 554.529 434.062 560.84 402.066 L 628.749 57.929 C 635.065 25.937 614.169 0 582.078 0 L 138.571 0 C 106.48 0 75.348 25.937 69.032 57.929 L 1.124 402.066 C -5.187 434.063 15.709 460 47.8 460 Z');
      }

      .slide-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;

        padding: 40px;

        h2 {
          max-width: 412px;
          margin-bottom: 20px;

          font-size: 36px;
          line-height: 1.1;
          font-weight: 900;
          color: white;
        }

        span {
          position: relative;
          left: -11px;

          margin-bottom: 12px;
          font-size: 18px;
          line-height: 1;
          font-weight: bold;
          color: var(--color-secondary);
          display: inline-block;
          
          /* Skewed white background */
          background-color: white;
          padding: 7px 18px;
          border-radius: 0 6px 6px 0;
          transform: skew(-12deg);

        }
      }
    }
  }

@media (max-width: 980px) {
  .homeslider {
    margin-left: -180px;
  }
}

/* Filter Tags */
.filter-tags {
  display: flex;
  gap: 12px;
  margin-bottom: 70px;
  flex-wrap: wrap;
}

.filter-tag {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E %3Cg id='Group_5' data-name='Group 5' transform='translate(-26.5 -23.5)'%3E %3Cline id='Line_1' data-name='Line 1' y2='18' transform='translate(35.5 23.5)' fill='none' stroke='%230c00ba' stroke-width='1'/%3E %3Cline id='Line_2' data-name='Line 2' y2='18' transform='translate(44.5 32.5) rotate(90)' fill='none' stroke='%230c00ba' stroke-width='1'/%3E %3C/g%3E %3C/svg%3E") no-repeat left 30px center;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 16px 32px 16px 64px;
  border-radius: 50px;
  font-size: 24px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover,
  &.active {
    background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23.244' height='18.663' viewBox='0 0 23.244 18.663'%3E %3Cg id='Group_5' data-name='Group 5' transform='translate(-26.156 -23.2)'%3E %3Cline id='Line_1' data-name='Line 1' x1='13.5' y2='18' transform='translate(35.5 23.5)' fill='none' stroke='%23ffffff' stroke-width='1'/%3E %3Cline id='Line_2' data-name='Line 2' x1='9.5' y1='9' transform='translate(26.5 32.5)' fill='none' stroke='%23ffffff' stroke-width='1'/%3E %3C/g%3E %3C/svg%3E") no-repeat left 30px center;
    color: white;
  }
}

/* Posts Layout */
.posts-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}

/* Main Posts Grid */
.posts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.post-card {
  background: white;
  
  .post-image {
    aspect-ratio: 376/272;
    overflow: hidden;
    position: relative;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 376 273'%3E%3Cpath d='M28.382,273.133H334.712c19.054,0,37.54-15.4,41.287-34.4V35.2c3.75-19-8.657-34.4-27.712-34.4H41.957C22.9.8,4.418,16.205.667,35.2V238.734c-3.748,19,8.66,34.4,27.714,34.4' fill='white'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    transition: mask-image 0.3s ease;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
  }

  .post-content {
    padding: 24px;
    
    h3 {
      font-size: 26px;
      font-weight: 300;
      line-height: 1.23;
      margin-bottom: 16px;
      color: var(--color-primary);

      transition: all 0.3s ease;
      
      a {
        color: var(--color-primary);
        text-decoration: none;
        
        &:hover {
          color: var(--color-secondary);
        }
      }
    }
    
    .post-tags {
      display: none;
      gap: 8px;
      margin-bottom: 20px;
      flex-wrap: wrap;
      
      .post-tag {
        background: var(--color-secondary);
        color: white;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
      }
    }
  }

  &:hover {
    .post-image {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 376 273'%3E%3Cpath d='M28.382,273.133h263.34c19.054,0,37.54-15.4,41.287-34.4L371.894,35.65c3.75-19-8.657-34.4-27.712-34.4H80.842c-19.054,0-37.54,15.4-41.29,34.4L.667,238.734c-3.748,19,8.66,34.4,27.714,34.4' fill='white'/%3E%3C/svg%3E");
    }

    h3 {
      font-weight: 700;
    }
  }
}

/* Trending Sidebar */
.trending-sidebar {
  background: rgba(221, 221, 221, 0.19);
  border-radius: 38px;
  padding: 30px;
  position: sticky;
  top: 20px;
  
  h3 {
    color: var(--color-primary);
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 24px;
  }
}

.trending-posts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.trending-post {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid white;
  
  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  .trending-image {
    width: 92px;
    height: 92px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .trending-content {
    flex: 1;
    
    h4 {
      font-size: 18px;
      font-weight: 300;
      line-height: 1.3;
      margin-bottom: 8px;
      
      a {
        color: var(--color-primary);
        text-decoration: none;
        
        &:hover {
          color: var(--color-secondary);
        }
      }
    }  
  }

  .trending-meta {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    
    .trending-date,
    .trending-tag {
      color: var(--color-primary);
      font-weight: 300;
      text-transform: uppercase;
      font-size: 14px;
    }

    .trending-tag {
      text-transform: initial;
    }
  }
}

@media (max-width: 980px) {
  .posts-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .posts-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-tags {
    margin-bottom: 32px;
  }

  .filter-tag {
    font-size: 16px;
    padding: 12px 24px;
    background-image: none !important;
  }

  .post-card {
    .post-content {
      h3 {
        font-size: 20px;
      }
    }
  }

  .trending-sidebar {
    h3 {
      font-size: 20px;
    }
  }

  .trending-post {
    .trending-content {
    }
  }
}

/* Tag and Date Component */
.post-tag-date {
  display: inline-flex;
  align-items: center;
  background: transparent;
  
  .tag-name {
    position: relative;
    z-index: 10;
    background: white;
    color: var(--color-primary);
    padding: 6px 16px;
    font-size: 12px;
    border-radius: 50px;
    border: 1px solid var(--color-primary);
    font-weight: 500;
    line-height: 1.7;
  }
  
  .post-date {
    position: relative;
    z-index: 5;
    padding: 6px 16px;
    color: white;
    font-size: 12px;
    border-radius: 50px;
    border: 1px solid var(--color-primary);
    font-weight: 500;
    line-height: 1.7;
  }

  .tag-name + .post-date {
    padding-left: 38px;
    margin-left: -30px;
  }
}

.post-image-header {
  margin-bottom: -10px;
  padding-left: 122px;
  padding-top: 30px;

  position: absolute;
  height: 490px;
  width: 100vw;
  
  background-color: white;
  overflow: hidden;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1900 0 1000 500'%3E%3Cpath d='M-1470.181,490.627v-.009l-398.879-.018c13.5-.433,57.81-5.984,71.435-61.571l70.314-353.9C-1719.038,33.639-1679.284,0-1638.523,0h614.062C-963.7,0-924,31.527-945.715,115.31l-61.844,303.719c-16.381,69.62,75.534,74.159,75.374,74.262Zm-402.2-.013-.506-.015h3.83c-.757.024-1.418.032-1.971.032C-1871.6,490.631-1872.056,490.622-1872.384,490.614Zm-.616-.015a.522.522,0,0,1,.11,0Z' fill='black'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: 0 0; 

   img {
    position: relative;
    top: -10px;
    width: 100%;
    max-width: 792px;
    height: 460px;
    object-fit: cover;
    display: block;
    clip-path: path('M68.686,460H653.769c32.091,0,63.223-25.938,69.534-57.934L791.211,57.929C797.483,26.161,776.922.363,744.958,0H138.571C106.48,0,75.348,25.937,69.032,57.929L1.124,402.066C-5.187,434.063,15.709,460,47.8,460');
   }
 }

/* Flexible Content Blocks */
.flexible-content {
  &:last-child {
    margin-bottom: 0 !important;
  }
}

/* Content Block (Regular) */
.content-block {
  padding-left: 25%;
  margin-bottom: 112px;

  .content-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 24px;
    line-height: 1.7;
  }
  
  .content-text {
    font-size: 20px;
    line-height: 1.7;
    font-weight: 300;
    color: var(--color-primary);
    
    p {
      margin-bottom: 20px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

/* Fancy Block (Special styling) */
.fancy-block {
  background: url('https://it-drift.com/wp-content/uploads/2025/09/background.jpg') no-repeat center center;
  background-size: cover;
  color: white;
  padding: 60px;
  border-radius: 40px;
  margin-bottom: 60px;
  position: relative;
  overflow: hidden;

  .fancy-container {
    background: rgba(255, 255, 255, 0.8);
    padding: 60px;
    border-radius: 16px;
  }
  
  .fancy-title {
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 24px;
    line-height: 1.2;
    position: relative;
    z-index: 2;
    color: var(--color-primary);
  }
  
  .fancy-content {
    font-size: 20px;
    line-height: 1.5;
    position: relative;
    z-index: 2;
    font-weight: 300;
    color: var(--color-primary);
    p {
      margin-bottom: 20px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    strong {
      color: rgba(255,255,255,0.9);
    }
  }
}

/* Image Block */
.image-block {
  margin-bottom: 112px;
  text-align: center;
  
  .flexible-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border-radius: 40px;
    overflow: hidden;
      transition: transform 0.3s ease;
      
      &:hover {
        transform: scale(1.02);
      }
    }
  }

/* Related Posts */
.related-posts {
  display: flex;
  gap: 24px 40px;
  overflow-x: auto;
  padding: 0;
  margin: 0;
  
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 20px;
  }
}

.related-post-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 37px;
  padding: 24px;
  min-width: 300px;
  flex: 1;
  max-width: 33.33%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  gap: 16px;
  
  .related-post-meta {
    margin-bottom: 16px;

    .post-date {
      color: var(--color-primary);
    }
  }
  
  .related-post-content {
    margin-bottom: 20px;
    
    h3 {
      font-size: 18px;
      font-weight: 300;
      line-height: 1.33;
      margin: 0;
      color: var(--color-primary);
      
      a {
        color: inherit;
        text-decoration: none;
        
        &:hover {
          color: var(--color-secondary);
        }
      }
    }
  }
  
  .related-post-image {
    border-radius: 16px;
    overflow: hidden;

    width: 160px;
    height: 160px;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    
    &:hover img {
      transform: scale(1.05);
    }
  }
}

/* Responsive Design */
@media (max-width: 980px) {
  .content-block {
    padding-left: 0;
    margin-bottom: 64px;
  }
  
  .content-block .content-title {
    font-size: 22px;
  }
  
  .content-block .content-text {
    font-size: 16px;
  }

  .image-block {
    margin-bottom: 64px;
  }
  
  .fancy-block {
    padding: 40px 25px;
    margin-bottom: 64px;

    .fancy-container {
      padding: 40px 25px;
    }

    .fancy-title {
      font-size: 22px;
    }
    
    .fancy-content {
      font-size: 18px;
    }
  }

  .related-post-card {
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  .related-post-card {
    max-width: 100%;
  }
}

@media (max-width: 500px) {
  .fancy-block {
    background: none;
    padding: 0;
    border-radius: 0;

    .fancy-container {
      background: none;
      padding: 0;
      border-radius: 0;
    }
  }

  .related-post-card {
    flex-direction: column;

    .related-post-image {
      width: 100%;
      height: 160px;
    }

    .related-post-content {
      margin-bottom: 0;
    }
  }
}

/* Menu with Search */
.menu {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  
  nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
    
    li a {
      color: var(--color-primary);
      background: rgba(255, 255, 255, 0.8);
      padding: 15px;
      border-radius: 17px;
      text-decoration: none;
      font-weight: 500;
      font-size: 12px;
      transition: color 0.3s ease;
      
      &:hover {
        color: var(--color-secondary);
      }
    }
  }
}

.menu-search {
  .search-container {
    position: relative;
    display: flex;
    align-items: center;

    [type="search"]::-webkit-search-cancel-button,
    [type="search"]::-webkit-search-decoration {
      -webkit-appearance: none;
      appearance: none;
    }
    
    input[type="search"] {
      background: white;
      border: 0;
      border-radius: 17px;
      padding: 15px 50px 15px 20px;
      font-size: 12px;
      color: var(--color-primary);
      width: 250px;
      transition: all 0.3s ease;
      
      &:focus {
        outline: none;
      }
      
      &::placeholder {
        color: rgba(12, 0, 186, 0.5);
      }
    }
    
    button {
      position: absolute;
      right: 20px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.707' height='23.207' viewBox='0 0 24.707 23.207'%3E %3Cg id='Group_200' data-name='Group 200' transform='translate(-1249 -51)'%3E %3Cg id='Ellipse_1' data-name='Ellipse 1' transform='translate(1249 51)' fill='%23fff' stroke='%230c00ba' stroke-width='1'%3E %3Ccircle cx='10.5' cy='10.5' r='10.5' stroke='none'/%3E %3Ccircle cx='10.5' cy='10.5' r='10' fill='none'/%3E %3C/g%3E %3Cline id='Line_3' data-name='Line 3' x2='6' y2='6' transform='translate(1267 67.5)' fill='none' stroke='%230c00ba' stroke-width='2'/%3E %3C/g%3E %3C/svg%3E") no-repeat center center;
      border: none;
      border-radius: 0;
      width: 24px;
      height: 43px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}

/* Responsive Menu */
@media (max-width: 980px) {

  .menu {
    margin-top: 32px;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    
    nav ul {
      justify-content: center;
      gap: 20px;
    }
    
    .menu-search .search-container input[type="search"] {
      width: 200px;
    }

    > *:not(.hamburger-menu){
      display: none;
    }
  }
}

/* Hamburger Menu */
.hamburger-menu {
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  
  .hamburger-line {
    width: 26px;
    height: 2px;
    background: var(--color-primary);
    transition: all 0.3s ease;
    border-radius: 1px;
  }
  
  &.active {
    .hamburger-line:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    
    .hamburger-line:nth-child(2) {
      opacity: 0;
    }
    
    .hamburger-line:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -6px);
    }
  }
}

/* Overlay Menu */
.overlay-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('https://it-drift.com/wp-content/uploads/2025/09/menu_background.jpg') no-repeat center center;
  background-size: cover;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  
  &.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
  
  .overlay-content {
    transform: translateY(50px);
    transition: transform 0.3s ease 0.1s;
    max-width: 1440px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    padding: 32px;
    flex-direction: column;
  }

  .overlay-logo {
    margin-top: 50px;
    margin-bottom: 135px;
    display: inline-block;
    
    img {
      max-width: 180px;
      
      @media (max-width: 768px) {
        max-width: 120px;
      }
    }
  }
  
  &.active .overlay-content {
    transform: translateY(0);
  }

  .overlay-nav {
    flex: 1;
  }
  
  .overlay-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    
    li {
      margin-bottom: 30px;
      line-height: 1;
      
      a, .menu-title {
        color: white;
        text-decoration: none;
        font-size: 50px;
        font-weight: 500;
        transition: all 0.3s ease;
        position: relative;
        display: inline-block;

        @media (max-width: 768px) {
          font-size: 32px;
        }
      }
      
      &.has-submenu {
        .submenu {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
          margin-top: 42px;
          
          li {
            a {
              background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E %3Cg id='Group_5' data-name='Group 5' transform='translate(-26.5 -23.5)'%3E %3Cline id='Line_1' data-name='Line 1' y2='18' transform='translate(35.5 23.5)' fill='none' stroke='%230c00ba' stroke-width='1'/%3E %3Cline id='Line_2' data-name='Line 2' y2='18' transform='translate(44.5 32.5) rotate(90)' fill='none' stroke='%230c00ba' stroke-width='1'/%3E %3C/g%3E %3C/svg%3E") no-repeat left 30px center;
              border: 1px solid var(--color-primary);
              color: var(--color-primary);
              padding: 16px 32px 16px 64px;
              border-radius: 50px;
              font-size: 24px;
              font-weight: 500;
              cursor: pointer;
              transition: all 0.3s ease;
              
              &:hover,
              &.active {
                background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23.244' height='18.663' viewBox='0 0 23.244 18.663'%3E %3Cg id='Group_5' data-name='Group 5' transform='translate(-26.156 -23.2)'%3E %3Cline id='Line_1' data-name='Line 1' x1='13.5' y2='18' transform='translate(35.5 23.5)' fill='none' stroke='%23ffffff' stroke-width='1'/%3E %3Cline id='Line_2' data-name='Line 2' x1='9.5' y1='9' transform='translate(26.5 32.5)' fill='none' stroke='%23ffffff' stroke-width='1'/%3E %3C/g%3E %3C/svg%3E") no-repeat left 30px center;
                color: white;
              }

              @media (max-width: 768px) {
                font-size: 16px;
                padding: 12px 24px;
                background-image: none !important;
              }
            }
          }
        }
      }
    }
  }
}

/* Close button for overlay */
.overlay-menu::before {
  content: '×';
  position: absolute;
  top: 50px;
  right: 80px;
  font-size: 64px;
  color: var(--color-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000000;
}

/* Prevent body scroll when overlay is open */
.no-scroll {
  overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .overlay-nav ul li a {
    font-size: 28px;
  }
  
  .overlay-menu::before {
    top: 20px;
    right: 20px;
    font-size: 36px;
  }
}

/* Page Flexible Content */
.page-flexible-content {
  .page-content-block {
    margin-bottom: 60px;
    overflow: hidden;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    &.has-background {
      border-radius: 38px;
    }
    
    .page-content-wrapper {
      display: flex;
      align-items: center;
      gap: 40px;
      
      .page-content-text-section {
        flex: 1;
        
        .page-content-title {
          font-size: 36px;
          font-weight: 700;
          color: var(--color-primary);
          margin-bottom: 24px;
          line-height: 1.2;
        }
        
        .page-content-text {
          font-size: 15px;
          line-height: 1.6;
          color: #000000;
          margin-bottom: 30px;
          
          p {
            margin-bottom: 20px;
            
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
        
        .page-content-button {
          margin-top: 30px;
        }
      }
      
      .page-content-right-section {
        flex: 0 0 40%;
        
        .page-content-image-section {
          .page-content-image {
            width: 100%;
            height: auto;
          }
        }
        
        .page-content-form-section {
          width: 100%;
          
          form {
            width: 100%;
          }

          .wpforms-field {
            padding-top: 0 !important;
          }
          
          input, textarea, select {
            width: 100%;
            padding: 15px 23px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 15px;
          }

          input::placeholder, textarea::placeholder, select::placeholder {
            color: #585757;
            font-weight: 300;
          }
          
          button, input[type="submit"] {
            border: 0;
            cursor: pointer;
          }
        }
      }
    }
    
    &.has-right-content .page-content-wrapper {
      align-items: flex-start;
      
      .page-content-text-section {
        padding-right: 20px;
      }
    }
    
      &.light-text {
        .page-content-text-section {
          .page-content-title,
          .page-content-text {
            color: white;
          }
        }
      }
      
      &.dark-text {
        .page-content-text-section {
          .page-content-title,
          .page-content-text {
            color: #000000;
          }
        }
      }
      
      &[style*="background-color"] {
        .page-content-wrapper {
          padding: 40px;
        }
      }
      
      &[style*="background-image"] {
        position: relative;
        
        .page-content-wrapper {
          position: relative;
          z-index: 2;
          padding: 40px;
        }
      }
  }
}

/* Page CTA Block */
.page-cta-block {
  margin-bottom: 60px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .page-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    
    .page-cta-item {
      background: rgba(221, 221, 221, 0.2);
      border-radius: 38px;
      padding: 25px 50px;
  
      .page-cta-item-title {
        font-size: 26px;
        font-weight: 300;
        color: #000000;
        margin-bottom: 20px;
        line-height: 1.5;
      }

      .page-cta-item-title + .page-cta-item-button {
        margin-top: 20px;
      }
    }
  }
}

@media (max-width: 768px) {
  .page-cta-block {
    .page-cta-grid {
      grid-template-columns: 1fr;
      gap: 20px;
      
      .page-cta-item {
        padding: 30px 20px;
        
        .page-cta-item-title {
          font-size: 20px;
        }
      }
    }
  }
}

/* Page Content Responsive */
@media (max-width: 768px) {
  .page-flexible-content {
    .page-content-block {
      .page-content-title {
        font-size: 20px !important;
      }

      .page-content-wrapper {
        flex-direction: column;
        gap: 30px;
        
        .page-content-text-section {
          padding-right: 0;
        }
        
        .page-content-right-section {
          flex: none;
          width: 100%;
        }
      }
      
      &.no-right-content .page-content-wrapper .page-content-text-section {
        text-align: left;
      }
      
      &[style*="background-color"] .page-content-wrapper,
      &[style*="background-image"] .page-content-wrapper {
        padding: 30px 20px;
      }
    }
  }
}