Update stylep.css

bhaskarr103 · Apr 2, 2024 · 47f6a9e · 47f6a9e
1 parent 1e4d7ff
commit 47f6a9e
Showing 1 changed file with 126 additions and 56 deletions.
diff --git a/stylep.css b/stylep.css
@@ -268,106 +268,176 @@
     grid-template-columns: repeat(2, 1fr);
     align-items: center;
     gap: 1.5rem;
-}
+ }
 .about-img img{
     padding-bottom: 20%;
     max-width: 630px;
     height: auto;
     width: 100%;
     border-radius: 8px;
-}
+ }
 .about-text h2{
     font-size: 60px;
-}
+ }
 .about-text h2 span{
     color: rgb(220, 157, 228);
-}
+ }
 .about-text h4{
     font-size: 29px;
     font-weight: 600;
     color: #fff;
     line-height: 1.4;
     margin: 15px 0 30px;
-}
+ }
 .about-text p{
     color: aliceblue;
     font-size: 20px;
     line-height: 1.4;
     margin-bottom: 4rem
-}
+ }
+
+
+/* Base styles */
+.services-container {
+   position: relative;
+   max-width: 600px; /* Adjust as needed */
+   margin: auto;
+   overflow: hidden;
+ }
+
+.carousel {
+   display: flex;
+ }
+
+.carousel-item {
+   min-width: 100%;
+   transition: transform 0.5s ease;
+ }
+
+.carousel-control {
+   position: absolute;
+   top: 50%;
+   transform: translateY(-50%);
+   font-size: 2rem;
+   color: var(--main-color);
+   cursor: pointer;
+ }
+
+.carousel-control.prev {
+   left: 10px;
+ }
+
+.carousel-control.next {
+   right: 10px;
+ }
+
+/* Responsive styles */
+@media (max-width: 768px) {
+    .sub-title {
+        font-size: 40px; /* Smaller font size for sub-titles */
+        padding-bottom: 50px;
+    }
+
+    .services-list {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust grid layout for smaller screens */
+        grid-gap: 20px;
+    }
+
+    .carousel-control {
+        font-size: 1.5rem; /* Smaller controls */
+    }
+ }
+
+@media (max-width: 480px) {
+    .sub-title {
+        font-size: 30px; /* Even smaller font size for sub-titles */
+        padding-bottom: 30px;
+    }
+
+    .services-list {
+        grid-template-columns: 1fr; /* Single column layout for very small screens */
+    }
+
+    .carousel-control {
+        font-size: 1rem; /* Even smaller controls */
+        top: 40%; /* Adjust position to better fit the content */
+    }
+ }
+
+
 #services{
-    color: aliceblue;
-    font-size: 20px;
-    line-height: 1.4;
-    margin-bottom: 4rem;
+   color: aliceblue;
+   font-size: 20px;
+   line-height: 1.4;
+   margin-bottom: 4rem;
 }
 .sub-title{
-    text-align: center;
-    font-size: 60px;
-    padding-bottom: 70px;
+   text-align: center;
+   font-size: 60px;
+   padding-bottom: 70px;
 }
 .sub-title span{
-    color: rgb(220, 157, 228);
+   color: rgb(220, 157, 228);
 }
 .container{
-    padding: 90px;
+   padding: 90px;
 }
 .services-list{
-    display: grid;
-    grid-template-columns: repeat(auto-fit,minmax(259px,1fr));
-    grid-gap: 40px;
-    margin-top: 50px;
+   display: grid;
+   grid-template-columns: repeat(auto-fit,minmax(259px,1fr));
+   grid-gap: 40px;
+   margin-top: 50px;
 }
 .services-list div{
-    background-color: transparent;
-    padding: 40px;
-    font-size: 13px;
-    font-weight: 13px;
-    border-right: 10px;
-    border-radius: 20px;
-    transition: background 0.5s, transform 0.5s;
-    box-shadow: 1px 1px 20px #012290f7,
-                1px 1px 40px #0053b8f7;
+   background-color: transparent;
+   padding: 40px;
+   font-size: 13px;
+   font-weight: 13px;
+   border-right: 10px;
+   border-radius: 20px;
+   transition: background 0.5s, transform 0.5s;
+   box-shadow: 1px 1px 20px #012290f7,
+               1px 1px 40px #0053b8f7;
 }
 .services-list div i{
-    font-size: 50px;
-    margin-bottom: 30px;
+   font-size: 50px;
+   margin-bottom: 30px;
 }
 .services-list div h2{
-    font-size: 30px;
-    font-weight: 500;
-    margin-bottom: 15px;
+   font-size: 30px;
+   font-weight: 500;
+   margin-bottom: 15px;
 }
 .services-list div a{
-    text-decoration: none;
-    color: #000000;
-    font-size: 12px;
-    margin-top: 20px;
-    display: inline-block;
+   text-decoration: none;
+   color: #000000;
+   font-size: 12px;
+   margin-top: 20px;
+   display: inline-block;
 }
 .read{
-    display: inline-block;
-    padding: 12px 28px;
-    background: rgb(220, 157, 228);
-    border-radius: 40px;
-    font-size: 16px;
-    color: #001b29;
-    letter-spacing: 1px;
-    text-decoration: none;
-    font-weight: 600;
-    opacity: 0;
-    animation: slideTop 1s ease forwards;
-    animation-delay: 2s;
-    box-shadow: 0 0 5px rgb(220, 157, 228),
-    0 0 25px rgb(220, 157, 228);
+   display: inline-block;
+   padding: 12px 28px;
+   background: rgb(220, 157, 228);
+   border-radius: 40px;
+   font-size: 16px;
+   color: #001b29;
+   letter-spacing: 1px;
+   text-decoration: none;
+   font-weight: 600;
+   opacity: 0;
+   animation: slideTop 1s ease forwards;
+   animation-delay: 2s;
+   box-shadow: 0 0 5px rgb(220, 157, 228),
+   0 0 25px rgb(220, 157, 228);
 }
 .read:hover{
-    background: rgb(220, 157, 228);
-    color: #081b29;
-    box-shadow: 0 0 20px rgb(220, 157, 228);
+   background: rgb(220, 157, 228);
+   color: #081b29;
+   box-shadow: 0 0 20px rgb(220, 157, 228);
 }
 .services-list div:hover{
-    transform: translateY(-10px);
+   transform: translateY(-10px);
 }
 section{
     display: flex;