.font-family :{ font-family:Montserrat; } @font-face { font-family: 'Montserrat'; src: url('/Montserrat.ttf'); font-weight: normal; font-style: normal; } .imageFile :{ background: linear-gradient(45deg, #CE048C, #4D0A8E) } .text : { text-align:center; top:3.5rem } .texts{ color:white } @font-face { font-family: 'Montserrat'; src: url('Files/Doc Root/files/Montserrat-Regular.ttf'); font-weight: normal; font-style: normal; } .cont { background-color: #f0f0f0; /* Default background color */ transition: background-color 0.3s ease; /* Transition effect for smooth color change */ } .cont:hover{ background-color:black; } .texts{ color:white; transition: color 0.3s ease } .texts:hover{ color:black; } .conts{ background-color: #000000 transition: background-color 0.3s ease; /* Transition effect for smooth color change */ } .conts:hover{ background-color:red; } body { margin: 0; font-family: Arial, sans-serif; } .container { display: flex; flex-wrap: wrap; } /* Media query for mobile view */ @media screen and (max-width: 600px) { .column { flex: 100%; margin-bottom: 15px; } } Mobile Responsive Borders (Two Columns)

100% Secure Payment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas accumsan laoreet lorem, quis blandit odio.

Customer Feedback

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas accumsan laoreet lorem, quis blandit odio.

@media screen and (max-width: 600px) { .box { width: calc(50% - 10px); /* 50% width for each box in mobile view */ } } .slider-container { width: 100%; overflow: hidden; } .slider { display: flex; width: 300%; /* Three slides side by side */ animation: slideAnimation 10s infinite linear; /* Adjust the duration as needed */ } .slide { flex: 1; height: 100vw; /* Set the height to 100% of the viewport width for a square aspect ratio */ max-height: 300px; /* Set a maximum height to avoid overly tall images */ background-size: cover; } #slide1 { background-image: url('slide1.jpg'); } #slide2 { background-image: url('slide2.jpg'); } #slide3 { background-image: url('slide3.jpg'); } @keyframes slideAnimation { 0% { transform: translateX(0%); } 33.33% { transform: translateX(-100%); } 66.66% { transform: translateX(-200%); } 100% { transform: translateX(0%); } } @media (max-width: 768px) { .slide { height: 60vw; /* Adjust the height for smaller screens */ max-height: 300px; /* Set a maximum height to avoid overly tall images */ } } @media(max-width: 767px) { .zpelem-box{ background-size: 100% 100%; padding: 0 !important; } .zs-category[data-element-type="column"]{ width: 50%; } }