diff --git a/scripts/scripts.js b/scripts/scripts.js
index 1e206db92..69b246e73 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -149,6 +149,26 @@ async function loadPage() {
   await loadEager(document);
   await loadLazy(document);
   loadDelayed();
+  await loadingCustomCss(); 
 }
 
 loadPage();
+
+
+async function loadingCustomCss(){
+  // load custom css files
+  var loadCssArray = [
+    "`${window.hlx.codeBasePath}/styles/loanproducts/loanproducts.css`",
+    "`${window.hlx.codeBasePath}/styles/calculator/calculator.css`",
+    "`${window.hlx.codeBasePath}/styles/choose-us/choose-us.css`",
+    "`${window.hlx.codeBasePath}/styles/download-piramal/download-piramal.css`",
+    "`${window.hlx.codeBasePath}/styles/our-media/our-media.css`",
+    "`${window.hlx.codeBasePath}/styles/piramal-since/piramal-since.css`",
+  ]
+
+  loadCssArray.forEach( async (eachCss) => {
+      await loadCSS(eachCss);
+  });
+
+}
+
diff --git a/styles/calculator/calculator.css b/styles/calculator/calculator.css
new file mode 100644
index 000000000..bc9cba799
--- /dev/null
+++ b/styles/calculator/calculator.css
@@ -0,0 +1,102 @@
+.calculator-section-css .calculator-wrapper .calculator >div >div p {
+    font-size: 2rem;
+    font-family: "Nunito-Regular";
+    font-weight: bold;
+    margin: 0;
+}
+
+.calculator-section-css .default-content-wrapper p {
+   font-size: 20px;
+   font-family: "Nunito-Regular";
+   color: #666666;
+   margin-top: 0;
+}
+
+.calculator-section-css .columns-wrapper .columns{
+    position: relative;
+}
+
+.calculator-section-css .columns-wrapper .columns >div >div{
+    width: 100%;
+    height: 150px;
+    overflow: hidden;
+    border-radius: 32px;
+}
+.calculator-section-css .columns-wrapper .columns >div >div p{
+    margin-top: 0;
+}
+.calculator-section-css .columns-wrapper .columns img{
+    border-radius: 32px;
+}
+
+.calculator-section-css  img:hover {
+    transition: transform 0.3s;
+    transform: scale(1.2);
+}
+
+.calculator-section-css .columns-wrapper .columns h4{
+    top: 10%;
+    position: absolute;
+    font-size: 1.5rem;
+    color: #ffffff;
+    padding-left: 20px;
+    font-family: "Nunito-Regular";
+}
+
+.calculator-section-css .columns-wrapper .columns .button-container a{
+    font-size: 14px;
+    padding: 15px 18px;
+    background: #F26841;
+    color: #ffffff;
+    border-radius: 8px;
+    position: absolute;
+    top: 40%;
+    margin-left: 20px;
+} 
+
+@media screen and (max-width: 767.99px) {
+    .calculator-section-css .calculator-wrapper .calculator >div >div p {
+        font-size: 18px;
+        font-weight: bold;
+        margin: 0;
+    }
+    
+    .calculator-section-css .default-content-wrapper p {
+       font-size: 14px;
+       color: #666666;
+       margin-top: 0;
+    }
+    .calculator-section-css .columns-wrapper .columns img {
+        width: 100%;
+        height: 110px;
+        border-radius: 16px;
+    }
+    .calculator-section-css .columns-wrapper .columns > div > div {
+        position: relative;
+    }
+    .calculator-section-css .columns-wrapper .columns h4{
+        top: 0%;
+        position: absolute;
+        font-size: 1rem;
+        color: #ffffff;
+        padding-left: 20px;
+        font-family: "Nunito-Regular";
+    }
+    
+    .calculator-section-css .columns-wrapper .columns .button-container a{
+        font-size: 14px;
+        padding: 9px 11px;
+        background: #F26841;
+        color: #ffffff;
+        border-radius: 8px;
+        position: absolute;
+        top: 25%;
+        margin-left: 20px;
+    } 
+    .calculator-section-css .columns-wrapper .columns > div > div p:first-child{
+       margin: 0;
+    }
+}
+
+
+
diff --git a/styles/choose-us/choose-us.css b/styles/choose-us/choose-us.css
new file mode 100644
index 000000000..e2b237ca6
--- /dev/null
+++ b/styles/choose-us/choose-us.css
@@ -0,0 +1,81 @@
+.choose-us-css .default-content-wrapper h4 {
+    font-weight: 800;
+  }
+  
+  .choose-us-css .choose-us-wrapper .choose-us div > div > p {
+    color: rgb(51 51 51 / var(--tw-text-opacity));
+    font-weight: 400;
+  }
+  
+  .choose-us-css .columns-wrapper .columns > div {
+    margin-top: 2.5rem;
+  }
+  
+  .choose-us-css .columns-wrapper .columns div div > p {
+    margin: 0;
+  }
+  
+  .choose-us-css .columns-wrapper .columns div div :nth-child(2) {
+    font-weight: 800;
+    padding-bottom: 1rem;
+  }
+  
+  @media (width >= 360px) {
+    .choose-us-css .default-content-wrapper h4 {
+      font-size: 1.125rem;
+    }
+  
+    .choose-us-css .choose-us-wrapper .choose-us div > div > p {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+  
+    .choose-us-css .columns-wrapper .columns > div {
+      gap: 2.25rem;
+    }
+  
+    .choose-us-css .columns-wrapper .columns > div > div {
+      width: 100%;
+    }
+  
+    .choose-us-css .columns-wrapper .columns div div > p > picture > img {
+      height: 3rem;
+      width: 3rem;
+    }
+  
+    .choose-us-css .columns-wrapper .columns div div :nth-child(2) {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      padding-bottom: 0.75rem;
+    }
+  }
+  
+  @media (width >= 600px) {
+  }
+  
+  @media (width >= 900px) {
+    .choose-us-css .default-content-wrapper h4 {
+      font-size: 2rem;
+      line-height: 1.75rem;
+    }
+  
+    .choose-us-css .choose-us-wrapper .choose-us div > div > p {
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
+  
+    .choose-us-css .columns-wrapper .columns > div {
+      gap: 5rem;
+    }
+  
+    .choose-us-css .columns-wrapper .columns div div > p > picture > img {
+      height: 5rem;
+      width: 5rem;
+    }
+  
+    .choose-us-css .columns-wrapper .columns div div :nth-child(2) {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+  }
+  
\ No newline at end of file
diff --git a/styles/download-piramal/download-piramal.css b/styles/download-piramal/download-piramal.css
new file mode 100644
index 000000000..5a9259ebb
--- /dev/null
+++ b/styles/download-piramal/download-piramal.css
@@ -0,0 +1,97 @@
+.download-piramal-css {
+    max-width: 1200px;
+    position: relative;
+    margin: 0 auto;
+}
+
+.download-piramal-css > div:first-child p{
+    position: relative;
+}
+.download-piramal-css .default-content-wrapper p:first-child img {
+    border-radius: 20px;
+}
+
+.download-piramal-css .default-content-wrapper h4{
+    position: absolute;
+}
+
+.download-piramal-css .default-content-wrapper p:nth-child(2){
+    position: absolute;
+    width: 156px;
+    height: 52px;
+
+}
+.download-piramal-css .default-content-wrapper p:nth-child(3){
+    position: absolute;
+    width: 156px;
+    height: 52px;
+    left: 45%;
+}
+.download-piramal-css .download-piramal-wrapper .download-piramal p{
+    position: absolute;
+    top: 25%;
+    font-size: 30px;
+    font-family: "Nunito-Regular";
+    font-weight: 700;
+    color: #ffffff;
+    left: 15%;
+}
+.download-piramal-css .default-content-wrapper:last-child {
+    position: absolute;
+    top: 35%;
+    font-size: 24px;
+    font-family: "Nunito-Regular";
+    color: #ffffff;
+    left: 15%;
+    margin-bottom: 0;
+}
+.download-piramal-css .default-content-wrapper:last-child p{
+    margin-bottom: 0;
+}
+
+.download-piramal-css .default-content-wrapper p:nth-child(4){
+    display: none;
+}
+.download-piramal-css .button-container{
+    display: none;
+}
+
+
+@media screen and (max-width:767.99px) {
+    .download-piramal-css .default-content-wrapper h4,
+    .download-piramal-css > div:first-child p,
+    .download-piramal-css .default-content-wrapper p:first-child img,
+    .download-piramal-css .default-content-wrapper p:nth-child(2),
+    .download-piramal-css .default-content-wrapper p:nth-child(3),
+    .download-piramal-css .download-piramal-wrapper
+    {
+        display: none;
+    }
+    .download-piramal-css .default-content-wrapper p:nth-child(4){
+        position: absolute;
+        bottom: 50%;
+        display: block;
+    }
+    .download-piramal-css .button-container {
+        display: block;
+    }
+    .download-piramal-css .button-container a{
+        display: block;
+        position: absolute;
+        font-size: 12px;
+        top: -50%;
+        background: #F26841;
+        left: 20px;
+        padding: 8px 15px;
+        border-radius: 10px;
+        margin-top: 0;
+    }
+    .download-piramal-css .default-content-wrapper:last-child {
+        position: relative;
+        left: 1%;
+    }
+    .download-piramal-css .default-content-wrapper p:nth-child(4) img{
+        width: revert-layer;
+        height: 176px;
+    }
+}
\ No newline at end of file
diff --git a/styles/loanproducts/loanproducts.css b/styles/loanproducts/loanproducts.css
new file mode 100644
index 000000000..1c1745bee
--- /dev/null
+++ b/styles/loanproducts/loanproducts.css
@@ -0,0 +1,109 @@
+.loan-products-main {
+    background-color: var(--gradient-gray-light);
+  }
+  
+  .loan-products-main .columns-wrapper .columns > div > div {
+    display: flex;
+    align-items: center;
+    background-color: rgb(255 255 255 / 1);
+    border-radius: 1rem;
+    cursor: pointer;
+    box-shadow: 0px 4px 12px rgba(51, 51, 51, 0.08);
+  }
+  
+  .loan-products-main .columns-wrapper .columns > div > div:hover {
+    box-shadow: 0px 32px 32px rgba(0, 0, 0, 0.08),
+      0px 0px 32px rgba(0, 0, 0, 0.12), 0px 0px 1px rgba(0, 0, 0, 0.2);
+  }
+  
+  @media (width >= 360px) {
+    .loan-products-main .loanproducts-wrapper .loanproducts p {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+  
+    .loan-products-main .columns-wrapper .columns > div {
+      flex-wrap: wrap;
+      flex-direction: row;
+      gap: 0.9rem;
+      margin-top: 0.9rem;
+    }
+  
+    .loan-products-main .columns-wrapper .columns > div > div {
+      flex-direction: column;
+      width: 30%;
+      padding: 1.3rem 0;
+    }
+  
+    .loan-products-main .columns-wrapper .columns > div > div img {
+      height: 3rem;
+    }
+  
+    .loan-products-main .columns-wrapper .columns > div > div > p {
+      margin: 0;
+      font-size: 0.67rem;
+      text-align: center;
+      line-height: 1rem;
+      padding: 0 0.8rem;
+      font-weight: 700;
+    }
+  }
+  
+  @media (width >= 600px) {
+    .loan-products-main .loanproducts-wrapper .loanproducts p {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+  
+    .loan-products-main .columns-wrapper .columns > div {
+      flex-wrap: nowrap;
+      gap: 1.5rem;
+      margin-top: 1.5rem;
+    }
+  
+    .loan-products-main .columns-wrapper .columns > div > div {
+      flex-direction: row;
+      padding: 0.5rem;
+    }
+  
+    .loan-products-main .columns-wrapper .columns > div > div > p {
+      font-size: 1rem;
+      line-height: 1.4rem;
+      font-weight: 700;
+      margin-left: 1rem;
+      padding: 0;
+    }
+  
+    .loan-products-main .columns-wrapper .columns > div > div img {
+      height: 5rem;
+    }
+  }
+  
+  @media (width >= 900px) {
+    .loan-products-main .loanproducts-wrapper .loanproducts p {
+      font-size: 1.875rem;
+      line-height: 2.25rem;
+      font-weight: 800;
+    }
+  
+    .loan-products-main .columns-wrapper .columns > div {
+      gap: 1.5rem;
+      margin-top: 1.5rem;
+    }
+  
+    .loan-products-main .columns-wrapper .columns > div > div {
+      padding: 1.4rem 0.5rem;
+    }
+  
+    .loan-products-main .columns-wrapper .columns > div > div img {
+      height: 5rem;
+    }
+  
+    .loan-products-main .columns-wrapper .columns > div > div > p {
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+      font-weight: 700;
+      margin-left: 1rem;
+    }
+  }
+  
\ No newline at end of file
diff --git a/styles/our-media/our-media.css b/styles/our-media/our-media.css
new file mode 100644
index 000000000..bd52ef24f
--- /dev/null
+++ b/styles/our-media/our-media.css
@@ -0,0 +1,50 @@
+.our-media-css .our-media-wrapper .our-media p {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    font-weight: 400;
+    text-align: center;
+    color: var(--gradient-gray);
+    margin-bottom: 2rem;
+  }
+  
+  .our-media-css .columns-wrapper .columns div {
+      justify-content: space-around;
+  }
+  
+  .our-media-css .columns-wrapper .columns .columns-img-col {
+      display: flex;
+      padding: 0;
+  }
+  
+  .our-media-css .columns-wrapper .columns div div > picture > img {
+      max-width: 100%;
+      width: fit-content;
+      height: 1.3rem;
+  }
+  
+  @media (width >= 360px) {
+      .our-media-css .columns-wrapper .columns div {
+          gap: 2rem;
+          flex-direction: row;
+          flex-wrap: wrap;
+          padding: 0;
+      }
+  
+      .our-media-css .columns-wrapper .columns .columns-img-col {
+          width: 45%;
+      }
+  }
+  
+  @media (width >= 600px) {
+      .our-media-css .columns-wrapper .columns .columns-img-col {
+          width: unset;
+      }
+  }
+  
+  @media (width >= 900px) {
+      .our-media-css .columns-wrapper .columns div {
+          gap: 4.5rem;
+          padding: 0 9.5rem;
+      }
+  }
+  
\ No newline at end of file
diff --git a/styles/piramal-since/piramal-since.css b/styles/piramal-since/piramal-since.css
new file mode 100644
index 000000000..89bc72ecb
--- /dev/null
+++ b/styles/piramal-since/piramal-since.css
@@ -0,0 +1,111 @@
+.piramal-since-css .piramal-since-wrapper .piramal-since p {
+    text-align: center;
+    font-weight: 800;
+    margin-bottom: 0.75rem;
+  }
+  
+  .piramal-since-css .default-content-wrapper p {
+    font-weight: 400;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 2.7rem;
+  }
+  
+  .piramal-since-css .columns-wrapper .columns > div {
+    gap: 5.375rem;
+  }
+  
+  .piramal-since-css .columns-wrapper .columns > div > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .piramal-since-css .columns-wrapper .columns div div > p {
+    margin: 0;
+  }
+  
+  .piramal-since-css .columns-wrapper .columns div div :nth-child(2) {
+    font-weight: 400;
+    margin-bottom: 0.625rem;
+  }
+  
+  .piramal-since-css .columns-wrapper .columns div div :nth-child(3) {
+    font-weight: 700;
+  }
+  
+  @media (width >= 360px) {
+    .piramal-since-css .piramal-since-wrapper .piramal-since p {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+  
+    .piramal-since-css .default-content-wrapper p {
+      font-size: .875rem;
+      line-height: 1.25rem;
+    }
+  
+    .piramal-since-css .columns-wrapper .columns > div {
+      flex-wrap: wrap;
+      flex-direction: row;
+      gap: 3rem;
+      justify-content: space-between;
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+      text-align: center;
+    }
+  
+    .piramal-since-css .columns-wrapper .columns > div > div {
+      width: 35%;
+    }
+  
+    .piramal-since-css .columns-wrapper .columns div div > p > picture > img {
+      height: 3rem;
+      width: 3rem;
+    }
+  
+    .piramal-since-css .columns-wrapper .columns div div :nth-child(2) {
+      font-size: 1rem;
+      line-height: 1.75rem;
+    }
+  
+    .piramal-since-css .columns-wrapper .columns div div :nth-child(3) {
+      font-size: 1rem;
+      line-height: 1.75rem;
+    }
+  }
+  
+  @media (width >= 600px) {
+    .piramal-since-css .columns-wrapper .columns > div > div {
+      width: 42%;
+    }
+  }
+  
+  @media (width >= 900px) {
+    .piramal-since-css .piramal-since-wrapper .piramal-since p {
+      font-size: 2rem;
+      line-height: 1.75rem;
+    }
+  
+    .piramal-since-css .default-content-wrapper p {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+  
+    .piramal-since-css .columns-wrapper .columns div div > p > picture > img {
+      height: 5rem;
+      width: 5rem;
+    }
+  
+    .piramal-since-css .columns-wrapper .columns div div :nth-child(2) {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+  
+    .piramal-since-css .columns-wrapper .columns div div :nth-child(3) {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+  }
+  
\ No newline at end of file