diff --git a/public/img/bg.jpg b/public/img/bg.jpg
new file mode 100644
index 0000000..5d7e511
Binary files /dev/null and b/public/img/bg.jpg differ
diff --git a/src/components/Contactfrom.vue b/src/components/Contactfrom.vue
new file mode 100644
index 0000000..2878eea
--- /dev/null
+++ b/src/components/Contactfrom.vue
@@ -0,0 +1,91 @@
+<template>
+    <div>
+        <p class="text-blue-900 text-3xl font-semibold  text-center">Contact Us</p>
+        <div class=" mb-8 px-4 rounded-xl shadow-xl">
+            <div v-if="getContact">
+                <div class="pb-6 text-xl">Full Name
+                    <input v-model="cuname" class="border input0 pl-4 py-5 focus:border-blue-600 focus:border-2 focus:outline-none" type="text" placeholder="Name">
+                </div>
+                <div class="text-xl">Mobile No.
+                    <input v-model="cumobile" class="border input0 pl-4 py-5 focus:border-blue-600 focus:border-2 focus:outline-none" type="number" placeholder="Mobile No.">
+                </div>
+                <div class="py-6 text-xl">E-mail
+                    <input v-model="cuemail" class="border input0 pl-4 py-5 focus:border-blue-600 focus:border-2 focus:outline-none" type="text" placeholder="E-mail">
+                </div>
+                <div class=" text-xl">Write your Message
+                    <textarea v-model="cumessage" class="input1 border pl-4 py-2 focus:border-blue-600 focus:border-2 focus:outline-none" rows="4" cols="50" placeholder="Write your Message....."></textarea>
+                </div>
+                <div class="flex justify-center pb-6 pt-2">
+                    <button @click="saveContacthQry" class="bg-blue-600 hover:bg-blue-700 font-semibold text-white text-xl py-2 px-6 rounded-md w-full uppercase">Submit</button>
+                </div>
+            </div>
+            <div class="py-32 2xl:px-32" v-else>
+                <h2 class="text-2xl font-semibold py-4">Thanks for being awesome!</h2>
+                <p class="text-xl pb-32 text-justify px-8 w-full">We will back you Soon.[RGYCI].</p>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    setup(){
+    // const route = useRoute();
+},
+  data() {
+    return {
+      isLoading: true,
+      getContact:true,
+      cuname:null,
+      cumobile:null,
+      cuemail:null,
+      cumessage:null,
+
+    //   contact_form:{}
+    }
+  },
+  mounted: function () {
+    
+  },
+
+  methods: {
+    saveContacthQry() {
+        let formData = new FormData();
+        formData.append('Name', this.cuname);
+        formData.append('Phone', this.cumobile);
+        formData.append('Email', this.cuemail);
+        formData.append('MessageDetails', this.cumessage);
+        formData.append('formName', 'rgyci-contact-us');
+        fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/', 
+            {
+                method: 'POST',
+                body: formData,
+            }
+        )
+        .then(response => response.json())
+        .then(data => {
+            // console.log(data)
+        });
+        // formData=""
+        this.getContact=false
+    },      
+        }
+    
+    }
+
+</script>
+<style>
+       .input0 {
+        width: 100%;
+        height: 30px;
+        border-radius: 4px;
+        border-color: rgb(190, 185, 185);
+        font-size: 18px;
+    }
+    .input1 {
+        width: 100%;
+        height: auto;
+        border-radius: 4px;
+        border-color: rgb(190, 185, 185);
+        font-size: 18px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 64aa00a..3fa829f 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,4 +1,4 @@
-<main>
+  <main>
     <section class="container-fluid background">
         <div class="flex flex-col lg:flex-row place-content-between container mx-auto h-fit">
             <div class="flex place-items-center w-full">
@@ -12,13 +12,10 @@
             <div class="flex text-lg md:text-2xl pb-0 pr-10 justify-end"><button class="text-white hover:text-yellow-400">Login</button></div>
         </div>
     </section>
-    <section>
-   
-    </section>
 </main>
 
 <style>
- 
+
     .background {
         background-color: #07294d;
     }
diff --git a/src/components/Mainfooter.astro b/src/components/Mainfooter.astro
index 943246b..2203cb8 100644
--- a/src/components/Mainfooter.astro
+++ b/src/components/Mainfooter.astro
@@ -3,7 +3,7 @@
 		<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 container mx-auto xl:place-items-center py-10 px-6" >
 			<div class="grid">
 				<div class="flex ">
-					<img class="w-20 flex" src="/img/rgylogo.png" alt=""><p class="text-3xl font-bold text-white pt-2">RGYCSM</p>
+					<img class="w-20 flex" src="/img/rgylogo.png" alt=""><p class="text-3xl font-bold text-white pt-2">RGYCI</p>
 				</div>
 				<div class="text-white text-lg">
 					<p class=""><strong>Head Office : </strong>Habra, North 24 Parganas, West Bengal</p>
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
index 4876503..42b34c7 100644
--- a/src/components/Menu.astro
+++ b/src/components/Menu.astro
@@ -1,3 +1,9 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Online from "./Online.vue";
+---
+<Online/>
+
 <main class="container-fluid navbar">
                                                                 <!-- Desktop Menu -->
     <div class="container mx-auto flex justify-center">
@@ -29,12 +35,12 @@
                     <i class="fa fa-caret-downDesktop"></i>
                 </button>
                 <div class="dropdown-contentDesktop z-index">
-                    <a href="#">Check Registration</a>
-                    <a href="#">Result</a>
-                    <a href="#">Certificate Verification</a>
-                    <a href="#">Download</a>
+                    <a href="https://center.rgyci.org/check_registration">Check Registration</a>
+                    <a href="https://center.rgyci.org/checkresult">Result</a>
+                    <a href="https://center.rgyci.org/chekcertificate">Certificate Verification</a>
+                    <a href="https://center.rgyci.org/download">Download</a>
                     <a href="#">Online Exam</a>
-                    <a href="#">Student's Placement Form</a>
+                    <a href="https://center.rgyci.org/form/student_placement">Student's Placement Form</a>
                     <a href="/library">Library</a>
                 </div>
             </div>
@@ -43,9 +49,9 @@
                     <i class="fa fa-caret-downDesktop"></i>
                 </button>
                 <div class="dropdown-contentDesktop">
-                    <a href="#">Procedure</a>
-                    <a href="#">Enquiry</a>
-                    <a href="#">Company's Placement Form</a>
+                    <a href="https://center.rgyci.org/how-to-get-franchisee-with-rgyci">Procedure</a>
+                    <a href="https://center.rgyci.org/form/franchise_enquiry">Enquiry</a>
+                    <a href="https://center.rgyci.org/form/companies_placement">Company's Placement Form</a>
                 </div>
             </div>
             <a href="/gallery">Gallery</a>
@@ -55,8 +61,8 @@
                     <i class="fa fa-caret-downDesktop"></i>
                 </button>
                 <div class="dropdown-contentDesktop">
-                    <a href="#">Center</a>
-                    <a href="#">Teacher</a>
+                    <a href="https://center.rgyci.org/form/center_login">Center</a>
+                    <a href="https://center.rgyci.org/form/teacher_login">Teacher</a>
                 </div>
             </div>
           </div>
diff --git a/src/components/Online.vue b/src/components/Online.vue
new file mode 100644
index 0000000..319a231
--- /dev/null
+++ b/src/components/Online.vue
@@ -0,0 +1,15 @@
+<template>
+    <p class="text-center text-xl bg-red-800 py-1 text-white"><span class="shape px-2 text-blue-700 rounded-md">New</span> <a class="hover:underline" href="https://online.rgyci.org/">Online Learning</a></p>
+</template>
+<style>
+    .shape {
+        -webkit-animation: shape 3ss forwards;
+        animation: shape 1s infinite;
+        background-color: rgb(236, 58, 58);
+    }
+    @keyframes shape {
+        25%{background-color: red(187, 224, 85); }
+        25%{background-color: rgb(122, 154, 241); }
+        50%{background-color: yellow;}
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/contactus.astro b/src/pages/contactus.astro
index bad8f4f..a3ea9de 100644
--- a/src/pages/contactus.astro
+++ b/src/pages/contactus.astro
@@ -3,6 +3,7 @@ import Layout from "../layouts/Layout.astro";
 import Menu from "../components/Menu.astro";
 import Mainfooter from "../components/Mainfooter.astro";
 import Header from "../components/Header.astro";
+import Contactfrom from "../components/Contactfrom.vue";
 ---
 <Layout title="Welcome to RGYCI - Contact Us">
     <Header/>
@@ -12,7 +13,7 @@ import Header from "../components/Header.astro";
             <p class="text-4xl font-semibold text-center py-16">Conta<span class="underline decoration-4 decoration-red-800 ">ct Inform</span>ation</p>
             <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-10">
                 <div class="grid place-items-center shadow-2xl p-4 w-full border-2 bg-blue-100 border-4 border-red-800 rounded-lg">
-                    <svg class="w-10 py-10" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h14v14h-14z" fill="none" visibility="hidden"/><path fill="#2874A6" d="m7 1-6 2v1h12v-1zm-6 4v1h1v5h-1l-1 2h14l-1-2h-1v-5h1v-1zm4 1c.497372 0 1 .5325904 1 1v4h-2v-4c0-.5273339.502628-1 1-1zm4 0c.503364 0 1 .4726661 1 1v4h-2v-4c0-.5273339.496636-1 1-1z"/></svg>
+                    <svg class="w-12 my-10 h-fit" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h14v14h-14z" fill="none" visibility="hidden"/><path fill="#2874A6" d="m7 1-6 2v1h12v-1zm-6 4v1h1v5h-1l-1 2h14l-1-2h-1v-5h1v-1zm4 1c.497372 0 1 .5325904 1 1v4h-2v-4c0-.5273339.502628-1 1-1zm4 0c.503364 0 1 .4726661 1 1v4h-2v-4c0-.5273339.496636-1 1-1z"/></svg>
                     <p class="text-center text-lg">Head Office</p>
                     <h1 class="text-xl font-semibold text-center">Rajeev Gandhi Youth Computer Institute</h1>
                     <span class="text-lg">Address:</span>
@@ -46,28 +47,28 @@ import Header from "../components/Header.astro";
                 </div>
             </div>
         </section>
-        <section class="container mx-auto px-4 my-16">
-            <div class="grid grid-cols-1 lg:grid-cols-2">
-                <div class="grid place-items-center text-blue-900 text-3xl font-semibold my-10">View College on Google Map
+        <section class="container mx-auto px-4 xl:my-16">
+            <div class="grid grid-cols-1 lg:grid-cols-2 lg:gap-8 xl:gap-16">
+                <div class="grid place-items-center my-10">     
+                    <Contactfrom client:visible/>               
+                </div>
+                <div class="grid place-items-center text-blue-900 text-3xl font-semibold my-10 h-fit">View College on Google Map
                     <!-- Google Map Copied Code -->
-                    <iframe class="mt-4 mb-8 border-4 rounded-2xl" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3677.6960542642505!2d88.70813311557485!3d22.813723685059195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f8b2026ecbfdab%3A0x752766262ac4a782!2sRAJEEV%20GANDHI%20YOUTH%20COMPUTER%20INSTITUTE!5e0!3m2!1sen!2sin!4v1675270274743!5m2!1sen!2sin"
+                    <iframe class="mt-4 mb-8 shadow-xl rounded-xl" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3677.6960542642505!2d88.70813311557485!3d22.813723685059195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f8b2026ecbfdab%3A0x752766262ac4a782!2sRAJEEV%20GANDHI%20YOUTH%20COMPUTER%20INSTITUTE!5e0!3m2!1sen!2sin!4v1675270274743!5m2!1sen!2sin"
                             width="100%"
                             height="500"
-                            frameborder="0"
-                            style="border:4; border-color: brown;"
+                            <!-- frameborder="0" -->
+                            style=""
                             
                             aria-hidden="false"
                             tabindex="0">
                     </iframe>
                 </div>
-                <!-- <div class="grid place-items-center text-blue-900 text-3xl font-semibold my-10"> Contact From
-                    <label for="">Name
-                        <input type="text">
-                    </label>
-                </div> -->
             </div>    
         </section>
-
     </main>
+    <Mainfooter/>
 </Layout>
-
+<style>
+ 
+</style>
diff --git a/src/pages/css-test.astro b/src/pages/css-test.astro
new file mode 100644
index 0000000..380494d
--- /dev/null
+++ b/src/pages/css-test.astro
@@ -0,0 +1,7 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Online from "../components/Online.vue";
+---
+<Layout title="">
+    <Online/>
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a4a1267..4095265 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -30,7 +30,6 @@ import SwiperOne from '../components/SwiperOne';
                     <div class="">
                         <img class="rounded-t-2xl img-size" src="/img/image1.png" alt="">
                         <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
-                        <h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
                             <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
@@ -41,7 +40,6 @@ import SwiperOne from '../components/SwiperOne';
                     <div class="">
                         <img class="rounded-t-2xl img-size" src="/img/image2.png" alt="">
                         <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
-                        <h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
                             <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
@@ -52,7 +50,6 @@ import SwiperOne from '../components/SwiperOne';
                     <div class="">
                         <img class="rounded-t-2xl img-size" src="/img/image7.png" alt="">
                         <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
-                        <h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
                             <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
@@ -63,7 +60,6 @@ import SwiperOne from '../components/SwiperOne';
                     <div class="">
                         <img class="rounded-t-2xl img-size" src="/img/image4.png" alt="">
                         <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
-                        <h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
                             <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
@@ -74,7 +70,6 @@ import SwiperOne from '../components/SwiperOne';
                     <div class="">
                         <img class="rounded-t-2xl img-size" src="/img/image5.png" alt="">
                         <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
-                        <h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
                             <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
@@ -85,7 +80,6 @@ import SwiperOne from '../components/SwiperOne';
                     <div class="">
                         <img class="rounded-t-2xl img-size" src="/img/image6.png" alt="">
                         <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
-                        <h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
                             <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
@@ -96,7 +90,6 @@ import SwiperOne from '../components/SwiperOne';
                     <div class="">
                         <img class="rounded-t-2xl img-size" src="/img/image7.png" alt="">
                         <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
-                        <h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
                             <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
@@ -107,7 +100,6 @@ import SwiperOne from '../components/SwiperOne';
                     <div class="">
                         <img class="rounded-t-2xl img-size" src="/img/image1.png" alt="">
                         <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
-                        <h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
                             <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
@@ -118,7 +110,6 @@ import SwiperOne from '../components/SwiperOne';
                     <div class="">
                         <img class="rounded-t-2xl img-size" src="/img/image2.png" alt="">
                         <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
-                        <h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
                             <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
@@ -158,9 +149,9 @@ import SwiperOne from '../components/SwiperOne';
                 </div>
             </div>
         </section>
-        <section class="container-fluid bg-blue-200 p-4">
-            <div class="container mx-auto my-16">
-                <div class="grid grid-cols-1 lg:grid-cols-2 place-items-center gap-16">
+        <section class="container-fluid bg-gray-100 p-4">
+            <div class="container mx-auto">
+                <div class="grid grid-cols-1 lg:grid-cols-2 place-items-center lg:place-items-start gap-y-8">
                     <div class="grid notice-area rounded-b-xl shadow-xl" style="border-bottom-width: 16px; border-color: #b7f7ec;">
                         <p class="text-center text-2xl font-bold rounded-t-xl pt-4" style="background-color: #b7f7ec;">Notice Board</p>
                         <div class="px-3 text-lg text-white overflow-y-scroll bg-gray-800" style="background-color:  ;">
@@ -170,9 +161,8 @@ import SwiperOne from '../components/SwiperOne';
                             <p class="py-2 border-bottom hover:underline"><a href="">We are providing Online course, Admission and classes online and also career guidance.</a></p>
                         </div>
                     </div>
-                    <div class="grid place-items-center">
-                        <iframe width="900" height="600" src="https://www.youtube.com/embed/NADdB7G7NEc">
-                        </iframe>
+                    <div class="grid place-items-center w-full">
+                        <iframe class="youtube-area" src="https://www.youtube.com/embed/NADdB7G7NEc"></iframe>
                     </div>
                 </div>
             </div>
@@ -186,7 +176,7 @@ import SwiperOne from '../components/SwiperOne';
                   <h1 class="text-xl font-semibold text-center">Rajeev Gandhi Youth Computer Institute</h1>
                   <span class="text-lg">Address:</span>
                   <p class=" text-center">Habra , North 24 Parganas, Pin - 743271, West Bengal</p>
-                  <div class="grid grid-cols-2 text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
+                  <div class="grid grid-cols-2 text-sm xl:text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
                     <a href="">Email : ho@rgyci.org</a>                    
                     <a href="">Whatsapp : 7001537091</a>
                   </div>  
@@ -197,7 +187,7 @@ import SwiperOne from '../components/SwiperOne';
                   <h1 class="text-xl font-semibold text-center">Rajeev Gandhi Youth Computer Institute</h1>
                   <span class="text-lg">Address:</span>
                   <p class=" text-center">12/1, Iswar Gupta Road. Dum Dum Cant. Kol -28, WB</p>
-                  <div class="grid grid-cols-2 text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
+                  <div class="grid grid-cols-2 text-sm xl:text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
                     <a href="">Email : ho@rgyci.org</a>                    
                     <a href="">Whatsapp : 7001537091</a>
                   </div>  
@@ -208,7 +198,7 @@ import SwiperOne from '../components/SwiperOne';
                   <h1 class="text-xl font-semibold text-center">Rajeev Gandhi Youth Computer Institute</h1>
                   <span class="text-lg">Address:</span>
                   <p class="text-center">242/13, Ramraj Colony, Madeena Masjid Street, Siyana-203412. District-Bulandshahr (UP)</p>
-                  <div class="grid grid-cols-2 text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
+                  <div class="grid grid-cols-2 text-sm xl:text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
                     <a href="">Email : ho@rgyci.org</a>                    
                     <a href="">Whatsapp : 7001537091</a>
                   </div>  
@@ -232,9 +222,32 @@ import SwiperOne from '../components/SwiperOne';
         text-shadow: 2px 2px 10px #6e6e6e;
     }
     
+    
+    @media screen and (min-width: 801px) {
     .notice-area {
-        width: 450px;
-        height: 600px;
+        width: 450px; 
+        height: 500px;   
+        } 
+    }
+
+    @media screen and (max-width: 800px) {
+    .notice-area {
+    width: fit-content;    
+    height: auto;
+        }
+    }
+    @media screen and (min-width: 801px) {
+    .youtube-area {
+        width: 100%; 
+        height: 500px;   
+        } 
+    }
+
+    @media screen and (max-width: 900px) {
+    .youtube-area {
+    width: 360px;    
+    height: 300px;
+        }
     }
     .border-bottom {
         border-bottom: 2px solid #000000;
@@ -268,7 +281,7 @@ import SwiperOne from '../components/SwiperOne';
     .area {
         width: 300px;
         height: 450px;
-        background-color: rgb(215, 247, 244);
+        background-color: rgb(255, 255, 255);
         border-radius: 16px;
     }
     .hr {