.grid-container {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 30px;
     justify-content: space-evenly;
     align-items: center;
     justify-items: center;
 }

 /* For screens below 1200px — 4 columns */
 @media (max-width: 1300px) {
     .grid-container {
         grid-template-columns: repeat(3, 1fr) !important;
     }

     .round-step {
         margin: 0px;
         color: #000;
         font-size: 22px !important;
         line-height: 23px !important;
         font-family: "Itim", cursive;
     }

     .round-skew {
         width: 100% !important;
         height: max-content;
         background-color: #F8E3F0;
         padding: 15px 30px;
         margin-left: 5%;
         text-align: left;
         text-transform: uppercase;
         margin-bottom: 25px;
         margin-top: 50px;
         transform: skew(-30deg);
     }

     .round-skew1 {
         width: 100% !important;
         height: max-content;
         text-transform: uppercase;
         background-color: #8561A9;
         padding: 15px 30px;
         margin-left: 5%;
         text-align: left;
         margin-bottom: 25px;
         margin-top: 50px;
         transform: skew(-30deg);
     }

     .round-skew p {
         margin: 0px;
         color: #000;
         transform: skew(30deg);
         font-size: 22px !important;
         line-height: 23px !important;
         font-family: "Itim", cursive;
     }

     .round-skew1 p {
         margin: 0px;
         color: #fff;
         transform: skew(30deg);
         font-size: 22px !important;
         line-height: 32px !important;
         font-family: "Itim", cursive;
     }

     .round-centent {
         height: 310px !important;
         width: 310px !important;
         margin: 50px 0px;
         border-radius: 50%;
         background: linear-gradient(to top, #E4E5E3 0%, #fff 100%);
         position: relative;
         text-align: center;
         padding: 20px;
         box-sizing: border-box;
     }
 }

 @media screen and (max-width: 480px) {
     .why-choose-section {
         position: relative;
         background: url(../img/about/bg1.svg) center / cover no-repeat;
         height: inherit !important;
         display: flex;
         padding: 50px 0px;
         align-items: center;
         justify-content: center;
         color: #fff;
         text-align: center;
         overflow: hidden;
     }
 }

 @media screen and (min-width: 481px) and (max-width: 767px) {
     .why-choose-section {
         position: relative;
         background: url(../img/about/bg1.svg) center / cover no-repeat;
         height: inherit !important;
         display: flex;
         padding: 50px 0px;
         align-items: center;
         justify-content: center;
         color: #fff;
         text-align: center;
         overflow: hidden;
     }
 }

 @media screen and (min-width: 768px) and (max-width: 991px) {
     .why-choose-section {
         position: relative;
         background: url(../img/about/bg1.svg) center / cover no-repeat;
         height: inherit !important;
         display: flex;
         padding: 50px 0px;
         align-items: center;
         justify-content: center;
         color: #fff;
         text-align: center;
         overflow: hidden;
     }
 }

 /* For screens below 992px — 3 columns */
 @media (max-width: 992px) {
     .grid-container {
         grid-template-columns: repeat(2, 1fr) !important;
     }
 }

 /* For screens below 768px — 2 columns */
 @media (max-width: 768px) {
     .grid-container {
         grid-template-columns: repeat(2, 1fr) !important;
     }
 }

 /* For screens below 576px — 1 column */
 @media (max-width: 576px) {
     .grid-container {
         grid-template-columns: 1fr !important;
     }
 }

 .round-skew {
     height: max-content;
     background-color: #F8E3F0;
     padding: 15px 30px;
     margin-left: 5%;
     text-align: left;
     text-transform: uppercase;
     margin-bottom: 25px;
     margin-top: 50px;
     transform: skew(-30deg);
 }

 .round-skew1 {
     height: max-content;
     background-color: #8561A9;
     padding: 15px 30px;
     margin-left: 5%;
     text-transform: uppercase;
     text-align: left;
     margin-bottom: 25px;
     margin-top: 50px;
     transform: skew(-30deg);
 }

 .why-choose-us {
     margin-top: 50px;
 }

 @media screen and (min-width: 1200px) and (max-width: 1439px) {
     .why-choose-content img {
         width: 170px;
     }

     .why-choose-section {
         position: relative;
         background: url(../img/about/bg1.svg) center / cover no-repeat;
         height: 390px !important;
         display: flex;
         padding: 50px 0px;
         align-items: center;
         justify-content: center;
         color: #fff;
         text-align: center;
         overflow: hidden;
     }
 }

 @media screen and (min-width: 1440px) and (max-width: 1918px) {
     .why-choose-content img {
         width: 250px;
     }

     .why-choose-section {
         position: relative;
         background: url(../img/about/bg1.svg) center / cover no-repeat;
         display: flex;
         padding: 50px 0px;
         align-items: center;
         justify-content: center;
         color: #fff;
         text-align: center;
         overflow: hidden;
     }

     .round-step {
         margin: 0px;
         color: #000;
         font-size: 23px !important;
         line-height: 27px !important;
         font-family: "Itim", cursive;
     }

     .round-centent {
         height: 320px !important;
         width: 320px !important;
         margin: 50px 0px;
         border-radius: 50%;
         background: linear-gradient(to top, #E4E5E3 0%, #fff 100%);
         position: relative;
         text-align: center;
         padding: 20px;
         box-sizing: border-box;
     }

     .round-skew p {
         margin: 0px;
         color: #000;
         text-transform: uppercase;
         transform: skew(30deg);
         font-size: 22px !important;
         line-height: 33px !important;
         font-family: "Itim", cursive;
     }

     .round-skew1 p {
         margin: 0px;
         color: #fff;
         transform: skew(30deg);
         text-transform: uppercase;
         font-size: 22px !important;
         line-height: 33px !important;
         font-family: "Itim", cursive;
     }

     .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr) !important;
         gap: 30px;
         justify-content: space-evenly;
         align-items: center;
         justify-items: center;
     }
 }

 @media screen and (min-width: 1919px) {
     .grid-container {
         grid-template-columns: repeat(4, 1fr) !important;
     }

     .round-img {
         position: absolute;
         margin-top: -55px !important;
     }

     .round-step {
         margin: 0px;
         color: #000;
         font-size: 20px !important;
         line-height: 30px !important;
         font-family: "Itim", cursive;
     }

     .round-skew p {
         margin: 0px;
         color: #000;
         transform: skew(30deg);
         text-transform: uppercase;
         font-size: 30px !important;
         line-height: 40px !important;
         font-family: "Itim", cursive;
     }

     .why-choose-section {
         position: relative;
         background: url(../img/about/bg1.svg) center / cover no-repeat;
         height: 600px !important;
         display: flex;
         padding: 50px 0px;
         align-items: center;
         justify-content: center;
         color: #fff;
         text-align: center;
         overflow: hidden;
     }

     .why-choose-content {
         margin-top: 110px !important;
     }

     .why-choose-content p {
         font-size: 24px !important;
         font-weight: 500;
     }

     .round-centent {
         height: 425px !important;
         width: 425px !important;
     }

     .why-choose-content img {
         width: 300px !important;
     }

     .round-step {
         margin: 0px;
         color: #000;
         font-size: 28px !important;
         line-height: 38px !important;
         font-family: "Itim", cursive;
     }

     .round-skew {
         width: 100% !important;
         height: max-content;
         background-color: #F8E3F0;
         padding: 15px 30px;
         margin-left: 5%;
         text-align: left;
         text-transform: uppercase;
         margin-bottom: 25px;
         margin-top: 50px;
         transform: skew(-30deg);
     }

     .round-skew1 {
         width: 100%;
         height: max-content;
         background-color: #8561A9;
         padding: 15px 30px;
         margin-left: 5%;
         text-transform: uppercase;
         text-align: left;
         margin-bottom: 25px;
         margin-top: 50px;
         transform: skew(-30deg);
     }

     .round-skew1 p {
         margin: 0px;
         color: #fff;
         transform: skew(30deg);
         text-transform: uppercase;
         font-size: 30px !important;
         line-height: 40px !important;
         font-family: "Itim", cursive;
     }

     .round-centent {
         margin: 50px 0px;
         border-radius: 50%;
         text-transform: inherit;
         background: linear-gradient(to top, #E4E5E3 0%, #fff 100%);
         position: relative;
         text-align: center;
         padding: 20px;
         box-sizing: border-box;
     }
 }

 .why-choose-section {
     position: relative;
     background: url('../img/about/bg1.svg') center/cover no-repeat;
     height: 550px;
     display: flex;
     padding: 50px 0px;
     align-items: center;
     justify-content: center;
     color: #fff;
     text-align: center;
     overflow: hidden;
 }

 /* Purple overlay */
 .why-choose-section::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(133, 97, 169, 0.7);
     z-index: 1;
 }

 .why-choose-content {
     position: relative;
     z-index: 2;
     color: #fff;
 }

 .random {
     color: #fff;
     font-size: 24px;
     font-family: "Roboto", sans-serif;
 }

 .why-choose-content h2 {
     text-transform: uppercase;
     font-size: 36px;
     letter-spacing: 1px;
     font-family: "Itim", cursive;
     color: #fff;
     margin-bottom: 0px;
 }

 .circle84 {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     background: #fff;
     color: #673496;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 36px;
     font-weight: 700;
     margin: 0 auto 20px;
     border: 6px solid #c2a1e1;
     position: relative;
 }

 .circle84::before {
     content: "";
     position: absolute;
     top: -10px;
     left: -10px;
     right: -10px;
     bottom: -10px;
     border: 3px dashed #fff;
     border-radius: 50%;
 }

 .why-choose-content p {
     font-size: 18px;
     font-weight: 500;
 }

 .round-centent {
     height: 270px;
     width: 270px;
     margin: 50px 0px;
     border-radius: 50%;
     background: linear-gradient(to top, #E4E5E3 0%, #fff 100%);
     position: relative;
     text-align: center;
     padding: 20px;
     box-sizing: border-box;
 }

 .round-step {
     margin: 0px;
     color: #000;
     font-size: 13px;
     line-height: 16px;
     font-family: "Itim", cursive;
 }

 .round-img {
     position: absolute;
     margin-top: -70px;
 }

 .round-skew p {
     margin: 0px;
     color: #000;
     transform: skew(30deg);
     text-transform: uppercase;
     font-size: 12px;line-height: 22px;
     font-family: "Itim", cursive;
 }

 .round-skew1 p {
     margin: 0px;
     color: #fff;
     text-transform: uppercase;
     transform: skew(30deg);
     font-size: 12px;
     line-height: 22px;
     font-family: "Itim", cursive;
 }

 .round-centent::before {
     border-radius: 100%;
     content: '';
     background-image: linear-gradient(to bottom, #ccc 0%, #fff 100%);
     box-shadow: 0px 50px 50px #ccc;
     top: -5px;
     left: -5px;
     bottom: -5px;
     right: -5px;
     position: absolute;
     z-index: -1;
 }

 .contact-section {
     padding: 80px 20px;
     margin-top: -200px;
     position: relative;
     z-index: 9;
     display: flex;
     justify-content: center;
     align-items: center;
 }


 /* White card */
 .contact-container {
     background: #fff;
     border-radius: 25px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     max-width: 1100px;
     width: 100%;
     padding: 40px 30px;
 }

 .contact-container h2 {
     text-align: center;
     font-family: "Itim", cursive;
     color: #8561A9;
     font-size: 32px;
     margin-bottom: 30px;
 }

 /* Bootstrap-like row simulation (if you’re not using real Bootstrap) */

 /* Contact Form */
 .contact-form label {
     display: block;
     font-size: 15px;
     color: #000;
     font-family: "Roboto", sans-serif;
     margin-bottom: 6px;
 }

 .contact-form input {
     width: 100%;
     padding: 5px 14px;
     margin-bottom: 14px;
     border-radius: 12px;
     border: 1px solid #eee;
     background: #F8E3F0;
     font-size: 15px;
     height: 40px;
     color: #000;
     font-family: "Roboto", sans-serif;
 }

 .contact-form input:focus {
     outline: none;
     border-color: #8561A9;
 }

 .contact-form button {
     width: 100%;
     padding: 12px;
     border: none;
     border-radius: 8px;
     background: #6a2c91;
     color: #fff;
     font-size: 15px;
     font-weight: 500;
     cursor: pointer;
     transition: 0.3s;
 }

 .contact-form button:hover {
     background: #8561A9;
 }

 /* Map */
 .contact-map {
     position: relative;
     height: 100%;
     background: rgba(133, 97, 169, 0.7);
     min-height: 420px;
     border-radius: 20px;
     overflow: hidden;
 }

 .contact-map iframe {
     width: 100%;
     height: 100%;
     background: rgba(133, 97, 169, 0.7);
     border: 0;
 }

 /* Purple Info Box */
 .map-overlay {
     position: absolute;
     bottom: 20px;
     left: 20px;
     right: 20px;
     background-color: #8561A9;
     color: #fff;
     border-radius: 12px;
     padding: 20px;
     font-size: 14px;
     line-height: 1.5;
 }

 .map-overlay p {
     margin-bottom: 25px;
     display: flex;
     color: #fff;
     align-items: flex-start;
     gap: 8px;
 }

 .map-overlay i {
     display: inline-flex;
     justify-content: center;
     align-items: center;
     background: #fff;
     color: #6a2c91;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     font-size: 12px;
 }

 /* Responsive layout */
 @media (max-width: 992px) {
     .row {
         flex-direction: column;
     }

     .col-md-5,
     .col-md-7 {
         max-width: 100%;
         flex: 0 0 100%;
     }

     .contact-map {
         min-height: 300px;
         margin-top: 20px;
     }
 }

 /* Hesed midsection: purple band with wavy top & bottom and CTA button */
 .hesedmidsection {
     position: relative;
     background: #6a2c91;
     /* primary purple */
     color: #fff;
     overflow: hidden;
 }

 .hesed-wave {
     position: absolute;
     left: 0;
     width: 100%;
     height: 100px;
     line-height: 0;
     pointer-events: none;
 }

 .hesed-wave svg {
     display: block;
     width: 100%;
     height: 100%;
 }

 .hesed-wave-top {
     top: 0;
     transform: translateY(-1px);
 }

 .hesed-wave-bottom {
     bottom: 0;
     transform: translateY(1px);
 }

 .hesed-content {
     padding: 80px 20px;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 240px;
 }

 .hesed-inner {
     max-width: 980px;
 }

 .hesed-title {
     font-family: 'Poppins', sans-serif;
     font-size: 42px;
     margin: 0 0 10px;
     color: #fff;
     letter-spacing: 0.6px;
 }

 .hesed-sub {
     margin: 0 0 20px;
     font-size: 18px;
     color: rgba(255, 255, 255, 0.95);
 }

 .hesed-btn {
     display: inline-block;
     background: #ffffff;
     color: #6a2c91;
     padding: 12px 28px;
     border-radius: 30px;
     font-weight: 600;
     text-decoration: none;
     box-shadow: 0 6px 18px rgba(106, 44, 145, 0.16);
     transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
 }

 .hesed-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 26px rgba(106, 44, 145, 0.22);
 }

 @media (max-width: 768px) {
     .hesed-title {
         font-size: 28px;
     }

     .hesed-content {
         padding: 40px 16px;
         min-height: 180px;
     }

     .hesed-sub {
         font-size: 15px;
     }
 }