/* ------------------------------------------- */
/* 0. 초기화 및 기본 설정 */
/* ------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* 디자인 컬러 팔레트 */
    --primary-color: #1F2937; /* 짙은 네이비 (전문성) */
    --accent-color: #4C9A8E;  /* 세이지 그린 (활력) */
    --text-color: #374151;
    --light-gray: #F3F4F6;
    
    /* 폰트 설정 (Pretendard 폰트가 설치되어 있다고 가정) */
    --font-sans: 'Pretendard', 'Noto Sans KR', sans-serif;
}
/* style.css 파일의 최상단 또는 body/html 선택자에 추가 */
html {
    scroll-behavior: smooth; /* 이 속성이 부드러운 스크롤을 활성화합니다. */
}

body {
    font-family: var(--font-sans);
    color: var(--text-color);
    line-height: 1.6;

    /* 브라우저 기본 마진 제거 */
    margin: 0; 
    padding: 0;
    
    font-family: var(--font-sans);
    color: var(--text-color);
    line-height: 1.6;
    
    /* 가로 스크롤 방지를 위해 overflow-x 숨김 */
    overflow-x: hidden;
    

}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

h2, h3, h4 {
    color: var(--primary-color);
}

.section-padding {
    padding: 80px 5%;
}

.bg-light-gray {
    background-color: var(--light-gray);
}

.card-shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
}

.card-shadow:hover {
    transform: translateY(-5px); /* 호버 효과 */
}

/* ------------------------------------------- */
/* 1. 헤더 & 내비게이션 */
/* ------------------------------------------- */
.sticky-header {    
    border-bottom:0px solid red;
}
.header-inner {    
    border:0px solid red;
    
}
.sticky-header {    
    
    border-radius: 40px;
    background-color: #000000;
    opacity: 100%;    
    position: sticky;
    top: 0;
    width: 100%;         
    z-index: 100;
    border-bottom: 0px solid #bed5a5;
    border-style: solid;
    /*border-bottom-width: 5px;    */
}

