* {
box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
font-family: 'Cairo', sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
*:not(dialog) {
margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
html {
interpolate-size: allow-keywords;
}
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
#root, #__next {
isolation: isolate;
}
button {
border: none;
background-color: transparent;
color: #000000;
padding: 8px;
font-size: 1.5rem;
font-weight: 500;
line-height: 1;
cursor: pointer;
border-radius: 4px;
transition: 0.2s all ease-in-out;
img {
width: 25px;
}
}
/* Main */
main {
overflow: hidden;
max-width: 768px;
margin: 30px auto;
background-color: #fffdf7;
background-color: #FFFFFF;
border-radius: 16px;
box-shadow: 0 0 100px 0px #cacaca;
@media (max-width: 552px) {
margin-block: 10px;
}
.container {
width: 100%;
}
}
/* Header */
header {
/* background: linear-gradient(90deg, #050f23 0%, #050f23 25%, #2c385e 50%, #F2F2F2 75%, #FFFFFF 100%); */
color: #1B2C5C;
position: relative;
overflow: hidden;
box-shadow: 0 0 10px 0px #cacaca;
&::before {
content: "";
position: absolute;
top: -60px;
right: -60px;
width: 260px;
height: 260px;
border-radius: 50%;
border: 50px solid rgba(26, 143, 168, 0.035);
}
&::after {
content: "";
position: absolute;
bottom: -80px;
left: -40px;
width: 200px;
height: 200px;
border-radius: 50%;
border: 35px solid rgba(26, 143, 168, 0.1);
}
.container {
padding: 32px 40px 28px;
position: relative;
z-index: 1;
@media (max-width: 552px) {
padding: 32px 20px 28px;
}
.inside {
.parent {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
@media (max-width: 552px) {
gap: 15px;
}
.start {
display: flex;
align-items: center;
gap: 10px;
.logo {
img {
width: 100px;
height: auto;
max-width: 100%;
@media (max-width: 552px) {
width: 80px;
}
}
}
.name {
display: flex;
flex-direction: column;
h1 {
color: #1B2C5C;
font-size: 1.15rem;
font-weight: 700;
@media (max-width: 552px) {
font-size: 1rem;
}
&.en {
letter-spacing: 1px;
}
}
}
}
.end {
.contact {
ul {
display: flex;
flex-direction: column;
gap: 2px;
li {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
p {
font-size: 0.9rem;
font-weight: 500;
svg {
width: 20px;
stroke-width: 1.5px;
stroke: #1B2C5C;
fill: #1B2C5C;
}
}
a {
color: inherit;
font-weight: 600;
letter-spacing: 0.2px;
}
}
}
}
}
}
}
}
}
/* Section */
section {
border-radius: 12px;
overflow: hidden;
.container {
.inside {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 10px #9e9e9e;
display: flex;
flex-direction: column;
gap: 20px;
.top-section {
background: linear-gradient(150deg, #BBA16B 0%, #051536 60%, #01051c 100%);
background: #F8FAFB;
border-bottom: 1px solid #E4EBF0;
display: flex;
align-items: center;
gap: 10px;
padding: 18px 40px;
@media (max-width: 552px) {
padding-inline: 20px;
}
.character {
width: 4px;
height: 45px;
background: linear-gradient(180deg, #D4A842, #1A8FA8);
border-radius: 2px;
flex-shrink: 0;
}
.text {
display: flex;
flex-direction: column;
.title {
h2 {
font-size: 1.4rem;
font-weight: 600;
}
}
.sub-title {
display: none;
p {
opacity: 0.85;
}
}
}
}
.body-section {
padding: 10px;
.cards {
&.banks-cards {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 10px;
.card {
flex-basis: 100%;
box-shadow: 0 2px 12px rgba(6,46,68,0.07);
border-radius: 12px;
overflow: hidden;
transition: 0.5s all ease-in-out;
&.riyadh-bank {
.top-card {
background: linear-gradient(135deg, rgba(0, 178, 154), rgba(0, 178, 154, 0.3));
background: linear-gradient(270deg, rgba(0, 178, 154) 0%, rgba(0, 178, 154, 0.3) 40%, rgba(0, 178, 154, 0.1) 60%, rgba(255, 255, 255) 100%);
}
}
&.alrajhi-bank {
.top-card {
background: linear-gradient(135deg, rgba(21, 15, 224), rgba(21, 15, 224, 0.3));
background: linear-gradient(270deg, rgba(21, 15, 224) 0%, rgba(21, 15, 224, 0.3) 40%, rgba(21, 15, 224, 0.1) 60%, rgba(255, 255, 255) 100%);
}
}
&.alahli-bank {
.top-card {
background: linear-gradient(135deg, rgba(43, 133, 56), rgba(43, 133, 56, 0.3));
background: linear-gradient(270deg, rgba(43, 133, 56) 0%, rgba(43, 133, 56, 0.3) 40%, rgba(43, 133, 56, 0.1) 60%, rgba(255, 255, 255) 100%);
img {
width: 70px !important;
}
}
}
&:hover {
transform: translateY(-2px) scale(1.01);
}
.top-card {
height: 70px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 20px;
.content {
display: flex;
align-items: center;
gap: 5px;
color: #000000;
text-decoration: none;
.logo {
img {
width: 100px;
}
}
.text {
.title {
h3 {
font-size: 1.2rem;
font-weight: 600;
}
}
}
}
}
.body-card {
width: 100%;
border: 1px solid #E4EBF0;
.numbers {
display: flex;
flex-direction: column;
.number {
padding: 10px;
display: flex;
justify-content: space-between;
align-items: flex-start;
align-items: center;
&:first-child {
border-bottom: 1px solid #E4EBF0;
}
.start {
.title {
h4 {
font-size: 1rem;
font-weight: 500;
opacity: 0.85;
}
}
.no {
color: #000000;
text-decoration: none;
p {
font-size: 1.1rem;
font-weight: 500;
color: #000000;
text-decoration: none;
}
}
}
}
}
}
}
}
&.info-cards {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 10px;
.card {
flex-basis: calc(50% - 5px);
box-shadow: 0 0 20px #dcdbdb;
border-radius: 8px;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
@media (max-width: 552px) {
flex-basis: 100%;
}
.start {
display: flex;
align-items: center;
gap: 10px;
.icon {
max-width: max-content;
padding: 10px;
border-radius: 4px;
background: linear-gradient(135deg, #0A4B6E, #1A8FA8);
background: linear-gradient(135deg, #030629, #5192cf);
img {
width: 25px;
}
}
.text {
.title {
h4 {
font-size: 0.875rem;
font-weight: 500;
}
}
.no {
font-size: 0.875rem;
font-weight: 500;
a {
color: inherit;
}
}
}
}
.end {
img {
width: 80px;
height: auto;
}
}
}
}
}
}
}
}
}