1<style>
2 .why-us-section {
3 font-family: Arial, sans-serif;
4 padding: 40px 20px;
5 max-width: 1200px;
6 margin: auto;
7 }
8 .why-us-top-content {
9 margin-bottom: 30px;
10 }
11 .why-us-subheading {
12 font-size: 14px;
13 font-weight: bold;
14 color: #888;
15 text-transform: uppercase;
16 letter-spacing: 1px;
17 margin-bottom: 8px;
18 }
19 .why-us-heading {
20 font-size: 32px;
21 font-weight: 700;
22 margin-bottom: 24px;
23 }
24 .heading-black {
25 color: #000000;
26 }
27 .heading-blue {
28 color: #005ABE;
29 margin-left: 0.2em;
30 }
31 .why-us-top-content p {
32 font-size: 16px;
33 line-height: 1.6;
34 color: #555;
35 }
36 .why-us-bold-text {
37 font-weight: 600;
38 color: #333;
39 margin-bottom: 1em;
40 }
41 .why-us-bottom-content {
42 display: flex;
43 gap: 40px;
44 align-items: flex-start;
45 }
46 .features-list-wrapper {
47 flex: 1;
48 }
49 .features-image-wrapper {
50 flex: 1;
51 }
52 .features-list {
53 list-style: none;
54 padding: 0;
55 margin: 0;
56 }
57 .feature-item {
58 display: flex;
59 align-items: center;
60 margin-bottom: 15px;
61 font-size: 16px;
62 color: #333;
63 }
64 .feature-item::before {
65 content: '\2713';
66 display: flex;
67 align-items: center;
68 justify-content: center;
69 width: 24px;
70 height: 24px;
71 border-radius: 50%;
72 background-color: rgba(0, 90, 190, 1);
73 color: #fff;
74 font-weight: bold;
75 margin-right: 15px;
76 font-size: 14px;
77 }
78 .rtl .feature-item::before {
79 margin-left: 15px;
80 margin-right: 0px;
81
82}
83 .image-container-bordered {
84 position: relative;
85 padding: 1.5px;
86 border-top-left-radius: 42px;
87 border-bottom-right-radius: 42px;
88 background: linear-gradient(174.46deg, rgba(31, 124, 220, 0.71) 32.34%, #FFCC88 56.05%, rgba(0, 180, 220, 0.58) 95.58%);
89 }
90 .image-inner-container {
91 background-color: #fff;
92 padding: 16px;
93 border-top-left-radius: 41px;
94 border-bottom-right-radius: 41px;
95 }
96 .image-container-bordered img {
97 display: block;
98 width: 100%;
99 border-top-left-radius: 25px;
100 border-bottom-right-radius: 25px;
101 }
102
103 @media (max-width: 768px) {
104 .why-us-bottom-content {
105 flex-direction: column;
106 }
107 .why-us-heading {
108 font-size: 26px;
109 }
110 }
111
112 @media (max-width: 480px) {
113 .why-us-section {
114 max-width:480px;
115 }
116
117 .rtl .feature-item::before {
118 margin-left: 15px;
119 margin-right: 0px;
120
121}
122 }
123</style>
124
125<div class="why-us-section">
126 <div class="why-us-top-content">
127 <#if aboutsubhead.getData()?has_content>
128 <h3 class="why-us-subheading">${aboutsubhead.getData()}</h3>
129 </#if>
130
131 <#if aboutheadback4.getData()?has_content && secondpartofheading.getData()?has_content>
132 <h2 class="why-us-heading">
133 <span class="heading-black">${aboutheadback4.getData()}</span>
134 <span class="heading-blue">${secondpartofheading.getData()}</span>
135 </h2>
136 </#if>
137
138 <#if aboutbold4.getData()?has_content>
139 <p class="why-us-bold-text">${aboutbold4.getData()}</p>
140 </#if>
141
142 <#if aboutpara4.getData()?has_content>
143 <p>${aboutpara4.getData()}</p>
144 </#if>
145 </div>
146
147 <div class="why-us-bottom-content">
148 <div class="features-list-wrapper">
149 <ul class="features-list">
150 <#if aboutfiled4.getSiblings()?has_content>
151 <#list aboutfiled4.getSiblings() as item>
152 <#if item.aboutbullet.getData()?has_content>
153 <li class="feature-item">${item.aboutbullet.getData()}</li>
154 </#if>
155 </#list>
156 </#if>
157 </ul>
158 </div>
159 <div class="features-image-wrapper">
160 <#if Image4.getData()?has_content>
161 <div class="image-container-bordered">
162 <div class="image-inner-container">
163 <img src="${Image4.getData()}" alt="${Image4.getAttribute("alt")!}" />
164 </div>
165 </div>
166 </#if>
167 </div>
168 </div>
169</div>