.header-inner {
    padding-left:20% !important; /*사이즈*/
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.logo {
    margin-left:-35% !important; /*사이즈*/
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    border:0px solid red;
}

.main-nav ul {
    color:rgb(255, 255, 255);
    display: flex;
    list-style: none;
}

.main-nav li {
    margin-left: 30px;
    font-size: 16px;
    font-weight: 500;
}

.main-nav li a:hover { /*이곳이 네비 마우스오버시 색깔 */
    color: white;
}

.cta-link {
    background-color: var(--accent-color);
    color: #FFFFFF;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: 600;
}

.menu-toggle {
    display: none; /* PC에서는 숨김 */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* ------------------------------------------- */
/* 2. 메인 히어로 섹션 */
/* ------------------------------------------- */
.hero-section {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    gap: 50px;
    
}

.hero-content {
    flex: 1;
}

.hero-content h2 {
    font-size: 48px;
    font-weight: 800;
    margin: 15px 0 30px;
    line-height: 1.2;
}

.hero-content .subtitle {
    color: var(--accent-color);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: #FFFFFF;
    padding: 15px 30px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: var(--accent-color);
}

.hero-visual {
    flex: 1;
    /* 실제 웹에이전시는 여기에 태블릿/모바일 목업 이미지를 배치합니다. */
    height: 350px;
    background: var(--light-gray);
    border-radius: 10px;
}

/* ------------------------------------------- */
/* 3. 포트폴리오 섹션 */
/* ------------------------------------------- */
.portfolio-section h3 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
}

.portfolio-grid {
    display: grid;
    /* PC: 3열 레이아웃 */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 30px;
}

.portfolio-item {
    text-align: center;
    background-color: #FFFFFF;
    padding-bottom: 20px;
}

.portfolio-item .thumb {
    /* 이미지 대신 임시 배경색 사용 */
    margin-bottom: 20px;
}

.portfolio-item h4 {
    font-size: 20px;
    margin-bottom: 5px;
}

.portfolio-item .tag {
    color: #9CA3AF;
    font-size: 14px;
}

.view-more-btn {
    display: block;
    width: fit-content;
    margin: 40px auto 0;
    padding: 10px 20px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    color: var(--primary-color);
    font-weight: 600;
}

/* ------------------------------------------- */
/* 4. 학촌의 강점 섹션 */
/* ------------------------------------------- */
.whyus-section h3 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.feature-item .icon {
    font-size: 30px;
    display: block;
    margin-bottom: 15px;
}

.feature-item h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

.feature-item p {
    color: #6B7280;
}

/* ------------------------------------------- */
/* 5. 푸터 */
/* ------------------------------------------- */
.main-footer {
    background-color: var(--primary-color);
    color: #D1D5DB;
    padding: 40px 5%;
    font-size: 14px;
    text-align: center;
}

.footer-logo {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.main-footer address, .main-footer p {
    margin-bottom: 5px;
}

.copyright {
    margin-top: 20px;
}

/* ------------------------------------------- */
/* 6. 반응형 (Media Queries) */
/* ------------------------------------------- */

/* 태블릿 사이즈 (1024px 이하) */
@media (max-width: 1024px) {

    .prev{
    left: 0;               /* 부모의 왼쪽 끝으로 */
    padding-left: 10px;    /* 필요시 아이콘과 간격 */
    border-radius: 0 6px 6px 0; /* 왼쪽 끝이면 좌측 둥글기 제거 */
    }
    .header-inner {
        max-width: 90%;
    }
    
    .hero-section {
        flex-direction: column; /* 히어로 섹션 세로로 변경 */
        padding-top: 60px;
        text-align: center;
    }
    
    .hero-visual {
        margin-top: 30px;
        width: 100%;
        max-width: 500px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr); /* 2열로 변경 */
    }

    .features-grid {
        grid-template-columns: 1fr; /* 1열로 변경 */
    }
}

/* 모바일 사이즈 (768px 이하) */
/* style.css 파일 내, @media (max-width: 768px) 블록 전체를 대체 */

@media (max-width: 768px) {

    .sticky-header{
        margin-left:2px !important;
    }

    .logo {
        margin-left:-47% !important;
    }
}

@media (max-width: 768px) {
  .prev {
    left: 0;               /* 부모의 왼쪽 끝으로 */
    padding-left: 10px;    /* 필요시 아이콘과 간격 */
    border-radius: 0 6px 6px 0; /* 왼쪽 끝이면 좌측 둥글기 제거 */
  }

  
 

}

@media (max-width: 768px) {
    
    /* PC/태블릿 스타일 숨기기 */
    .main-nav {
        display: none; 
    }

    
    
    .main-nav{
        border:0px solid red;
        margin-right:0 auto;
    }
    /* 햄버거 버튼 보이게 설정 */
    .menu-toggle {
        display: block; 
        z-index: 101; /* 메뉴보다 위에 위치 */
        color: var(--primary-color); 
    }

    /* 기본 햄버거 버튼 스타일 (모바일 미디어 쿼리 밖) */
    .menu-toggle {
        display: none; 
        position: relative;
        width: 30px;
        height: 24px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 120; 
    }

    .menu-toggle .icon-bar {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--primary-color);
        border-radius: 2px;
        transition: all 0.3s ease;
        margin: 5px 0;
    }

    /* ********** 전체 화면 오버레이 메뉴 스타일 ********** */
    .main-nav.active {
        display: flex; /* 메뉴를 보이게 함 */
        flex-direction: column; /* 세로 정렬 */
        justify-content: center; /* 수직 중앙 정렬 */
        align-items: center; /* 수평 중앙 정렬 */
        
        position: fixed; /* 뷰포트에 고정 */
        top: 0;
        left: 0;
        width: 100vw; /* 뷰포트 너비 전체 */
        height: 100vh; /* 뷰포트 높이 전체 */
        background-color: var(--primary-color); /* 배경색을 주색으로 변경 (어둡게) */
        z-index: 100; /* 콘텐츠 위에 오도록 설정 */
        
        /* 메뉴가 부드럽게 나타나도록 transition 추가 (옵션) */
        transition: opacity 0.4s ease-in-out;
    }

    .main-nav ul {
        flex-direction: column; 
        text-align: center;
        width: 80%;
    }

    .main-nav li {
        margin: 20px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 흰색 투명한 구분선 */
    }
    
    .main-nav li:last-child {
        border-bottom: none;
    }

    .main-nav li a {
        display: block; 
        padding: 15px 0;
        font-size: 24px; /* 메뉴 글씨를 더 크게 */
        color: #FFFFFF; /* 글씨를 흰색으로 */
        font-weight: 700;
        transition: color 0.3s;
    }
    
    .main-nav li a:hover {
      /*   color: var(--accent-color); 호버 시 강조색 */
    }

    /* CTA 버튼 스타일 */
    .main-nav .cta-link {
        margin-top: 20px;
        display: inline-block;
        background-color: var(--accent-color);
        padding: 10px 20px;
        border-radius: 4px;
    }
    
    /* ********** 헤더 로고/버튼 색상 변경 ********** */
    /* 메뉴가 열렸을 때 버튼과 로고의 색상을 흰색으로 바꿔 대비를 줌 */
    .sticky-header.menu-open .logo,
    .sticky-header.menu-open .menu-toggle {
        color: #FFFFFF;
    }

    /* ... 기타 모바일 스타일 (hero-section 등)은 기존대로 유지 ... */

    /* ... (기존 모바일 스타일 유지) ... */

    /* 햄버거 버튼 보이게 설정 */
    .menu-toggle {
        display: block; 
    }

    /* ********** 메뉴가 열렸을 때 (닫기 버튼 'X' 모양) ********** */

    /* 메뉴가 열렸을 때 헤더 로고/버튼 색상을 흰색으로 변경 */
    .sticky-header.menu-open .logo,
    .sticky-header.menu-open .menu-toggle .icon-bar {
        background-color: #FFFFFF; /* 바 색상을 흰색으로 변경 */
    }

    /* 1. 첫 번째 바를 45도 회전 */
    .sticky-header.menu-open .menu-toggle .icon-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg); 
    }

    /* 2. 두 번째(중앙) 바를 숨김 */
    .sticky-header.menu-open .menu-toggle .icon-bar:nth-child(2) {
        opacity: 0;
    }

    /* 3. 세 번째 바를 -45도 회전 */
    .sticky-header.menu-open .menu-toggle .icon-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    
    /* ... (기존 전체 화면 오버레이 메뉴 스타일 유지) ... */

    /*메뉴 오버시 밑줄그어지게 */
    /* ... (기존 모바일 스타일 유지) ... */
    
    /* 모바일 오버레이 메뉴 링크 스타일 */
    .main-nav li a {
        /* 모바일 전체 화면 메뉴에서는 밑줄 효과 대신 텍스트 색상 변경으로 대체하는 것이 더 깔끔합니다. 
           전체 화면 오버레이는 주로 큰 텍스트를 사용하므로, 겹치는 것을 피합니다. */
        font-size: 24px; /* 또는 26px */
        color: #FFFFFF;
        padding: 15px 0;
        /* ::after 밑줄 가상 요소는 모바일에서 적용하지 않도록 스타일을 덮습니다. */
        /* 만약 모바일에서도 밑줄을 원한다면, 위 PC CSS를 복사하여 모바일 요구사항에 맞게 수정합니다. */
    }
    
    .main-nav li a:hover {
     /*   color: var(--accent-color);  호버 시 강조색으로 텍스트 색상 변경 */
    }
    
}

