.contact-section-page {
     margin-top: 50px;

 }

 .contact-section {
     position: relative;

 }

 .contact-container {
     max-width: 1140px;
     margin: 0 auto;
     padding: 20px 20px;
 }

 .contact-section svg {
     position: absolute;
     fill: var(--helperColor);
     right: 0;
     left: 0;
     height: 20px;
     width: 100%;
 }

 .contact-section-header {
     text-align: center;
     margin-bottom: 40px;
 }

 .contact-section-title {
     display: inline-block;
     font-size: 32px;
     font-weight: 700;
     margin-block: 30px;
     color: var(--helperColor);
     position: relative;
 }

 .contact-section-title::after {
     content: "";
     position: absolute;
     width: 100%;
     height: 5px;
     border-radius: 25px;
     bottom: -10%;
     left: 0;
     background-image: linear-gradient(90deg, var(--lightHelper) 0%, var(--lightHelper) 100%);

 }



 .contact-grid {
     display: grid;
     gap: 40px;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     align-items: center
 }

 /* معلومات الاتصال */
 .contact-info {
     background-color: var(--helperColor);
     display: flex;
     padding: 20px;
     height: 100%;
     flex-direction: column;
     /* gap: 20px; */
     background-size: cover;
     background-position: center;
     border-radius: 20px;
 }

 .f-col {
     flex-direction: column;
 }

 .info-item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 16px;
     color: var(--white);
     border-bottom: .5px dashed #ffffff;
 }

 .info-item .info {
     width: 100%;
     display: flex;
     gap: 10px;
 }

 .info-icon i {
     font-size: 25px;
     text-align: center;
     color: var(--white);
 }

 .info-item h4 {
     margin: 0 0 6px;
     font-size: 20px;
     color: var(--white);
     font-weight: 700;
 }

 .info-item a {
     margin: 0;
     font-size: 19px;
     color: var(--white);
 }

 .contact-right {
     display: flex;
     margin-top: 20px;
     justify-content: center;
     align-items: center;
     gap: 12px;
 }

 .contact-socials a {
     margin-left: 10px;
     color: var(--white);
     text-decoration: none;
     font-size: 30px;
 }



 /* النموذج */
 .contact-form {
     background: #EFEBF1;
     border-radius: 20px;
     padding: 30px;
     height: 100%;
     box-shadow: var(--shadow);
     display: flex;
     justify-content: center;
     gap: 16px;
 }

 .contact-form img {
     width: 100%;
     aspect-ratio: 1/1;
 }

 @media (max-width: 576px) {
     .contact-socials a {
         margin-left: 1px;
         padding: 2px 3px;
         font-size: 24px;
     }

 }

 /* ---------------- map section --------------------------------- */

 .address-container {
     margin: auto;
     width: 90%;
     transition: transform 0.4s ease-in;
 }

 .address-container:hover {
     transform: scale(1.01);
 }

 .address-title {
     text-align: center;
     align-content: center;
     margin: 40px auto;
     width: fit-content;
     margin: 0px auto 30px auto;
     border-bottom: 4px solid var(--middleColor);


 }

 .address-title h1 {
     font-size: 2.5rem;
     color: var(--primaryColor);

 }

 .address-title p {

     font-size: 1.5rem;
     color: var(--middleColor);
 }

 /* موبايل */
 @media (max-width: 768px) {
     .contact-section-header {

         margin-block: 30px;
     }

     .contact-flow {
         flex-direction: column;
         align-items: center;
         gap: 20px;
     }

     .flow-item::after {
         display: none;
     }

     .contact-list a {
         font-size: 18px;
         font-weight: 600;
     }

     /* العناوين */
     .flow-item h3 {
         font-size: 32px;
         margin-bottom: 10px;
         color: var(--helperColor);
     }

     .info-item a {
         font-size: 16px;
     }

     .info-item p {
         font-size: 19px;
     }

     #projects,
     #skills-slider,
     .none {
         display: none !important;
     }

     .s-t-p .contact-section-header {
         margin-top: 0px;
     }

     .s-t-p .contact-container {
         padding-bottom: 0px;
     }

     .m-top .services-container {
         padding-bottom: 0px;
     }
 }