html {
     scroll-behavior: smooth;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

 @font-face {
     font-family: 'helveticaregular';
     src: url('../fonts/helvetica-webfont.woff2') format('woff2'),
         url('../fonts/helvetica-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;

 }


 @font-face {
     font-family: 'helveticabold';
     src: url('../fonts/helvetica-bold-webfont.woff2') format('woff2'),
         url('../fonts/helvetica-bold-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;

 }


 body {
     font-family: var(--font-family1);
     background-color: var(--right-grey-colour);
     color: var(--dark-grey-colour);
     font-size: var(--font-size16);
     line-height: 25px;
 }

 :root {
     --blue-color: #0f2c56;
     --gold-colour: #ae9a64;
     --right-grey-colour: #f4f6f8;
     --black-colour: #000;
     --dark-grey-colour: #303131;
     --white-colour: #fff;

     --font-size16: 16px;
     --font-size18: 18px;
     --font-size20: 20px;
     --font-size80: 80px;
     --font-size50: 50px;
     --font-size40: 40px;

     --border-radius: 6px;


     --font-family1: "Poppins",
         sans-serif;
     --font-family-helvetica: 'helveticaregular',
         sans-serif;
     --font-family-helveticabold: 'helveticabold',
         sans-serif;
     --font-family2: Georgia,
         'Times New Roman',
         Times,
         serif;

 }

 .bluebg {
     background-color: var(--blue-color);
 }

 .container {
     max-width: 1400px;
     margin: auto;
     padding: 10px 15px;

 }

 .padding-top100 {
     padding-top: 100px
 }

 .padding-top90 {
     padding-top: 90px
 }

 .padding-top80 {
     padding-top: 80px
 }

 .padding-top50 {
     padding-top: 50px;
 }

 .padding-top40 {
     padding-top: 40px;
 }

 .padding-bottom100 {
     padding-bottom: 100px;
 }

 .padding-bottom90 {
     padding-bottom: 90px;
 }

 .padding-bottom80 {
     padding-bottom: 80px;
 }

 .margin-top100 {
     margin-top: 100px;
 }

 .margin-top90 {
     margin-top: 90px;
 }

 .margin-top80 {
     margin-top: 80px;
 }

 .margin-bottom100 {
     margin-bottom: 100px;
 }

 .margin-bottom90 {
     margin-bottom: 90px;
 }

 .margin-bottom80 {
     margin-bottom: 80px;
 }

 .text-center {
     text-align: center;
 }

 .Rowbox {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 section {
     padding-top: 100px;

 }

 p {
     margin: 0 0 15px 0;
     padding: 0;
 }

 h1 {}

 h2 {
     font-size: var(--font-size50);
     line-height: 60px;
     color: var(--blue-color);


 }

 h3 {
     font-size: var(--font-size18);
 }

 h4 {
     font-size: var(--font-size18);
 }

 h5 {}

 h6 {}

 a {
     color: var(--blue-color);
 }

 .borderstyle {
     position: relative;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1;

     span {
         background-color: var(--right-grey-colour);
         position: relative;
         padding: 0 10px;
     }
 }

 .borderstyle::before {
     background-color: var(--gold-colour);
     content: "";
     width: 50%;
     height: 1px;
     position: absolute;
     left: 0;

 }

 .borderstyle::after {
     background-color: var(--gold-colour);
     content: "";
     width: 50%;
     height: 1px;
     position: absolute;
     left: auto;
     right: 0;
     z-index: -1;

 }

 .column {
     width: 100%;
 }

 .column50 {
     width: 50%;
 }

 .btn {
     background-color: var(--gold-colour);
     color: var(--white-colour);
     font-weight: bold;
     padding: 16px 40px;
     border: none;
     border-radius: var(--border-radius);
     cursor: pointer;
     font-size: var(--font-size16);
     letter-spacing: 1px;
     transition: opacity 0.3s ease;
     text-transform: uppercase;
     text-decoration: none;
     display: inline-block;

     &:hover {
         background-color: var(--blue-color);
     }

 }

 .text-Left {
     text-align: left;
 }

 /****** header css Add **************/
 header {
     border-bottom: 1px solid #ddd;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     padding: 5px 0;
     background-color: var(--white-colour);
     position: relative;

     .Rowbox {
         align-items: end;
     }

     .logo {
         display: flex;
         align-items: center;
         line-height: 0;
         gap: 0;

         img {
             height: 90px;

         }
     }

     nav {
         margin-bottom: 15px;


         ul {
             display: flex;
             list-style: none;
             gap: 25px;

             li {
                 position: relative;

                 a {
                     text-decoration: none;
                     color: var(--blue-color);
                     font-size: var(--font-size20);
                     font-weight: 500;
                     transition: color 0.3s ease;
                     font-family: var(--font-family1);

                     &:hover {
                         color: var(--gold-colour);
                     }
                 }

                 &:hover {
                     .dropdown-menu {
                         display: block;
                     }
                 }
             }
         }
     }

     .mobile-menu {
         display: none;
     }

     .mobile-menu.show {
         display: block;
     }

     /* Dropdown */
     .dropdown-menu {
         display: none;
         position: absolute;
         top: 100%;
         left: 0;
         background: white;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         min-width: 160px;
         z-index: 100;

         li {
             padding: 10px;
         }
     }

     /* Hamburger */
     .hamburger {
         display: none;
         font-size: 28px;
         cursor: pointer;
     }

     /* Mobile Menu */
     .mobile-menu {
         display: none;
         flex-direction: column;
         padding: 10px 20px;

         li {
             padding: 10px 0;
         }

         &.show {
             display: flex;
         }
     }

     /* Responsive */
     @media (max-width: 768px) {
         nav {
             ul {
                 display: none;
             }
         }

         .hamburger {
             display: block;
         }
     }

 }

 /**** header css end ******/
 /************ footer css Add *************/



 .site-footer {
     background-color: var(--blue-color);
     color: var(--white-colour);
     padding: 40px 30px 20px;
     margin-top: 100px;

     .footer-content {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         gap: 30px;
         margin: auto;

         .footer-column {
             flex: 1;
             min-width: 180px;

             h4 {
                 font-family: var(--font-family2);
                 margin-bottom: 15px;
                 color: var(--white-colour);
             }

             ul {
                 list-style: none;
                 padding: 0;
                 margin: 0;

                 li {
                     margin-bottom: 10px;

                     a {
                         color: var(--white-colour);
                         text-decoration: none;
                         font-size: var(--font-size16);

                         &:hover {
                             color: var(--gold-colour);
                         }
                     }
                 }
             }
         }

         .logo-column {
             .footer-logo {
                 max-width: 160px;
                 margin-bottom: 20px;
             }
         }

         .social-icons {
             a {
                 display: inline-block;
                 margin-right: 12px;
                 width: 36px;
                 height: 36px;
                 border: 1px solid var(--white-colour);
                 border-radius: 50%;
                 color: var(--white-colour);
                 text-align: center;
                 line-height: 36px;
                 font-size: var(--font-size16);
                 transition: background 0.3s;

                 &:hover {
                     background-color: var(--gold-colour);
                     border-color: var(--gold-colour);
                 }
             }
         }
     }

     hr {
         border: none;
         border-top: 1px solid #264269;
         margin: 20px 0 20px;
     }

     .footer-bottom {
         margin: auto;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: center;
         color: var(--white-colour);
         font-size: var(--font-size16);

         p {
             margin: 0;
         }

         .footer-links {
             display: flex;
             gap: 15px;
             align-items: center;
             flex-wrap: wrap;

             a {
                 color: var(--white-colour);
                 text-decoration: none;

                 &:hover {
                     color: var(--gold-colour);
                 }
             }

             span {
                 color: #454a50;
             }
         }
     }
 }

 /***** footer css End ***************/

 .HomeBanner {
     width: 100%;
     position: relative;
     height: 100vh;
     display: flex;
     justify-content: center;
     overflow: hidden;

     img {
         width: 100%;
     }

     video {
         width: 100%;
         position: absolute;
         left: 0;
         right: 0;
         border: none;

     }
 }

 /***** Banner Css End ****/
 .WelcomeText {
     .WelcomeTextBox {
         text-align: center;
         max-width: 1080px;
         margin: 0 auto;

         .houseicon {
             line-height: 0;
             margin-bottom: 40px;


             img {
                 height: 85px;
             }
         }
     }

     .text-Left {
         text-align: left;
     }
 }

 .BtnBox {
     display: flex;
     justify-content: center;

 }


 /******* blog css **********/
 .LatestNewsDiv {
     padding: 40px 140px 0 140px;
     align-items: self-start;
     gap: 20px;
 }

 .LatestNewsBox {
     position: relative;
     padding-left: 10px;
     padding-bottom: 30px;


     .newsimg1 {
         line-height: 0;
         height: 320px;
         overflow: hidden;
         display: flex;
         justify-content: center;
         position: relative;


         img {
             width: auto;
             height: 320px;
             filter: grayscale(1);
         }
     }

     .LatestNewsContent {
         padding: 15px;
         background-color: var(--white-colour);
         color: var(--dark-grey-colour);

         a {
             color: var(--dark-grey-colour);
             text-decoration: none;

             &:hover {
                 color: var(--gold-colour);
             }
         }

         .Rowbox {
             padding-bottom: 10px;
             border-bottom: solid 1px var(--dark-grey-colour);
             margin-bottom: 15px;

         }

         h3 {
             margin-bottom: 10px;

             a {
                 font-family: var(--font-family2);


             }

         }

         .text-sm {
             line-height: 25px;

         }

     }


 }

 .NewsRightbox.LatestNewsBox {
     display: flex;

     .newsimg1 {
         max-width: 200px;
         display: flex;
         justify-content: center;
         overflow: hidden;
         height: auto;

         img {
             width: auto;
             max-width: 300px;
             height: auto;
         }
     }

 }

 .borderboxNew {
     &::before {
         content: "";
         position: absolute;
         background-color: var(--gold-colour);
         width: 100%;
         height: 97%;
         z-index: -1;
         left: 0;
         bottom: 0;

     }
 }

 .column50.LatestNewsLeft {
     width: 40%;
     position: relative;


     &::after {
         content: "";
         background: url(../images/focus-1.svg) no-repeat left bottom;
         position: absolute;
         bottom: -85px;
         left: -105px;
         width: 300px;
         height: 300px;
         z-index: -1;
         background-size: contain;
     }
 }

 /****** Main News Letter  ****/
 .form-control {
     padding: 10px;
     font-size: 16px;
     color: var(--dark-grey-colour);
     background-color: var(--white-colour);
     border-radius: var(--border-radius);
     border: solid 1px #979797;
     width: 100%;
     height: 50px;
 }

 input:focus-visible {
     outline-offset: 0;
 }

 .MainNewsletter {
     padding: 90px 0;

     h2 {
         margin-bottom: 20px;
         color: var(--white-colour);

         span {
             background-color: var(--blue-color);
         }
     }

     p {
         color: var(--white-colour);
         text-align: center;

     }

     .Rowbox {
         width: 55%;
         margin: 40px auto 0 auto;
         padding-left: 10px;

         button.btn {
             position: relative;
             left: -10px;


         }
     }
 }

 .MainConnectWithUs {
     h2 {
         margin-bottom: 40px;
     }

     .Rowbox {
         align-items: flex-start;
         gap: 30px;
     }

     .columnLeft {
         width: 30%;
         background-color: var(--white-colour);
         padding: 30px;
         border-radius: var(--border-radius);


         .ContactUsbox {
             text-align: center;

             .icon {
                 margin-bottom: 15px;
                 line-height: 0;

                 img {
                     width: 50px;
                 }
             }

             h3 {
                 margin-bottom: 30px;

             }

             .Letsstart {
                 border-top: solid 1px var(--gold-colour);
                 padding-top: 30px;
                 margin-left: -30px;
                 margin-right: -30px;

                 h4 {
                     margin-bottom: 20px;
                     color: var(--gold-colour);
                 }

                 .Telephone {
                     margin-bottom: 20px;

                     p {
                         margin-bottom: 10px;
                     }

                     a {
                         &:hover {
                             text-decoration: none;
                         }
                     }
                 }
             }
         }
     }

     .columnRight {
         width: 70%;

         .contact-form {
             background-color: var(--white-colour);
             padding: 30px;
             border-radius: var(--border-radius);

             .Rowbox {
                 gap: 15px;
                 padding-bottom: 20px;


                 .inputform {
                     width: 100%;
                 }

                 textarea.form-control {
                     height: auto;
                 }

                 .form-consent {
                     display: flex;
                     align-items: self-start;
                     gap: 10px;

                     p {
                         margin-bottom: 15px;
                         color: var(--dark-grey-colour);
                     }

                     input {
                         margin-top: 5px;

                     }
                 }

             }
         }
     }
 }


 .cmsBanner {
     position: relative;
     line-height: 0;

     img {
         width: 100%;
     }

     &::before {
         background-color: var(--black-colour);
         position: absolute;
         content: "";
         top: 0;
         width: 100%;
         height: 100%;
         opacity: 0.4;
     }

     .BannerContent {
         position: absolute;
         top: 0;
         width: 100%;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;

         h1 {
             font-size: var(--font-size80);
             color: var(--white-colour);
             line-height: normal;
         }
     }
 }

 .boxbg {
     background-color: var(--white-colour);
     padding: 30px;
 }

 .MainAbout {
     .Rowbox {
         gap: 30px;
         align-items: flex-start;

         .WhatWeOffer {

             h2 {
                 border-bottom: solid 1px var(--gold-colour);
                 text-align: center;
                 margin-left: -30px;
                 margin-right: -30px;
                 margin-bottom: 30px;
                 padding-bottom: 25px;
             }

             .WhatWeOfferDiv {
                 min-height: 200px;

                 p:first-child {
                     color: var(--gold-colour);
                     font-size: var(--font-size20);
                     font-weight: bold;
                 }

                 a {
                     &:hover {
                         color: var(--gold-colour);
                         text-decoration: none;
                     }
                 }
             }
         }
     }


 }

 .aboutimg {
     margin-bottom: -100px;

     img {
         width: 100%;
     }
 }

 .MainServicesDiv {
     padding: 0;
     margin: 0;
 }


 .ServicesBox {
     border-radius: 10px;
     background-color: var(--white-colour);
     overflow: hidden;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     margin-bottom: 20px;

     .Rowbox1 {
         display: flex;
         flex-direction: row;

         &.rightimg {
             flex-direction: row-reverse;
         }

     }


     .Servicesimg {
         line-height: 0;
         height: 100%;

         img {
             width: auto;
             height: 100%;
             max-width: 100%;
         }
     }

     .ServicesContent {
         padding: 30px;

         h2 {
             border-bottom: solid 2px var(--gold-colour);
             padding-bottom: 30px;
             margin-bottom: 30px;

         }

         p.first-line {
             color: var(--gold-colour);
             font-size: var(--font-size20);
             font-weight: bold;
         }

         p {
             margin-bottom: 25px;

         }

         ul {
             padding-left: 15px;
             margin-bottom: 25px;
         }

         ol {
             padding-left: 15px;
             margin-bottom: 25px;
         }
     }
 }

 .findoutmore {
     text-align: center;
     padding: 60px 0;
     margin: -17px 0 -80px 0;
     margin-top: 50px;
     background: #fff;
 }

 .CharitiesTrusts {
     background-color: var(--white-colour);
 }

 .first-line {
     color: var(--gold-colour);
     font-size: var(--font-size20);
     font-weight: bold;
 }

 .CalculatorBox {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(441px, 1fr));
     gap: 20px;



     .card {
         background-color: #ffffff;
         padding: 40px 20px;
         border-radius: 10px;
         text-align: center;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
         transition: transform 0.2s ease;
         display: flex;
         justify-content: center;
         flex-direction: column;

         &:hover {
             transform: translateY(-4px);
             background-color: var(--blue-color);


             a {

                 color: var(--white-colour);
                 text-decoration: none;

             }
         }

         .icon {
             width: 24px;
             height: 24px;
             margin: 0 auto 15px auto;
         }

         a {
             font-size: 20px;
             font-weight: bold;
             color: #003366;
             text-decoration: underline;
         }
     }

     // Center the last card in the row if it's alone
     &>.card:last-child:nth-child(odd):nth-last-child(1) {
         grid-column: 2 / 3;
     }

     @media (max-width: 768px) {
         &>.card:last-child:nth-child(odd):nth-last-child(1) {
             grid-column: auto;
         }
     }
 }