/* 폰트 변경 */
/* style.css 파일의 :root 변수 수정 */
:root {
    /* 디자인 컬러 팔레트 (기존 유지) */
    --primary-color: #1F2937; 
    --accent-color: #4C9A8E;  
    --text-color: #374151;
    --light-gray: #F3F4F6;
    
    /* ********** 폰트 설정 수정 ********** */
    /* Pretendard를 기본으로 사용하고, 없으면 Noto Sans KR, sans-serif 순으로 대체 */
    --font-sans: 'Pretendard', 'Noto Sans KR', sans-serif; 
}

body {
    font-family: var(--font-sans);
    color: var(--text-color);
    line-height: 1.6;
    font-family: sans-serif; /* 팝업창 코드 넣으면서 넣은 코드 */
}

/* 제목(h2, h3)은 굵게 사용하여 강조 */
h2, h3, h4 {
    font-family: var(--font-sans); /* 동일 폰트, 굵기로 강조 */
    font-weight: 700; /* Bold */
    color: var(--primary-color);
}


/* 메뉴 오버시 밑줄 그어지게 */
/* style.css 파일 (PC/데스크톱 기본 스타일 섹션) */

.main-nav li a {
    /* 부드러운 밑줄 효과를 위한 설정 */
    position: relative; /* ::after 가상 요소를 위한 기준점 */
    display: inline-block;
    padding-bottom: 5px; /* 밑줄과 텍스트 사이 여백 */
    overflow: hidden; /* 확장 시 깨지는 것을 방지 */
}

