:root {

  /**
   * colors
   */

  --maximum-blue-green_10: hsla(185, 75%, 45%, 0.1);
  --rich-black-fogra-29: hsl(217, 28%, 9%);
  --gray-x-11-gray: hsl(0, 0%, 74%);
  --oxford-blue_60: hsla(230, 41%, 14%, 0.6);
  --bittersweet: hsl(5, 100%, 69%);
  --smoky-black: rgb(7, 6, 1);
  --gainsboro: hsl(0, 0%, 88%);
  --black_90: hsla(0, 0%, 0%, 0.9);
  --cultured: hsl(200, 12%, 95%);
  --salmon: hsl(5, 100%, 73%);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --onyx: hsl(0, 0%, 27%);

  /**
   * typography
   */
  
  --ff-roboto: 'Roboto', sans-serif;
  --ff-josefin-sans: 'Josefin Sans', sans-serif;

  --fs-1: 3rem;
  --fs-2: 2.6rem;
  --fs-3: 2.2rem;
  --fs-4: 2rem;
  --fs-5: 1.8rem;
  --fs-6: 1.6rem;
  --fs-7: 1.4rem;
  --fs-8: 1.2rem;

  --fw-300: 300;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /**
   * transition
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --cubic-out: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-in: cubic-bezier(0.33, 0.85, 0.56, 1.02);

  /**
   * spacing
   */

  --section-padding: 60px;

}
.contact-modern {
  background: #f4f6f9;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.contact-box {
  display: flex;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  max-width: 1000px;
  width: 100%;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* LEFT SIDE */
.contact-left {
  flex: 1;
  padding: 40px;
}

.contact-left h2 {
  font-size: 32px;
  margin-bottom: 25px;
  color: #2c3e50;
}

.input-box {
  margin-bottom: 15px;
}

.input-box input,
.input-box textarea {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 25px;
  background: #e9eef3;
  font-size: 14px;
  outline: none;
}

.input-box textarea {
  border-radius: 15px;
}

.contactbtn{
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 25px;
  background: var(--bittersweet);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: var(--salmon);
  transform: scale(1.03);
}

/* RIGHT SIDE */
.contact-right {
  flex: 1;
  background: linear-gradient(135deg, #ffffff, #ffffff);
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-right img {
  width: 80%;
  max-width: 300px;
}

/* RESPONSIVE */
@media(max-width: 768px) {
  .contact-box {
    flex-direction: column;
  }

  .contact-right {
    display: none;
  }
}








/* Disable text selection and long-press menu on mobile */
* {
  -webkit-touch-callout: none;  /* iOS — disables long-press save image */
  -webkit-user-select: none;    /* Chrome/Safari */
  -moz-user-select: none;       /* Firefox */
  -ms-user-select: none;        /* IE */
  user-select: none;            /* Standard */
}

/* Re-enable selection only on inputs and textareas */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}