/* =========================================================
ICON GIFT — CONTACT SECTION
========================================================= */
#contact-form {
--ig-primary: #00563E;
--ig-primary-dark: #004533;
--ig-primary-light: #78B7A3;
--ig-soft: #F1F6F4;
--ig-border: #DDE7E3;
--ig-black: #111111;
--ig-text: #56605C;
--ig-white: #FFFFFF;
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
gap: 28px !important;
width: 100%;
padding: 85px 35px !important;
background:
radial-gradient(
circle at 92% 5%,
rgba(0,86,62,.07),
transparent 25%
),
#F5F8F7;
font-family: "Tajawal", sans-serif !important;
}
#contact-form,
#contact-form * {
box-sizing: border-box;
font-family: "Tajawal", sans-serif !important;
}
/* =========================================================
COLUMNS
========================================================= */
#cont-form {
flex: 1 1 64% !important;
width: 64%;
padding: 45px 42px !important;
border: 1px solid var(--ig-border);
background: var(--ig-white);
box-shadow:
0 15px 50px rgba(0,58,42,.06);
}
#cont-info {
position: relative;
flex: 1 1 36% !important;
width: 36%;
overflow: hidden;
background:
linear-gradient(
145deg,
#00694C 0%,
#00563E 58%,
#004533 100%
);
box-shadow:
0 20px 55px rgba(0,58,42,.16);
}
/* =========================================================
FORM GENERAL
========================================================= */
#widg-form {
width: 100%;
}
#widg-form .elementor-form {
width: 100%;
}
/* Headings داخل كونتينر الفورم */
#cont-form .elementor-heading-title {
margin: 0 !important;
color: var(--ig-black) !important;
font-size: clamp(30px, 2.5vw, 42px) !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
#cont-form .elementor-widget-text-editor {
color: var(--ig-text) !important;
font-size: 14px;
line-height: 1.8;
}
/* =========================================================
FIELD LAYOUT
========================================================= */
#widg-form .elementor-form-fields-wrapper {
margin-inline: -6px !important;
}
#widg-form .elementor-field-group {
padding-inline: 6px !important;
margin-bottom: 18px !important;
}
/* Label */
#widg-form .elementor-field-label {
margin-bottom: 7px !important;
color: #27312D !important;
font-size: 13px !important;
font-weight: 600 !important;
}
/* Inputs */
#widg-form input.elementor-field,
#widg-form select.elementor-field,
#widg-form textarea.elementor-field {
width: 100% !important;
border: 1px solid #CBD7D3 !important;
border-radius: 0 !important;
color: var(--ig-black) !important;
background: #FFFFFF !important;
outline: none !important;
box-shadow: none !important;
font-size: 14px !important;
transition:
border-color .25s ease,
box-shadow .25s ease;
}
#widg-form input.elementor-field,
#widg-form select.elementor-field {
min-height: 52px !important;
padding: 0 14px !important;
}
#widg-form textarea.elementor-field {
min-height: 145px !important;
padding: 14px !important;
resize: vertical;
}
/* Placeholder */
#widg-form .elementor-field::placeholder {
color: #9DA6A2 !important;
}
/* Focus */
#widg-form input.elementor-field:focus,
#widg-form select.elementor-field:focus,
#widg-form textarea.elementor-field:focus {
border-color: var(--ig-primary) !important;
box-shadow:
0 0 0 3px rgba(0,86,62,.08) !important;
}
/* =========================================================
SUBMIT
========================================================= */
#widg-form .elementor-button {
width: 100% !important;
min-height: 54px !important;
margin-top: 4px;
border: 1px solid var(--ig-primary) !important;
border-radius: 0 !important;
color: #FFFFFF !important;
background: var(--ig-primary) !important;
box-shadow: none !important;
font-size: 15px !important;
font-weight: 700 !important;
transition:
background .25s ease,
border-color .25s ease,
transform .25s ease,
box-shadow .25s ease;
}
#widg-form .elementor-button:hover {
border-color: var(--ig-primary-dark) !important;
background: var(--ig-primary-dark) !important;
box-shadow:
0 10px 25px rgba(0,86,62,.16) !important;
transform: translateY(-2px);
}
/* =========================================================
FORM MESSAGES
========================================================= */
#widg-form .elementor-message {
margin-top: 15px;
padding: 13px 15px;
border: 1px solid var(--ig-border);
font-size: 13px;
}
#widg-form .elementor-message-success {
border-color: rgba(0,86,62,.25);
color: var(--ig-primary-dark);
background: #EAF4F0;
}
/* =========================================================
INFORMATION CARD
========================================================= */
.ig-contact-info {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 100%;
padding: 48px 40px;
color: #FFFFFF;
}
/* =========================================================
HEADER
========================================================= */
.ig-contact-info__header {
position: relative;
z-index: 3;
margin-bottom: 34px;
}
.ig-contact-info__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 13px;
color: #9ACBBB;
font-size: 12px;
font-weight: 700;
}
.ig-contact-info__eyebrow::before {
content: "";
width: 31px;
height: 2px;
background: currentColor;
}
.ig-contact-info h2 {
margin: 0 0 17px;
color: #FFFFFF !important;
font-size: clamp(32px, 3vw, 47px);
font-weight: 700;
line-height: 1.16;
}
.ig-contact-info h2 span {
display: block;
color: #9ACBBB;
}
.ig-contact-info__header > p {
margin: 0;
color: rgba(255,255,255,.70) !important;
font-size: 14px;
line-height: 1.9;
}
/* =========================================================
CONTACT ITEMS
========================================================= */
.ig-contact-info__list {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
margin-bottom: 27px;
}
.ig-contact-info__item {
display: grid;
grid-template-columns: 47px minmax(0,1fr) auto;
align-items: center;
gap: 14px;
min-height: 76px;
padding: 13px 0;
border-bottom: 1px solid rgba(255,255,255,.12);
color: #FFFFFF !important;
text-decoration: none !important;
transition:
padding .25s ease,
border-color .25s ease;
}
.ig-contact-info__item:hover {
padding-right: 7px;
border-color: rgba(154,203,187,.42);
}
/* Icon */
.ig-contact-info__icon {
display: grid;
place-items: center;
width: 45px;
height: 45px;
border: 1px solid rgba(154,203,187,.32);
color: #A1D0C1;
background: rgba(255,255,255,.055);
transition:
background .25s ease,
color .25s ease;
}
.ig-contact-info__item:hover .ig-contact-info__icon {
color: var(--ig-primary);
background: #FFFFFF;
}
.ig-contact-info__icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Text */
.ig-contact-info__item-content {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.ig-contact-info__item-content small {
color: rgba(255,255,255,.54);
font-size: 10px;
font-weight: 400;
}
.ig-contact-info__item-content strong {
overflow-wrap: anywhere;
color: #FFFFFF;
font-size: 13px;
font-weight: 600;
}
/* Arrow */
.ig-contact-info__arrow {
color: rgba(255,255,255,.45);
font-size: 18px;
transition:
color .25s ease,
transform .25s ease;
}
.ig-contact-info__item:hover .ig-contact-info__arrow {
color: #9ACBBB;
transform: translateX(-4px);
}
/* =========================================================
WHATSAPP
========================================================= */
.ig-contact-info__quick {
position: relative;
z-index: 3;
padding: 20px 0 25px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.ig-contact-info__quick > span,
.ig-contact-info__social-area > span {
display: block;
margin-bottom: 11px;
color: rgba(255,255,255,.54);
font-size: 10px;
font-weight: 500;
}
.ig-contact-info__quick-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ig-contact-info__quick-links a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 8px 13px;
border: 1px solid rgba(255,255,255,.18);
color: #FFFFFF !important;
background: rgba(255,255,255,.055);
text-decoration: none !important;
font-size: 11px;
font-weight: 600;
transition:
color .25s ease,
background .25s ease,
border-color .25s ease;
}
.ig-contact-info__quick-links a:hover {
border-color: #FFFFFF;
color: var(--ig-primary) !important;
background: #FFFFFF;
}
/* =========================================================
SOCIAL
========================================================= */
.ig-contact-info__social-area {
position: relative;
z-index: 3;
margin-top: auto;
padding-top: 25px;
}
.ig-contact-info__social {
display: flex;
gap: 8px;
}
.ig-contact-info__social a {
display: grid;
place-items: center;
width: 43px;
height: 43px;
border: 1px solid rgba(255,255,255,.18);
color: #FFFFFF !important;
background: rgba(255,255,255,.045);
transition:
color .25s ease,
background .25s ease,
border-color .25s ease,
transform .25s ease;
}
.ig-contact-info__social a:hover {
border-color: #FFFFFF;
color: var(--ig-primary) !important;
background: #FFFFFF;
transform: translateY(-3px);
}
.ig-contact-info__social svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.65;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
DECOR
========================================================= */
.ig-contact-info::before {
content: "ICON";
position: absolute;
left: -28px;
bottom: -45px;
z-index: 0;
color: rgba(255,255,255,.028);
font-family: Arial, sans-serif !important;
font-size: 120px;
font-weight: 800;
letter-spacing: -8px;
pointer-events: none;
}
.ig-contact-info__decor {
position: absolute;
top: 25px;
left: 25px;
display: flex;
gap: 7px;
}
.ig-contact-info__decor span {
width: 5px;
height: 5px;
border-radius: 50%;
background: #9ACBBB;
}
.ig-contact-info__decor span:nth-child(2) {
opacity: .6;
}
.ig-contact-info__decor span:nth-child(3) {
opacity: .3;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
#contact-form {
gap: 20px !important;
padding: 65px 22px !important;
}
#cont-form {
flex-basis: 60% !important;
width: 60%;
padding: 35px 28px !important;
}
#cont-info {
flex-basis: 40% !important;
width: 40%;
}
.ig-contact-info {
padding: 37px 27px;
}
.ig-contact-info h2 {
font-size: 32px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
#contact-form {
flex-direction: column !important;
gap: 17px !important;
padding: 48px 17px !important;
}
#cont-form,
#cont-info {
width: 100% !important;
flex: 0 0 100% !important;
}
/* المعلومات الأول */
#cont-info {
order: 1;
}
#cont-form {
order: 2;
padding: 30px 18px !important;
}
/* الحقول كلها Full Width على الموبايل */
#widg-form .elementor-field-group {
width: 100% !important;
}
.ig-contact-info {
padding: 36px 23px;
}
.ig-contact-info__header {
margin-bottom: 25px;
}
.ig-contact-info h2 {
font-size: 32px;
}
.ig-contact-info__header > p {
font-size: 13px;
}
.ig-contact-info__social-area {
margin-top: 22px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
#contact-form {
padding-inline: 12px !important;
}
#cont-form {
padding-inline: 14px !important;
}
.ig-contact-info {
padding-inline: 19px;
}
.ig-contact-info__item {
grid-template-columns: 43px minmax(0,1fr);
}
.ig-contact-info__arrow {
display: none;
}
}