/* 밑줄 가상 요소 정의 */
.main-nav li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* 초기 너비는 0 (숨김) */
    height: 1px; /* 밑줄의 두께 */
    background-color: white; /* 세이지 그린으로 설정 */
    transition: width 0.3s ease-out; /* 너비가 0.3초 동안 부드럽게 변화 */
}

/* 마우스를 올렸을 때 (Hover) */
.main-nav li a:hover::after {
    width: 100%; /* 너비를 100%로 확장하여 밑줄을 만듦 */
    left: 0;
}

/* 기존 스타일: 일반 링크 색상 변경 효과는 제거하고 밑줄 효과만 남김 */
.main-nav li a:hover {
    /*  color: var(--text-color);텍스트 색상 변경 없이 깔끔하게 유지 */
}

/* 히어로 섹션의 메인 슬라이드 */

/* style.css 파일에 추가 */

/* ********** 히어로 섹션 구조 조정 (슬라이드를 우측에 배치) ********** */
.hero-section {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    
    align-items: center;
    gap: 50px;
}
.hero-content {
    flex: 1;
}

/* ********** 슬라이드 컨테이너 스타일 ********** */
.slide-container {
    flex: 1;
    position: relative;
    max-width: 550px; /* 최대 크기 설정 */
    height: 350px;    
    overflow: hidden; /* 슬라이드 아이템이 넘치지 않도록 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/*가득차게*/

.slide-item img {
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* 비율 유지하며 꽉 채움 */
    display: block;
}
.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 기본적으로 모두 숨김 */
    transition: opacity 1.5s ease-in-out; /* 페이드 인/아웃 전환 효과 */
}

.slide-item.active {
    opacity: 1; /* active 클래스가 있을 때만 보임 */
}

.slide-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #eee; /* 로딩 전 배경색 */
}

.slide-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    background-color: rgba(31, 41, 55, 0.7); /* 짙은 네이비 투명 배경 */
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

/* ********** 슬라이드 위치 표시 점(Dot) 스타일 ********** */
.dots-container {
    position: absolute;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    text-align: center;
}

.dot {
    height: 10px;
    width: 10px;
    margin: 0 4px;
    background-color: rgba(255, 255, 255, 0.5); /* 흰색 반투명 */
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: var(--accent-color); /* 활성화된 점은 강조색 */
}

/* ********** 반응형 수정 (모바일) ********** */
@media (max-width: 1024px) {
    /* 1024px 이하에서는 슬라이드가 텍스트 아래로 가도록 설정 */
    .hero-section {
        flex-direction: column;
        text-align: center;
    }
    
    .slide-container {
        margin-top: 30px;
        width: 100%;
        max-width: 500px; 
    }
}

/* style.css 파일에 추가 */

/* ********** 이전/다음 버튼 스타일 ********** */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 25px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.4); /* 배경에 반투명 검은색 적용 */
    z-index: 30; /* 텍스트보다 위에 오도록 설정 */
}

