Update style.css

Author: CaptechOmar

style.css

@@ -16,14 +16,44 @@
     font-weight: normal;
     font-style: normal;
 }
-.mainsection{
+.header{
+    display: flex;
+}
+.logo{
     display: flex;
     align-items: center;
+    max-width: 50%;
+    margin-left: 70px;
+}
+.logoimg{
+    margin: 20px;
+    max-width: 100px;
+    max-height: 100px;
+}
+.englishlogotext{
+    font-family: 'Century Gothic';
+    color: #2b3c44;
+    font-size: 1.6em;
+    margin-bottom: 0px;
+}
+.arabiclogotext{
+    font-family: 'Dubai';
+    color: #2b3c44;
+    font-size: 1.6em;
+    margin-top: 0px;
+
+}
+.mainsection{
+    display:flex;
+    align-items: center;
     justify-content: space-between;
+    max-width: 80%;
+    margin: auto;
+
 }
 .mainpic{
     max-width: 40%;
-    max-height: 50%;
+    max-height: 40%;
     border-radius: 20px;
     margin: 20px;
 }
@@ -32,38 +62,106 @@
     margin-right: 20px;
 }
 .hello{
-font-family: 'Bogue';font-size: 100px;text-align: center;
+font-family: 'Bogue';font-size: 100px;text-align: left;
+margin-top: 0px;
+margin-bottom: 0px;
+color: #2b3c44;
+}
+.links{
+    display: inline-block;
+    margin-top: 50px;
+    text-align: left;
+    margin-right: 40px;
+    margin-left: auto;
+    max-width: 50%;
+}
+.headerlinks{
+    margin-left: 30px;
+    font-family:'Bogue' ;
+    text-decoration: none;
+    color: #2b3c44;
+    font-size: 1.2em;                
+}
+p{
+    color: #2b3c44;
+}
+footer{
+    margin: 0 50px ;
+}
+.end{
+    display: flex;
+    justify-content: space-between;
+}
+.socialmedia a{
+    align-items: center;
+    color:#2b3c44;
+    text-decoration: none;
+    margin: 5px;
+}
+.copyright{
+    font-family: 'Bogue';
+    color: #2b3c44;
+    font-size: 14px;
 }
 
 @media (max-width: 768px) {
+    
     .mainsection {
         display: block; /* Stacks the image and text vertically */
         text-align: center; /* Optional: centers the text */
     }
     .mainpic {
+        margin-top:60px;
         margin-bottom: 20px; /* Adds space between the image and the text */
         max-width: 90%;
+        border-radius: 360px;
     }
     .maintext {
         margin-left: 0; /* Removes the left margin for mobile */
         margin-right: 0;
         padding-bottom:20px;
     }
-    .header{
-        display: inline;
-        margin-left: 0;
-        max-width:100%;
+    .logo{
+        margin-left: 30px;
+        align-items:start;
+        justify-content: space-between;
+        max-width: 90%;
     }
+    .logoimg{
+        max-width: 70px;
+        margin: 10px 0px;
+    }
+    .englishlogotext{
+        margin-top:10px;
+    }
+    .arabiclogotext{
+        margin-top: -5px;
+    }
+    .logotext{
+        margin-top: 10px;
+        margin-left: 10px;
+    }
+
     .links{
         display: none;
     }
     .hello{
-        margin-top: -10px;
+        margin-top: -30px;
+        margin-bottom: 20px;
+        text-align: center;
     }
     p{
-        margin-top: -70px;
+        margin-top: -20px;
         margin-bottom:20px;
         margin-right:30px;
         margin-left:30px;
     }
+    .end{
+        display: block;
+        align-items: center;
+        text-align: center;
+    }
+    .socialmedia{
+        margin:30px 10px 20px 10px;
+    }
 }