/* 다음 버튼(Next)을 오른쪽에 배치하고 모서리를 조정 */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* 버튼에 마우스를 올렸을 때 배경색 변경 */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* 히어로섹션 전체화면 */
.hero-section {
    /* 뷰포트 높이(Viewport Height) 전체를 차지하도록 설정 */
    height: 100vh; 
    /* 최소 높이를 설정하여, 내용이 많거나 모바일 환경에서 깨지는 것을 방지 */
    min-height: 500px; 
    
    /* Flexbox 설정으로 내부 내용을 수직/수평 중앙에 배치 */
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    
    /* 전체 화면을 덮도록 설정 */
    width: 100%;
    max-width: none; 
    margin: 0; 
    padding: 0; 
    
    position: relative; /* 슬라이드 컨테이너의 기준점 */
}

/* 텍스트 컨텐츠는 슬라이드 위에 위치하도록 조정 */
.hero-content {
    position: absolute;
    z-index: 20; /* 슬라이드(10)보다 위에 배치 */
    max-width: 1200px; 
    width: 90%;
    text-align: center;
}

/* 슬라이드 컨테이너는 배경 역할로 전체를 덮음 */
.slide-container {
    /*position: absolute;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 부모(.hero-section)의 100vh를 상속 */
    z-index: 10; /* 텍스트 아래에 배치 */
    /* 기타 스타일은 이전 답변에서 제공된 코드를 유지합니다. */
}

.hero-section {
    height: 100vh; /* 표준 대체(Fallback) */
    height: 100dvh; /* 최신 동적 높이 (모바일 환경 최적화) */
    /* ... 나머지 스타일 유지 ... */
}

 /* 전체 사이드바 스타일 */
    .sidebar {
      position: fixed;
      top: 70%;
      right: 2%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      z-index: 1000;
    }

    .sidebar img {
      width: 50px;
      height: 50px;
      object-fit: contain;
      border-radius: 50%;
      background: white;
    }

    .quick-chat {
      height: 20%;
      text-align: center;
      writing-mode: vertical-rl;
      background-color: #e74c3c;
      color: white;
      padding: 10px;
      border-radius: 20px;
      font-weight: bold;
      font-size: 14px;
      cursor: pointer;
    }

    .icon-button {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      cursor: pointer;
    }

    .icon-button img {
      width: 38px;
      height: 38px;
    }
    
   




 /*hc-line 로고로 구분*/
.hc-line {
    position:relative;
    margin-top:-94px;
    z-index:50;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;  
    object-fit: contain;
    position: relative;
    top: 60px; /* 로고를 아래로 내리기 (겹치게 띄움) */
    /*animation: fadeUp 1.2s ease-out;*/
  }

  /*
  @keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}*/

  @media (max-width: 768px) {
    .hc-line {
        position:relative;
        margin-top:-35px;
        z-index:50;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;

        position:relative;
        margin-top:-94px;
        z-index:50;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    
        object-fit: contain;
        position: relative;
        top: 60px; /* 로고를 아래로 내리기 (겹치게 띄움) */
        
    }
}

/* 스크롤시 해더 직사각형 위로 딱 붙게
.sticky-header.scrolled {
    margin:0 !important;
    width:100% !important;
    border-radius: 0 !important;
    transition: all 0.3s !important;
  }*/

  

  /*팝업 css*/
 
  .overlay {  
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.0); /*백그라운드 희미하게*/
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.3s ease;
}

.popup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: black;
  color:white;
  padding-top: 10px;
  padding-left: 10px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
}

.popup-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 5px;
  cursor: pointer;
}

.btn:hover {
  background-color: #555;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}


/*프로젝트 문의*/
.project-contact {
margin-top: 120px;
padding: 100px 20px;
background: #f8f8f8;
}
.project-contact .container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.project-contact .text-area h2 {
font-size: 40px;
font-weight: bold;
margin-bottom: 15px;
}
.project-contact .text-area p {
font-size: 18px;
color: #555;
line-height: 1.6;
margin-bottom: 30px;
}
.project-contact .btn-contact {
display: inline-block;
padding: 14px 28px;
border: 2px solid #000;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: 0.3s;
}
.project-contact .btn-contact:hover {
background: #000;
color: #fff;
}
.project-contact .img-area img {
width: 100%;
max-width: 420px;
border-radius: 8px;
}


@media(max-width: 768px) {
.project-contact .container {
flex-direction: column;
text-align: center;
}
}