/* =====================================
    Template Name: Syndicate Business Advisory
    Author Name: WebbyCrown
    Description: Syndicate Business Advisory - HTML5 Template.
    Version:1.0
========================================*/

/*======================================
[ CSS Table of contents ]


01. Google font here
 |
02. General CSS
 |--- Variables
 |--- Typography  
 |--- Mixins
 |--- section heading css
 |--- all pupop CSS
 |--- cookie popup
 |--- enquiry form popup
 |--- Search Popup style
 |
03. Preloader CSS
 
/* ================ 

04. Home one style
 |
01. Header CSS
 |--- Header top bar
 |--- Header social link
 |--- Header main navigation
 |--- Header menu
 |--- Header right icon
 |--- Mobile toggle button
 |
02. Hero section CSS
 |--- hero content slider
 |--- hero thumbs
 |--- hero shape img
 |--- hero image
 |--- Hero slider arrow
 |--- Slider animation css
 |
 03. business services section CSS
 |
 04. about company section CSS
 |--- about-image-gallery
 |--- about info
 |--- about feature list
 |
 05. What we do section CSS
 |--- what we do slider
 |
 06. Why choose Us? section
 |--- Why choose Us tabs list 
 |--- Why choose Us tabs content
 |
 07. our sucess section
 |
 08. Testimonial section
 |--- Testimonial slider
 |--- testimonial slider animation
 |
 09. How we help section
 |--- How we help service
 |
 10. Blog & Articles section
 |--- blog grid css
 |
 11. Footer one CSS
 |--- get free quote 
 |--- footer main css
 |--- footer bottom copyright

/* ============================================== 

05. Home Two style
 |
01. Header style 2 CSS
 |--- header top bar
 |--- mainmenu-style-2
 |--- phone line style-2
 |
02. Hero section style 2 CSS
 |
03. our sucess section style 2 CSS
 |
04. about company section style 2 CSS
 |--- about image gallery style 2
 |--- about info style 2
 |--- about video
 |
05. Get free quote!! style 2 CSS
 |
06. Logos section style 2 CSS
 |
07. Why choose Us? section style 2 CSS
 |--- why choose us grid 
 |
08. How we help section style 2 CSS
 |--- how we help tabs list
 |
09. our services section style 2 CSS
 |--- our services grid
 |
10. Testimonial section style 2 CSS
 |--- Testimonial slider
 |
11. Pricing section style 2 CSS
 |--- Pricing Grid
 |
12. Latest blog posts section style 2 CSS
 |--- blog grid css
 |
13. Footer style 2 CSS
 |--- footer menu style 2 css
 |--- footer bottom style 2
 |--- footer copyright style 2
 
/* ============================================== 

06. Home Three style
 |
01. Header style 3 CSS
 |--- Header right style
 |
 02. Hero banner section style 3 CSS
 |--- hero banner content style 3 css
 |--- hero image style 3 css
 |
 03. Logos section style 3 CSS
 |--- logos gallery style 3
 |
04. our services section style 3 CSS
 |--- our services grid style 3 css
 |
05. about company section style 3 CSS
 |--- about info style 3 css
 |--- about image gallery style 3 css
 |
06. Why choose Us? section style 3 CSS
 |--- why choose us slider grid style 3 CSS
 |
07. Our Recent Projects section style 3 CSS
 |--- Our Recent Projects tabs 
 |--- Our Recent Projects gallery 
 |
08. Testimonial section style 3 CSS
 |--- testimonial video image
 |--- testimonial slider style 3 css
 | 
09. How We Work section style 3 CSS
 |--- How We Work grid style 3 CSS
 | 
10. Blog & Articles section style 3 CSS
 |--- blog grid style 3 CSS
 |
11. Footer style 3 CSS
 |--- footer top style 3
 |--- footer bottom style 3


 /* ============================================== 

07. About us page style
 |--- Inner hero section style CSS
 |--- Our Specialties section style CSS
 |--- Our Team Members section style CSS
 |--- Quick Online Consultancy section style CSS
 
 /* ============================================== 

08. our services page style
 |--- our services section page style CSS

/* ============================================== 

09. Portfolio Grid page style
 |--- Portfolio Grid section style CSS

/* ============================================== 

10. Portfolio Masonary page style
 |--- Portfolio Masonary section style CSS

/* ============================================== 

11. Our Team Members page style
 |--- Our Team Members section style CSS

/* ============================================== 

12. Blog grid page style
 |--- Blog grid page section style CSS

========================================*/

/* ============================================== 

13. Service detail page style
 |--- Inner Image with text section style CSS
 |--- Image with text overlay section style CSS
 |--- inner why choose section style CSS
 |--- Accordion style
 |--- Related section style CSS

========================================*/

/* ============================================== 

14. Portfolio Detail page style
 |--- inner cms section style CSS

========================================*/

/* ============================================== 

15. FAQ page style
 |--- FAQ list style CSS

========================================*/

/* ============================================== 

16. Testimonial page style
 |--- Testimonial grid style CSS

========================================*/

/* ============================================== 

17. Team Member detail page style

========================================*/

/* ============================================== 

18. Blog Standard page style
 |--- blog full grig style CSS
 |--- Sidebar style CSS 

========================================*/

/* ============================================== 

19. blog single page style
 |--- blog single content style CSS

========================================*/

/* ============================================== 

20. Contact page style
 |--- Contact detail box style CSS
 |--- Contact form section style CSS
 |--- Contact map style CSS

========================================*/

/* ============================================== 

21. 404 page style
 |--- not found content style CSS

========================================*/

/* ============================================== 

22. Presantation page style
 |--- Presantation hero banner section CSS
 |--- Stunning Home grig section CSS
 |--- Stunning Inner grig section CSS
 |--- Multipurpose HTML section CSS
 |--- Presantation Why choose Us? section CSS
 |--- footer four CSS

========================================*/

/* ============================================== 

23. Career page style
 |--- Career Opportunity section CSS
 |--- Current Openings section CSS
 |--- Recruitment Process section CSS
 |--- how we care section CSS

========================================*/
/* ============================================== 

24. Langing page style

========================================*/


/*======================================
     01. Google font here
========================================*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*  
    font-family: 'Poppins';
    font-family: 'DM Sans', sans-serif;
*/

/*======================================
     02. General CSS
========================================*/
/*-- Variables --*/
:root {
  --color-primary: #0E5E6F;
  --color-secondary: #FFCB79;
  --color-secondary-light: #FFF8ED;
  --color-secondary-100: #FFEFD6;
  --color-secondary-200: #EEE2CE;
  --color-tertiary: #F2DEBA;
  --color-dark: #263538;
  --color-body: #757575;
  --color-heading: #323232;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-success: #3EB75E;
  --color-danger: #FF0003;
  --color-warning: #FF8F3C;
  --color-info: #1BA2DB;
  --radius: 5px;
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semi-bold: 600;
  --bold: 700;
  --extra-bold: 800;
  --black: 900;
  --shadow-secondary-sm: 0px 4px 15px rgba(0, 0, 0, 0.06);
  --shadow-secondary-md: 0px 4px 25px rgba(214, 191, 149, 0.4);
  --transition: 0.3s;
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'DM Sans', sans-serif;
  --font-size-b1: 22px;
  --font-size-b2: 18px;
  --font-size-b3: 16px;
  --font-size-b4: 14px;
  --font-size-b5: 12px;
  --line-height-b1: 38px;
  --line-height-b2: 28px;
  --line-height-b3: 26px;
  --line-height-b4: 24px;
  --line-height-b5: 20px;
  --h1: 75px;
  --h2: 45px;
  --h3: 35px;
  --h4: 32px;
  --h5: 26px;
  --h6: 20px;
  --30: 30px;
  --h1-lineHeight: 95px;
  --h2-lineHeight: 60px;
  --h3-lineHeight: 45px;
  --h4-lineHeight: 40px;
  --h5-lineHeight: 36px;
  --h6-lineHeight: 28px; 
}


/*-- Typography --*/
p {
    font-size: var(--font-size-b3);
    color: var(--color-body);
    font-family: var(--font-secondary);
    font-weight: var(--regular);
    line-height: var(--line-height-b3);
    margin: 0 0 32px 0;
}
body {
  overflow-x: hidden;
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-secondary);
  color: var(--color-body);
  font-weight: 400;
  background-color: var(--color-white);
  margin: 0;
  padding: 0; 
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  word-break: break-word;
  font-family: var(--font-primary);
  line-height: 1.4074;
  color: var(--color-heading); 
  margin: 0;
  font-weight: var(--semi-bold);
}

h1,
.h1 {
  font-size: var(--h1);
  line-height: var(--h1-lineHeight); 
}

h2,
.h2 {
  font-size: var(--h2);
  line-height: var(--h2-lineHeight); 
}

h3,
.h3 {
  font-size: var(--h3);
  line-height: var(--h3-lineHeight); 
}

h4,
.h4 {
  font-size: var(--h4);
  line-height: var(--h4-lineHeight); 
}

h5,
.h5 {
  font-size: var(--h5);
  line-height: var(--h5-lineHeight); 
}

h6,
.h6 {
  font-size: var(--h6);
  line-height: var(--h6-lineHeight); 
}

.btn {
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.25px;
    font-family: var(--font-primary);
}

/*-- Mixins --*/
* {
    box-sizing: border-box;
}
img{
    max-width: 100%;
    height: auto;
}
ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
a { 
    text-decoration: none;
    transition: all 0.3s ease;
    color: var(--color-heading);
}
a:hover { 
    color: var(--color-primary);
}


.btn-primary:hover, .btn-primary:focus, .btn:focus, .btn-primary:active, .btn:active, .btn-primary:checked, .btn:checked {
    outline: none;
    background-color: var(--color-tertiary);
    color: var(--color-primary);
    box-shadow: none!important;
    border: 0;
}
.btn {
    font-size: var(--font-size-b3);
    line-height: var(--line-height-b2);
    border-radius: 8px;
    padding: 11px 35px;
    display: inline-block;
    transition: 0.5s;
    border: 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn-primary {
    color: var(--color-white);
    background-color: var(--color-primary);
}
.btn-check:checked + .btn-primary.btn, .btn.active, .btn.show, .btn-primary.btn:first-child:active, :not(.btn-check) + .btn-primary.btn:active{
    color: var(--color-white);
    background-color: var(--color-primary);
}
.btn-secondary {
    color: var(--color-dark);
    background-color: var(--color-tertiary);
}
.btn-secondary:hover, .btn-secondary:focus, .btn:focus, .btn-secondary:active, .btn:active, .btn-secondary:checked, .btn:checked {
    outline: none;
    color: var(--color-white);
    background-color: var(--color-primary);
    box-shadow: none!important;
    border: 0;
}
.btn-check:checked + .btn-secondary.btn, .btn.active, .btn.show, .btn-secondary.btn:first-child:active, :not(.btn-check) + .btn-secondary.btn:active{
    color: var(--color-dark);
    background-color: var(--color-tertiary);
}
.btn::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 51%;
    height: 0;
    opacity: 1;
    background-color: var(--color-tertiary);
    z-index: -1;
    transition: 0.5s;
}
.btn::after{
    content: '';
    position: absolute;
    right: 0;
    width: 50%;
    bottom: 0;
    height: 0;
    opacity: 1;
    background-color: var(--color-tertiary);
    z-index: -1;
    transition: 0.5s;
}
.btn:hover::before, .btn:hover::after{
    height: 100%;
}
.btn-primary:hover{
    background-color: var(--color-tertiary);
    color: var(--color-primary);
}
.btn img{
    max-width: 28px;
    margin-left: 12px;
}
.btn-style-2{
    border-radius: 50px;
}
.btn-style-2 i{
    padding-left: 10px;
}
.btn-style-2:after{
    display: none;
}
.btn-style-2:before{
    background-color: var(--color-primary);
    width: 0;
    height: 100%;
}
.btn-style-2:hover:before{
    width: 100%;
}
.btn-style-2:hover{
    color: var(--color-white);
}
.btn-style-3 {
    border-radius: 50px;
}
.btn-style-3 i{
    padding-left: 10px;
}
.btn-style-3:after{
    display: none;
}
.btn-style-3.btn-primary:before{
    background-color: var(--color-tertiary);
    width: 0;
    height: 100%;
}
.btn-style-3.btn-secondary:before{
    background-color: var(--color-primary);
    width: 0;
    height: 100%;
}

.btn-style-3:hover:before{
    width: 100%;
}
.btn-style-3.btn-primary:hover{
    color: var(--color-primary);
}
.btn-style-3.btn-secondary:hover{
    color: var(--color-white);
}

.bg-image{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.bg-secondary-light{
    background-color: var(--color-secondary-light);
}
.bg-tertiary{
    background-color: var(--color-tertiary);
}
.form-control:focus{
    outline: none;
    box-shadow: none;
}
.btn-gray{
    background-color: var(--color-body);
    color: var(--color-white);
}
.btn-style-3.btn-gray:before{
    background-color: var(--color-primary);
    width: 0;
    height: 100%;
}
.btn-style-3.btn-gray:hover:before{
    width: 100%;
}
.btn-style-3.btn-gray:hover{
    color: var(--color-white);
}

.height100 {
    min-height: 100vh;
}

.sub-title{
    text-transform: uppercase;
    font-size: var(--font-size-b3);
    line-height: var(--line-height-b4);
    color: var(--color-primary);
    margin-bottom: 20px;
}
.circle-icon{
    border-radius: 100%;
    padding: 6px;
    width: 80px;
    height: 80px;
    background: rgb(255 203 121 / 50%);
}
.circle-icon span{
    width: 100%;
    height: 100%;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    background: var(--color-secondary);
}
.main-wrapper{
    overflow: hidden;
}
.swiper-pagination .swiper-pagination-bullet{
    width: 10px;
    height: 10px;
    background-color: var(--color-tertiary);
    opacity: 1;
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: var(--color-primary);
}

/*Form style*/
.form-row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -8px;
    margin-left: -8px;
}
.form-row>.col, .form-row>[class*=col-] {
    padding-right: 8px;
    padding-left: 8px;
}
.form-group{
    margin-bottom: 18px;
}
.form-control{
    background: rgba(255, 239, 214, 0.56);
    border-radius: 3px;
    padding: 14px 20px;
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b4);
    color: var(--color-black);
    font-family: var(--font-secondary);
    border: 1px solid transparent;
    border-radius: 0;
    width: 100%;
    display: block;
}
.form-control:hover,
.form-control:focus{
    border-color: var(--color-primary);
}
textarea.form-control{
    height: 124px;
    resize: none;
}
.form-control::-webkit-input-placeholder { 
  color: var(--color-body);
}
.form-control::-moz-placeholder { 
  color: var(--color-body);
}
.form-control:-ms-input-placeholder { 
  color: var(--color-body);
}
.form-control:-moz-placeholder {
  color: var(--color-body);
}
.custom-file{
    position: relative;
}
.custom-file .custom-file-wrap{
 display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 29px;
}
.custom-file .custom-file-input{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.custom-file .choose-file{
    background: rgba(242, 222, 186, 0.44);
    border-radius: 10px;
    padding: 12px 35px;
    font-size: var(--font-size-b2);
    color: var(--color-black);
}
.custom-file .custom-file-label{
    font-size: var(--font-size-b2);
    color: var(--color-black);
}


/*section heading css*/
.section-heading{
    text-align: center;
    margin-bottom: 30px;
    overflow: hidden;
}
.section-heading h2.title{
    max-width: 500px;
    margin: 0 auto;
}
.inner-heading{
    text-align: left !important;
    margin-bottom: 0;
}
.inner-heading h2.title{
    max-width: 100%;
    margin: 0;
}
.title{
    margin-bottom: 20px;
}

.item-overflow{
    overflow: hidden;
}


/*all pupop CSS*/
.all-pupop{
    background: var(--color-white);
    border-radius: 40px;
    padding: 50px;
    max-width: 800px;
    margin: 30px auto;
    position: relative;
}
.all-pupop .mfp-close{
    right: 10px;
    top: 10px;
}
.newsletter-popup{
    text-align: center;
}
.popup-title{
    font-size: var(--h3);
    line-height: var(--h3-lineHeight);
}
.newsletter-form-popup .newsletter-form{
    background: rgba(255, 239, 214, 0.17);
    border: 1px solid var(--color-tertiary);
    border-radius: 30px;
    padding: 35px 50px 20px;
}
.newsletter-form-popup .newsletter-form .form-control{
    background: var(--color-secondary-100);
    border-radius: 10px;
    margin-bottom: 30px;
    padding: 20px 35px;
}
.newsletter-form-popup .btn{
    font-size: var(--font-size-b2);
    border-radius: 10px;
}

/*cookie popup*/
.cookie-popup{
    position: fixed;
    bottom: -150%;
    left: 0;
    background: var(--color-white);
    padding: 50px 0 35px;
    width: 100%;
    transition: all 0.5s ease;
    z-index: 999;
}
.cookie-popup.open{
    bottom: 0;
}
.cookie-popup .section-heading{
    text-align: left;
    margin-bottom: 20px;
}
.cookie-button .button-column{
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    width: 33.33%;
}
.cookie-button .button-column .btn{
    width: 100%;
    border-radius: 4px;
    font-size: var(--font-size-b2);
}

/*enquiry form popup*/
.enquiry-form-popup{
    max-width: 625px;
    border-radius: 15px;
    padding: 43px;
}
.enquiry-form-popup .section-heading{
    text-align: left;
}
.enquiry-form-popup .popup-title{
    line-height: var(--h6-lineHeight);
}
.enquiry-form-popup .form-control{
    border-radius: 5px;
}
.enquiry-form-popup .btn{
    width: 100%;
    font-size: var(--font-size-b2);
}

/*pagination*/
.pagination-part{
    border-top: 1px solid rgba(214, 191, 149, 0.4);
    padding: 26px 0;
    margin-top: 40px;
}
.pagination{
    border: 0;
    border-radius: 0;
    gap: 10px;
}
.pagination .page-item .page-link{
    border: 0;
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    border-radius: 4px !important;
    font-size: var(--font-size-b2);
    color: var(--color-dark);
    font-weight: var(--bold);
}
.pagination .page-item .page-link:focus{
    outline: none;
    box-shadow: none;
    background: transparent;
}
.pagination .page-item .page-link:hover,
.pagination .page-item.active .page-link{
    background: var(--color-tertiary);
}
.pagination .page-item.next-page .page-link{
    width: auto;
    padding: 5px 20px;
}

/* Search Popup style*/
.search-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(0, 0, 0, .8);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.search-active .search-popup {
    transform: translateY(0%);
    margin-top: 0;
}
.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    border: none;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    background: var(--color-primary);
    text-align: center;
    width: 50px;
    height: 50px;
    color: var(--color-white);
    font-size: var(--line-height-b5);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    transition: all 500ms ease;
    opacity: 0;
    visibility: hidden;
}
.search-active .search-popup .close-search {
    visibility: visible;
    opacity: 1;
    top: 50%;
    transition-delay: 1500ms;
}
.search-popup form {
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin: -35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: all 300ms ease;
}
.search-active .search-popup form {
    transform: scaleX(1);
    transition-delay: 1200ms;
}
.search-popup .form-group {
    position: relative;
    margin: 0px;
    overflow: hidden;
}
.search-popup .form-group input[type="text"], .search-popup .form-group input[type="search"] {
    position: relative;
    width: 100%;
    height: 60px;
    outline: none;
    border-radius: 50px;
    border: none;
    padding: 0 100px 0 35px;
    transition: all 500ms ease;
    text-transform: capitalize;
}
.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 5px;
    top: 5px;
    border-radius: 50px;
    background: var(--color-primary);
    text-align: center;
    font-size: var(--line-height-b5);
    color: var(--color-white) !important;
    height: 50px;
    width: 50px;
    border: none;
    cursor: pointer;
    transition: all 500ms ease;
}

/*======================================
     End General CSS
========================================*/

/*======================================
    03. Preloader CSS
========================================*/
.preloader {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999999999;
    width: 100%;
    height: 100%;
    background-color: var(--color-tertiary);
    overflow: hidden;
}
.preloader-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.preloader-icon {
    width: 100px;
    height: 100px;
    display: inline-block;
    padding: 0px;
}
.preloader-icon span {
    position: absolute;
    display: inline-block;
    width: 100px;
    height: 100px;
    background: url('../images/loader-icon.png') no-repeat 0 0;
    background-size: 100%;
    background-position: center center;
}
.preloader-icon span:last-child {
    background: url('../images/loader-icon-shape.png') no-repeat 0 0;
    background-size: 100%;
    animation: 1.6s linear 0s infinite normal none running preloader-fx;
    background-position: center center;
    /*width: 82px;
    height: 80px;
    margin: 24px 0 0 14px;*/
}

@keyframes preloader-fx { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-webkit-keyframes preloader-fx { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
/*======================================
    end Preloader CSS
========================================*/


/*======================================
    01. Header CSS
========================================*/
.header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    transition: all 1s ease;
}
.header.sticky{
    position: fixed;
    top: -38px;
    z-index: 99;
    background-color: var(--color-secondary-light);
}
.header.sticky .main-navigation {
    padding: 15px 0;
}

/*header top bar*/
.header-top-bar{
    background: var(--color-primary);
    padding: 6px 0;
}
.header-top-bar p{
    font-size: var(--font-size-b4);
    line-height: var(--line-height-b4);
    color: var(--color-white);
    font-weight: var(--medium);
    font-family: var(--font-primary);
    margin-bottom: 0;
}

.header-top-bar p a{
    font-size: var(--font-size-b4);
    line-height: var(--line-height-b4);
    color: var(--color-white);
    margin-right: 10px;
}
.header-top-bar p a:hover {
   color: var(--color-secondary);
}

/*header social link*/
.header-social li a{
    font-size: var(--font-size-b4);
    color: var(--color-white);
}
.header-social li a:hover{
    color: var(--color-secondary);
}

/*header main navigation*/
.main-navigation{
    padding: 30px 0;
    transition: all 0.3s ease;
}

/*header menu*/
.mobile-menu{
    display: none;
}
.main-menu{
   display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
   -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
   gap: 40px;
   -webkit-box-pack: justify;
    -ms-flex-pack: justify;
   justify-content: center;
}
.main-menu li a{
    font-size: var(--font-size-b3);
    line-height: var(--line-height-b3);
    color: var(--color-dark);
    font-weight: var(--medium);
    position: relative;
}
.main-menu li a:hover{
    color: var(--color-secondary);
}
.main-menu li.active > a,
.main-menu li .dropdown-menu li.active > a{
    color: var(--color-secondary);
}



/*header right icon*/
.header-right{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: end;
}
.header-right a{
    color: var(--color-dark);
    font-size: var(--font-size-b2);
}
.header-right a:hover{
    color: var(--color-secondary);
}

/*Mobile toggle button*/
.toggle-menu-button{
    display: none;
}


/*======================================
    end Header CSS
========================================*/

/*======================================
    02. Hero section CSS
========================================*/
.hero-section {
    padding: 0;
    position: relative;
}

/*hero content slider*/
.hero-content-slider{
    position: initial;
    z-index: 2;
    overflow: inherit;
}

.hero-content-slider .swiper-wrapper .swiper-slide{
    min-height: 100vh;
    padding: 150px 0 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: auto;
}
.hero-content{
    max-width: 830px;
    margin: 0 auto;
    padding: 50px 0;
    text-align: center;
    position: relative;
    z-index: 1;
}
.hero-content .sub-title{
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b3);
}
.hero-content h1 {
    margin-bottom: 24px;
}
.hero-content h1 span{
    color: var(--color-secondary);
    position: relative;
    z-index: 1;
}
.hero-content h1 span:before{
    content: '';
    width: 177px;
    height: 177px;
    border-radius: 100%;
    position: absolute;
    top: -60px;
    right: -40px;
    background-color: var(--color-secondary-100);
    z-index: -1;
}
.hero-content p{
    max-width: 515px;
    margin: 0 auto 48px;
}
.hero-btn{
    background-color: var(--color-tertiary);
    width: 90px;
    height: 90px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    border-radius: 100%;
    margin: 0 auto;
    position: relative;
}
.hero-btn:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 100%;
    border: 1px solid var(--color-dark);
    transition: all 0.3s ease;
}
.hero-btn:hover:before{
    left: 0;
    top: 0;
}

/*hero image*/
.hero-images{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: 845px;
    overflow: hidden;
    min-height: 100vh;
    display: grid;
    justify-content: end;
    align-content: flex-end;
}
.hero-images:before{
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--color-tertiary);
    position: absolute;
    bottom: 0;
    right: 0;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.hero-images-slider{
    position: relative;
    max-width: 32vw;
}

/*hero shape img*/
.hero-line-shape{
    position: absolute;
    bottom: 60px;
    left: 0;
}

/*hero thumbs*/
.hero-thumbs{
    position: absolute;
    left: 60px;
    top: 60px;
    height: 100%;
    display: grid;
    align-content: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    width: 76px;
}
.hero-thumbs-slider{
    height: 260px;
}
.hero-thumbs-img{
    width: 76px;
    height: 76px;
    border-radius: 100%;
    overflow: hidden;
    background: #D9D9D9;
    border: 1px solid var(--color-dark);
    transform: scale(0.66);
    transition: all 0.3s ease;
    opacity: 0.5;
}
.hero-thumbs-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-thumbs-slider .swiper-slide.swiper-slide-active .hero-thumbs-img{
    transform: scale(1);
    opacity: 1;
}

/*Hero slider arrow*/
.hero-thumbs .swiper-button-prev,
.hero-thumbs .swiper-button-next{
    position: static;
    width: 100%;
    color: var(--color-dark);
    height: 54px;
    outline: none;
}
.hero-thumbs .swiper-button-prev:hover,
.hero-thumbs .swiper-button-next:hover{
    color: var(--color-secondary);
}
.hero-thumbs .swiper-button-prev svg,
.hero-thumbs .swiper-button-next svg{
    height: 100%;
}
.hero-thumbs .swiper-button-prev:after,
.hero-thumbs .swiper-button-next:after{
    display: none;
}
.hero-thumbs .swiper-button-prev{
    margin-bottom: 50px;
}
.hero-thumbs .swiper-button-next{
    margin-top: 50px;
}

/*Slider animation css*/
.hero-content-slider .swiper-slide .sub-title, 
.hero-content-slider .swiper-slide .title, 
.hero-content-slider .swiper-slide p, 
.hero-content-slider .swiper-slide .hero-btn {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1000ms ease;
}
.hero-content-slider .swiper-slide.swiper-slide-active .sub-title, 
.hero-content-slider .swiper-slide.swiper-slide-active .title, 
.hero-content-slider .swiper-slide.swiper-slide-active p, 
.hero-content-slider .swiper-slide.swiper-slide-active .hero-btn {
    opacity: 1;
    transform: translateY(0);
}
.hero-content-slider .swiper-slide.swiper-slide-active .sub-title {
    transition-delay: 700ms;
}
.hero-content-slider .swiper-slide.swiper-slide-active .title {
    transition-delay: 1000ms;
}
.hero-content-slider .swiper-slide.swiper-slide-active p {
    transition-delay: 1300ms;
}
.hero-content-slider .swiper-slide.swiper-slide-active .hero-btn {
    transition-delay: 1600ms;
}
.hero-content-slider .swiper-slide .hero-images:before{
    opacity: 0;
    transform: translateX(50px);
    transition: all 1700ms ease;
}
.hero-content-slider .swiper-slide.swiper-slide-active .hero-images:before{
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1700ms;
}
.hero-content-slider .swiper-slide .hero-images .hero-images-slider{
    opacity: 0;
    transform: translateX(50px);
    transition: all 1800ms ease;
}
.hero-content-slider .swiper-slide.swiper-slide-active .hero-images .hero-images-slider{
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1800ms;
}

/*======================================
    end Hero section CSS
========================================*/

/*======================================
    03. business services section CSS
========================================*/

.business-services-section{
    padding: 120px 0;
    position: relative;
}

.business-shape{
    position: absolute;
    top: -100px;
    width: 247px;
    height: 246px;
    right: -92px;
    border-radius: 100%;
    background: var(--color-secondary-100);
}
.business-shape:before{
    content: '';
    width: 178px;
    height: 178px;
    right: 10px;
    border: 4px dashed var(--color-tertiary);
    position: absolute;
    top: 115px;
    border-radius: 100%;
}
.shape-circle{
    position: absolute;
    top: 224px;
    left: 30px;
    width: 38px;
    height: 38px;
    border-radius: 100%;
    background-color: var(--color-secondary);
}
.shape-circle:before{
    width: calc(100% + 14px);
    height: calc(100% + 14px);
    content: '';
    position: absolute;
    top: -7px;
    left: -7px;
    border-radius: 100%;
    border: 1px solid var(--color-secondary);

}
.shape-circle:after{
    width: calc(100% + 30px);
    height: calc(100% + 30px);
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    border-radius: 100%;
    border: 1px solid var(--color-secondary);
    
}


.business-service-grid{
    text-align: center;
    max-width: 250px;
    margin: 30px auto 0;
}
.business-service-icon{
    margin:0 auto 30px;
    height: 85px;
    width: 85px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    position: relative;
}
.business-service-icon:before{
    content: '';
    width: 75px;
    height: 60px;
    position: absolute;
    top: -28px;
    right: -30px;
    background: url('../images/business-service-shape.svg') no-repeat 0 0;
    background-size: 100%;
    transition: all 0.3s ease;
    -webkit-animation: shape-move 5s infinite linear;
    animation: shape-move 5s infinite linear;
}
@-webkit-keyframes shape-move {
  0% {
    transform: translateY(0px) rotate(0deg);
}
50% {
    transform: translateY(20px) rotate(30deg);
}
100% {
    transform: translateY(0px) rotate(0deg);
}
}

@keyframes shape-move {
  0% {
    transform: translateY(0px) rotate(0deg);
}
50% {
    transform: translateY(20px) rotate(30deg);
}
100% {
    transform: translateY(0px) rotate(0deg);
}
}
.business-service-icon img{
    position: relative;
    z-index: 1;
}
.business-service-grid h4{
    font-size: var(--font-size-b1);
    margin-bottom: 10px;
    line-height: var(--line-height-b1);
}
.business-service-grid h4 a {
    color: var(--color-dark);
}
.business-service-grid h4 a:hover{
    color: var(--color-secondary);
}
.business-service-grid p{
    margin-bottom: 15px;
}
.service-btn{
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-dark);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    margin: 0 auto;
    border-radius: 100%;
}
.service-btn:hover{
    border-color: var(--color-secondary);
}
.service-btn img{
    width: 12px;
}

/*======================================
    end business services section CSS
========================================*/


/*======================================
    04. about company section CSS
========================================*/
.about-company-section{
    margin-bottom: 130px;
    padding: 0 60px;
    position: relative;
}

/*about image gallery*/
.about-image-gallery{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px;
    position: relative;
}
.about-image-gallery .about-image{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.about-image-gallery .about-image:before{
    padding-top: 130%;
    display: block;
    content: '';
}
.about-image-gallery .about-image img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-image-gallery .about-image.image-1{
    border-radius: 80px 0px 0px 0px;
}
.about-image-gallery .about-image.image-2{
    border-radius: 0px 0px 80px 0px;
    overflow: hidden;
}

/*about video icon*/
.about-video-icon{
    position: absolute;
    bottom: 27px;
    right: 25px;
}
.about-video-icon .circle-icon{
    width: 88px;
    height: 88px;
    display: block;
    color: var(--color-primary);
    font-size: 36px;
    background: rgba(255, 255, 255, 0.5);
}
.about-video-icon .circle-icon span{
    background: var(--color-white);
}
.about-video-icon .circle-icon:hover{
    background: var(--color-white);
    color: var(--color-white);
}
.about-video-icon .circle-icon:hover span{
    background: var(--color-primary);
}


/*about info*/
.about-info{
    max-width: 555px;
    padding-left: 20px;
}
.about-info .section-heading{
    text-align: left;
}
.about-info .sub-title{
    text-align: left;
}
.about-info h2.title{
    max-width: 100%;
}
.about-info p{
    margin-bottom: 32px;
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b2);
}

/*about feature list*/
.about-feature-list{
    border-top: 1px solid var(--color-secondary-200);
    border-bottom: 1px solid var(--color-secondary-200);
    padding: 10px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 36px;
}
.about-feature-list .our-feature{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 25px;
}
.our-feature .about-feature-icon{
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}
.about-feature-content h5{
    color: var(--color-heading);
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b2);
}

/*start about shape*/
.about-shape-line{
    position: absolute;
    right: 0;
    bottom: 110px;
    -webkit-animation: pulse 3.5s alternate infinite linear;
    animation: loader-pulse 3.5s alternate infinite linear;
    z-index: -1;
}
.about-shape-line span{
    width: 248px;
    height: 22px;
    background: url(../images/line-shape.svg) no-repeat 0 0;
    background-size: 100%;
    display: block;
    
}


@-webkit-keyframes loader-pulse {
   0%{
    -webkit-transform: translateY(0px);
}
100% {
    -webkit-transform: translateY(50px);
}
}

@keyframes loader-pulse {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}
100% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
}
}

/*======================================
    end about company section CSS
========================================*/



/*======================================
    05. What we do section CSS
========================================*/
.what-we-do-section{
    background: var(--color-secondary-light);
    padding: 70px 0;
    position: relative;
}
.what-we-do-section:before{
    content: '';
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-secondary-100);
}
.what-we-do-section .container{
    position: relative;
    z-index: 1;
}

/*what we do slider*/
.what-we-do-slider{
    padding-top: 15px;
    position: relative;
}
.what-we-do-slider .swiper-slide{
    padding: 15px 0;
    height: auto !important;
}
.what-we-do-service{
   background: var(--color-white);
   box-shadow: var(--shadow-secondary-sm);
   border-radius: var(--radius-md);
   padding: 35px 28px;
   text-align: center;
   height: 100%;
}
.what-we-do-service .circle-icon{
    margin: 0 auto 25px;
    background: rgba(242, 222, 186, 0.5);
}
.what-we-do-service .circle-icon span{
    background: var(--color-tertiary);
}
.what-we-do-service h6{
    margin-bottom: 14px;
}
.what-we-do-service p{
    margin: 0;
}
.what-we-do-slider .swiper-button-prev{
    left: -45px;
}
.what-we-do-slider .swiper-button-next{
    right: -45px;
}
.what-we-do-slider .swiper-button-next, .what-we-do-slider .swiper-button-prev{
    color: var(--color-dark);
}
.what-we-do-slider .swiper-button-next:after, .what-we-do-slider .swiper-button-prev:after{
    font-size: 24px;
    font-weight: 900;
}


/*======================================
    End What we do section CSS
========================================*/

/*======================================
    06. Why choose Us? section
========================================*/
.why-choose-us-section{
    padding: 130px 0;
    position: relative;
}
.whychooseus-feature-list{
    padding-top: 30px;
}

/*Why choose Us tabs list*/
.tabs-list{
    border-top: 1px solid var(--color-secondary-200);
    border-bottom: 1px solid var(--color-secondary-200);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    margin-bottom: 66px;
}
.tabs-list li{
    padding: 15px 55px;
    display: block;
    color: var(--color-heading);
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b2);
    cursor: pointer;
    font-weight: var(--semi-bold);
}
.tabs-list li:hover,
.tabs-list li.current,
.tab-link-title.current{
    background: var(--color-tertiary);
}

.tab-link-title{
    border-top: 1px solid var(--color-secondary-200);
    border-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    margin-bottom: 66px;
    margin-bottom: 0px;
    padding: 15px 20px;
    display: none;
    color: var(--color-heading);
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b2);
    cursor: pointer;
    font-weight: var(--semi-bold);
    text-align: center;
}

/*Why choose Us tabs content*/
.tabs-content{
    display: none;
}
.tabs-content.current{
    display: block;
}
.whychooseus-feature-img{
    filter: drop-shadow(0px 4px 20px rgba(92, 77, 50, 0.2));
    position: relative;
    max-width: 580px;
}
.whychooseus-feature-img:after{
    padding-top: 65%;
    content: '';
    display: block;
}
.whychooseus-feature-img:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: -30px;
    left: -36px;
    background: rgba(242, 222, 186, 0.2);
    border-radius: 30px;
}
.whychooseus-feature-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.whychooseus-feature-img{
    background: #D9D9D9;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}
.whychooseus-feature-content .sub-title{
    text-align: left;
    margin-bottom: 15px;
}
.whychooseus-feature-content h2.title{
    margin: 0 0 20px;
    max-width: 100%;
}
.whychooseus-feature-content p{
    margin-bottom: 20px;
}


/*======================================
    End Why choose Us? section
========================================*/


/*======================================
    07. our sucess section
========================================*/
.our-sucess-section{
    padding: 0 85px;
}
.our-sucess-box{
    border-radius: 40px;
    padding: 64px 0px;
    position: relative;
    overflow: hidden;
}
.our-sucess-box:after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background: #f6e7cd;
    width: 70%;
    height: 100%;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.our-sucess-box:before{
    content: '';
    position: absolute;
    bottom: -120px;
    left: -90px;
    background: var(--color-white);
    opacity: 0.2;
    width: 390px;
    height: 390px;
    border-radius: 100%;
    -webkit-animation: loader-circle 3.5s alternate infinite linear;
    animation: loader-circle 3.5s alternate infinite linear;
}

@-webkit-keyframes loader-circle {
  0%{
    -webkit-transform: translateX(0px);
}
100% {
    -webkit-transform: translateX(-50px);
}
}

@keyframes loader-circle {
  0%{
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}
100% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
}
}
.our-sucess-box .container{
    position: relative;
    z-index: 1;
}
.our-sucess-box .section-heading{
    margin-bottom: 60px;
}
.our-sucess-box .section-heading h2.title{
    max-width: 990px;
}
.our-sucess-box h2{
    max-width: 990px;
}
.our-sucess-list .col-md-3{
    position: relative;
}
.our-sucess-list .col-md-3:before{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background: #D6BF95;
}
.our-sucess-list .col-md-3:last-child:before{
    display: none;
}
.our-sucess-service{
    text-align: center;
}
.our-sucess-service h2{
    color: var(--color-primary);
    font-size: var(--h1);
    line-height: var(--h1-lineHeight);
    margin-bottom: 10px;
}
.our-sucess-service h6{
    font-weight: var(--medium);
    color: var(--color-body);
}

/*======================================
    End our sucess section
========================================*/


/*======================================
    08. Testimonial section
========================================*/

.testimonial-section{
    padding: 130px 0;
    text-align: center;
    position: relative;
}
.testimonial-section .shape-image{
    position: absolute;
    left: 14vw;
    top: -25px;
    z-index: -1;
    -webkit-animation: loader-shape1 3s alternate infinite linear;
    animation: loader-shape1 3s alternate infinite linear;
}

@-webkit-keyframes loader-shape1 {
  0%{
    -webkit-transform: translateY(0px);
}
100% {
    -webkit-transform: translateY(-30px);
}
}

@keyframes loader-shape1 {
  0%{
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}
100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
}
}

/*Testimonial slider*/
.testimonial-info{
    padding: 0 150px;
}
.testimonial-info .quotes-icon{
    margin: 0 auto 20px;
    display: block;
    max-width: 66px;
}
.testimonial-info p{
    margin-bottom: 30px;
    font-size: var(--font-size-b1);
    line-height: var(--line-height-b1);
    font-family: var(--font-primary);
}
.testimonial-user .avatar-img{
    width: 115px;
    height: 115px;
    border-radius: 100%;
    overflow: hidden;
    margin: 0 auto 15px;
}
.testimonial-user .avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial-user h6{
    color: var(--color-primary);
    font-family: var(--font-secondary);
    font-weight: var(--bold);
}
.testimonial-user h6 a{
    color: var(--color-primary);
}
.testimonial-user h6 a:hover{
    color: var(--color-body);
}

.testimonial-user span{
    color: var(--color-body);
    display: block;
    font-size: var(--font-size-b3);
    font-weight: var(--regular);
}
.testimonial-slider .swiper-button-next:after, 
.testimonial-slider .swiper-button-prev:after{
    display: none;
}
.testimonial-slider .swiper-button-next, 
.testimonial-slider .swiper-button-prev{
    width: 74px;
    height: 74px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-primary);
}
.testimonial-slider .swiper-button-next:hover, 
.testimonial-slider .swiper-button-prev:hover{
    background: var(--color-secondary-100);
    border-color: var(--color-secondary);
}
.testimonial-slider .swiper-pagination{
    display: none;
}

/* testimonial slider animation*/
.testimonial-slider .swiper-slide .quotes-icon, 
.testimonial-slider .swiper-slide .testimonial-info p, 
.testimonial-slider .swiper-slide .testimonial-user .avatar-img, 
.testimonial-slider .swiper-slide .testimonial-user h6,
.testimonial-slider .swiper-slide .testimonial-user span{
    opacity: 0;
    transform: translateY(50px);
    transition: all 1000ms ease;
}
.testimonial-slider .swiper-slide.swiper-slide-active .quotes-icon{
    transition-delay: 700ms;
}
.testimonial-slider .swiper-slide.swiper-slide-active .testimonial-info p{
    transition-delay: 1000ms;
}
.testimonial-slider .swiper-slide.swiper-slide-active .testimonial-user .avatar-img {
    transition-delay: 1200ms;
}
.testimonial-slider .swiper-slide.swiper-slide-active .testimonial-user h6 {
    transition-delay: 1500ms;
}
.testimonial-slider .swiper-slide.swiper-slide-active .testimonial-user span {
    transition-delay:1700ms;
}

.testimonial-slider .swiper-slide.swiper-slide-active .quotes-icon, 
.testimonial-slider .swiper-slide.swiper-slide-active .testimonial-info p, 
.testimonial-slider .swiper-slide.swiper-slide-active .testimonial-user .avatar-img, 
.testimonial-slider .swiper-slide.swiper-slide-active .testimonial-user h6,
.testimonial-slider .swiper-slide.swiper-slide-active .testimonial-user span {
    opacity: 1;
    transform: translateY(0);
}

/*======================================
    End Testimonial section
========================================*/

/*======================================
    09. How we help section
========================================*/
.how-we-help-img{
    height: 100%;
}
.how-we-help-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.how-we-help-content{
    padding: 60px 50px;
}
.how-we-help-content .section-heading{
    text-align: left;
}
.how-we-help-content .section-heading h2.title{
    max-width: 100%;
}

/* How we help service */
.how-we-help-list{
    max-width: 480px;
    display: grid;
    row-gap: 18px;
}
.how-we-help-service{
    padding: 25px;
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.47);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 23px;
}
.how-we-help-service .icon{
    flex-shrink: 0;
}
.how-we-help-service .content h6{
    margin-bottom: 8px;
}
.how-we-help-service .content p{
    margin: 0;
    line-height: 20px;
}

/*======================================
    End How we help section
========================================*/


/*======================================
    10. Blog & Articles section
========================================*/
.blog-articles-section{
    padding: 130px 0;
}
.blog-articles-section .section-heading{
    text-align: left;
    margin-bottom: 0;
}
.blog-articles-section .section-heading h2.title{
    max-width: 100%;
}
.blog-articles-section .read-more-right{
    text-align: right;
}

/*blog grid css*/
.blog-grid{
    display: grid;
    align-content: space-between;
    height: 100%;
}
.blog-grid .blog-img{
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
}
.blog-grid .blog-img:before{
    content: '';
    padding-top: 100%;
    display: block;
}
.blog-grid .blog-img a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.blog-grid .blog-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}
.blog-grid:hover .blog-img img{
    transform: scale(1.2);
}
.blog-grid .blog-info h5{
    margin-bottom: 15px;
}
.blog-grid .blog-info p{
    margin-bottom: 23px;
}

/*======================================
    end Blog & Articles section
========================================*/

/*======================================
    11. Footer one CSS
========================================*/
.footer-one p,
.footer-one a,
.footer-one h6{
    color: var(--color-white);
}
.footer-one a:hover{
    color: var(--color-secondary);
}

/*get free quote*/
.footer-one .get-free-quote{
    background-color: var(--color-tertiary);
    padding: 45px 0;   
}
.footer-one .get-free-quote h2{
    color: var(--color-heading);
    margin: 0;
}
.get-free-quote-form{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 568px;
    margin: 0 0 0 auto;
    position: relative;
}
.get-free-quote-form .form-control{
    border-radius: 3px;
    background-color: var(--color-white);
    padding: 18px 170px 18px 20px;
    font-size: var(--font-size-b2);
    color: var(--color-body);
    font-weight: var(--regular);
    font-family: var(--font-secondary);
    border: 1px solid transparent;
}

.get-free-quote-form .form-control:hover{
    border-color: var(--color-primary);
}
.get-free-quote-form .btn{
    border-radius: 3px;
    width: 165px;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    right: 0;
    padding: 17px 35px;
/*    height: 100%;*/
}
.get-free-quote-form .btn::after,
.get-free-quote-form .btn::before{
    background-color: var(--color-secondary);
}
.get-free-quote-form .btn:hover{
    color: var(--color-dark);
}

/*footer main css*/
.footer-one .footer-main{
    padding-top: 50px;
    background-color: var(--color-dark);
    color: var(--color-white);
}
.footer-one .footer-widget-about .footer-logo{
    margin-bottom: 30px;
}
.footer-one .footer-widget-about p{
    line-height: 21px;
    margin-bottom: 20px;
}
.footer-one h6{
    margin-bottom: 28px;
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b2);
}
.footer-one h6:after{
    content: '';
    background-color: var(--color-tertiary);
    border-radius: var(--radius-sm);
    height: 3px;
    width: 30px;
    display: block;
    margin-top: 7px;
}
.footer-one .footer-link{
    padding:10px 0;
    margin-bottom: 12px;
}
.footer-one .footer-link.menu1{
    padding-left: 90px;
}
.footer-one .footer-link.menu2{
    padding-left: 50px;
}
.footer-one .footer-link ul li{
    margin-bottom: 6px;
    display: block;
}
.footer-one .footer-link ul li a{
    font-family: var(--font-secondary);
    font-weight: var(--regular);
}
.footer-one .footer-address p{
    margin-bottom: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.footer-one .footer-address p .icon{
    flex-shrink: 0;
    margin-right: 12px;
}

/*footer bottom copyright*/
.footer-one .footer-bottom-copyright{
    border-top: 1px solid #35474A;
    padding: 18px 0;
}
.footer-one .footer-bottom-copyright p{
    margin: 0;
}
.footer-one .designed-by-text p{
    text-align: right;
}
.footer-one .designed-by-text p a{
    color: var(--color-secondary);
}
.footer-one .designed-by-text p a:hover{
    color: var(--color-white);
}

/*======================================
    End Footer style
========================================*/


/*======================================================
    05. Home Two style
========================================================*/

/*======================================
    01. Header style 2 CSS
========================================*/
.header-style-2{
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 99;
    transition: all 0.3s ease;
}
.header-style-2.sticky{
    top: -96px;
}

/*header top bar*/
.header-style-2-top{
    padding: 15px 0;
}
.header-style-2-left{
    color: var(--color-white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 15px;
}
.header-style-2-left p{
    margin: 0;
    color: var(--color-white);
    gap: 5px;
    font-family: var(--font-primary);
}
.header-style-2-left a{
    color: var(--color-white);
}
.header-style-2-left a:hover{
    color: var(--color-secondary);
}

/*mainmenu-style-2*/
.logo-img .mobile-logo{
    display: none;
}
.mainmenu-style-2{
    border-radius: 50px;
    background: var(--color-tertiary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.mainmenu-style-2 .main-menu{
    gap: 0;
    padding: 0 25px;
}
.mainmenu-style-2 .main-menu li a{
    padding: 24px 15px;
    display: block;
    color: var(--color-dark);
    position: relative;
}
.mainmenu-style-2 .main-menu > li:hover > a,
.mainmenu-style-2 .main-menu > li.active > a{
    color: var(--color-primary);
}
.mainmenu-style-2 .main-menu > li.active > a:before,
.mainmenu-style-2 .main-menu > li:hover > a:before{
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-dark);
    width: 6px;
    height: 6px;
    border-radius: 100%;
}


/* phone line style-2 */
.phoneline-style-2{
    position: relative;
}
.phoneline-style-2 a .icon{
    position: absolute;
    top: 50%;
    left: -25px;
    background: var(--color-primary);
    border-radius: 100%;
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    margin-top: -25px;
}
.phoneline-style-2 a{
    background: var(--color-primary);
    padding: 15px 30px 15px 50px;
    display: block;
    border-radius: 0 50px 50px 0;
    height: 100%;
    display: grid;
    align-content: center;
    font-size: var(--font-size-b2);
    color: var(--color-secondary-100);
    line-height: normal;
}
.phoneline-style-2 a .phone-title{
    display: block;
    color: var(--color-white);
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
}

/*======================================
    End Header style 2 CSS
========================================*/


/*======================================
    02. Hero section style 2 CSS
========================================*/

.hero-slider-style-2 .swiper-slide{
    min-height: 100vh;
    padding: 170px 0 50px;
    display: grid;
    align-content: center;
}
.hero-slider-style-2 .hero-img-style-2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.hero-slider-style-2 .hero-img-style-2:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(38, 53, 56, 0.5);
}
.hero-img-style-2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-slider-style-2 .hero-content p,
.hero-slider-style-2 .hero-content h1{
    color: var(--color-white);
}
.hero-slider-style-2 .hero-content h1 span:before{
    display: none;
}
.hero-slider-style-2 .swiper-button-next{
    right: 14vw;
}
.hero-slider-style-2 .swiper-button-prev{
    left: 14vw;
}
.hero-slider-style-2 .swiper-button-next, .hero-slider-style-2 .swiper-button-prev{
    width: 70px;
    height: 70px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-white);
}
.hero-slider-style-2 .swiper-button-next:after, .hero-slider-style-2 .swiper-button-prev:after{
    display: none;
}
.hero-slider-style-2 .swiper-button-next img, .hero-slider-style-2 .swiper-button-prev img{
    filter: brightness(16.5);
}


/*======================================
    End Hero section style 2 CSS
========================================*/

/*======================================
    03. our sucess section style 2 CSS
========================================*/
.our-sucess-section-style-2{
    position: relative;
    z-index: 1;
}
.our-sucess-box-style-2{
    background: var(--color-white);
    margin-top: -70px;
    position: relative;
    border: 1px solid var(--color-secondary-100);
}
.our-sucess-box-style-2 .our-sucess-list .col-md-3:before{
    background: rgba(242, 222, 186, 0.5);
}
.our-sucess-box-style-2 .our-sucess-service h2{
    color: var(--color-secondary);
    font-size: var(--h2);
    line-height: 50px;
    font-weight: var(--medium);
}
.our-sucess-box-style-2 .our-sucess-service{
    padding: 35px 0;
}
.our-sucess-box-style-2 .our-sucess-service p{
    color: var(--color-dark);
    margin: 0;
}

/*======================================
    End our sucess section style 2 CSS
========================================*/

/*======================================
    04. about company section style 2 CSS
========================================*/
.about-company-section-style-2{
    padding: 110px 0 115px;
}

/*about image gallery style 2*/

.about-image-gallery-style-2 .about-image{
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    max-width: 444px;
    width: 100%;
}
.about-image-gallery-style-2 .about-image:before{
    content: '';
    padding-top: 85%;
    display: block;
}
.about-image-gallery-style-2 .about-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.about-image-gallery-style-2 .about-image.image-2{
    max-width: 336px;
    margin: -270px 0 0 auto;
    border: 5px solid var(--color-white);
}
.about-image-gallery-style-2 .about-image.image-2:before{
    padding-top: 110%;
}

/*about info style 2*/
.about-info-style-2 .about-feature-list .our-feature p{
    margin-bottom: 0;
}
.about-info-style-2 .about-feature-list{
    padding: 16px 0;
}
.about-info-style-2 .call-booking{
    text-align: right;
    font-weight: var(--semi-bold);
    color: var(--color-dark);
    font-size: var(--font-size-b1);
    margin: 0 0 0 auto;
    display: block;
    font-family: var(--font-primary);
}
.about-info-style-2 .call-booking:hover{
    color: var(--color-secondary);
}

/*about video*/
.about-video-style-2{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(242, 222, 186, 0.5);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 43px;
}
.about-video-style-2 .about-video-dec{
    width: 100%;
    padding: 30px 30px 30px 40px;
}
.about-video-style-2 .about-video-dec p{
    font-weight: var(--semi-bold);
    color: var(--color-dark);
    font-size: var(--h6);
    line-height: var(--h4);
    margin: 0;
}
.about-video-style-2 .about-video-dec{
    width: 50%;
}
.about-video-style-2 .about-video-box{
    width: 50%;
    position: relative;
}
.about-video-style-2 .about-video-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-video-style-2 .about-video-icon{
    bottom: auto;
    right: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.about-video-style-2 .about-video-icon .circle-icon{
    width: 65px;
    height: 65px;
    font-size: 24px;
}

/*======================================
    End about company section style 2 CSS
========================================*/


/*======================================
    05. Get free quote!! style 2 CSS
========================================*/
.get-free-quote-style-2{
    padding: 60px 0;
}
.get-free-quote-style-2 h6{
    color: var(--color-primary);
    font-size: var(--font-size-b4);
    text-transform: uppercase;
    margin-bottom: 15px;
}
.get-free-quote-style-2 h2{
    color: var(--color-heading);
    margin: 0;
}
.get-free-quote-style-2 .get-free-quote-form{
    background: var(--color-secondary-100);
    padding: 5px;
    border-radius: 10px;
    border: 1px solid transparent;
}
.get-free-quote-style-2 .get-free-quote-form .form-control{
    background: transparent;
    border: 0;
    color: var(--color-dark);
    font-size: var(--font-size-b2);
    padding: 13px 28px;
}
.get-free-quote-style-2 .get-free-quote-form:hover{
    border-color: var(--color-primary);
}
.get-free-quote-style-2 .get-free-quote-form .btn{
    position: relative;
    height: auto;
    background: var(--color-tertiary);
    border-radius: 10px;
    color: var(--color-dark);
    font-weight: var(--semi-bold);
    font-size: var(--font-size-b2);
}

/*======================================
    End Get free quote!! style 2 CSS
========================================*/

/*======================================
    06. Logos section style 2 CSS
========================================*/
.logos-section-style-2 .logos-slider{
    padding: 60px 0;
    border-bottom: 1px solid rgba(242, 222, 186, 0.5);
}
.logos-slider .logos-box a img{
    opacity: 0.3;
}
.logos-slider .swiper-slide{
    text-align: center;
}
.logos-slider .swiper-slide:hover .logos-box a img,
.logos-slider .swiper-slide.swiper-slide-active .logos-box a img{
    opacity: 1;
}
/*======================================
    End Logos section style 2 CSS
========================================*/

/*======================================
    07. Why choose Us? section style 2 CSS
========================================*/
.why-choose-us-section-style-2{
    padding: 110px 0;
}
.why-choose-us-section-style-2 .section-heading{
    margin-bottom: 60px;
}
/*why choose us grid*/
.why-choose-us-grid{
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
}
.why-choose-us-grid .why-choose-us-icon{
    width: 120px;
    height: 120px;
    background: var(--color-secondary);
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    margin:0 auto 36px;
}
.why-choose-us-grid h4 {
    margin-bottom: 20px;
    font-size: var(--font-size-b1);
    line-height: var(--line-height-b4);
}
/*======================================
    End Why choose Us? section style 2 CSS
========================================*/

/*======================================
    08. How we help section style 2 CSS
========================================*/
/*how we help tabs list*/
.how-we-help-tabs-list .tabs-list{
    gap: 30px;
    justify-content: start;
    border: 0;
    margin-bottom: 34px;
}
.how-we-help-tabs-list .tabs-list li{
    padding: 8px 15px;
    font-size: var(--font-size-b3);
    border-radius: 5px;
}
.how-we-help-tabs-list .tabs-list li:hover, .how-we-help-tabs-list .tabs-list li.current, .tab-link-title.current{
    background: var(--color-primary);
    color: var(--color-white);
}
.how-we-help-tabs-list .tabs-content.current{
    max-width: 530px;
}
.how-we-help-feature-img{
    background: #D9D9D9;
    border-radius: 10px;
    overflow: hidden;
    position: relative;

}
.how-we-help-feature-img:before{
    content: '';
    padding-top: 70%;
    display: block;
}
.how-we-help-feature-img img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}
.how-we-help-feature-content p{
    margin: 0;
    min-height: 80px;
}
/*======================================
    End How we help section style 2 CSS
========================================*/


/*======================================
    09. our services section style 2 CSS
========================================*/
.our-services-section-style-2{
    padding: 90px 0 120px;
}
.our-services-section-style-2 .what-we-do-service{
    margin-bottom: 33px;
    box-shadow: var(--shadow-secondary-md);
}
.our-services-section-style-2 .what-we-do-service:hover{
   box-shadow: var(--shadow-secondary-sm);   
}
.our-services-section-style-2 .section-heading{
    margin-bottom: 60px;
}
.our-services-section-style-2 .what-we-do-service .circle-icon{
    width: 110px;
    height: 110px;
    background: rgba(242, 222, 186, 0.5);
}
.our-services-section-style-2 .what-we-do-service .circle-icon img{
    max-width: 46px;
    width: 100%;
}
.our-services-section-style-2 .what-we-do-service .circle-icon span{
    background: var(--color-tertiary);
}
.our-services-section-style-2 .what-we-do-service p{
    margin-bottom: 20px;
}
.our-services-section-style-2 .what-we-do-service .btn{
    font-size: var(--font-size-b4);
    padding: 5px 35px;
}
.bottom-view-btn .btn{
    font-size: var(--font-size-b2);
    min-width: 185px;
}

/*======================================
    end our services section style 2 CSS
========================================*/


/*======================================
    10. Testimonial section style 2 CSS
========================================*/

.testimonial-section-style-2{
    position: relative;
    padding: 75px 0;
    overflow: hidden;
}
.testimonial-bg-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.testimonial-bg-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial-bg-image:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-black);
    opacity: 0.4;
    z-index: 1;
}
.testimonial-section-style-2 .container{
    position: relative;
    z-index: 1;
}
.testimonial-section-style-2 .section-heading{
    position: relative;
    text-align: left;
    max-width: 360px;
}
.testimonial-section-style-2 .section-heading .quotes-icon{
    margin-bottom: 42px;
    display: block;
}
.testimonial-section-style-2 .section-heading .sub-title{
    color: var(--color-secondary);
}
.testimonial-section-style-2 .section-heading h2.title{
   color: var(--color-white);   
}

/*Testimonial slider*/
.testimonial-slider-home-2{
    background: rgba(255, 255, 255, 0.19);
    border-radius: 30px;
    padding: 60px 50px 33px;
    text-align: center;
    position: relative;
}
.testimonial-slider-home-2 .testimonial-info {
    padding: 0;
}
.testimonial-slider-home-2 .testimonial-info p{
    color: var(--color-white);
    font-weight: var(--medium);
    margin-bottom: 45px;
}
.testimonial-slider-home-2 .testimonial-user h6 a {
    color: var(--color-tertiary);
}
.testimonial-slider-home-2 .testimonial-user span{
    color: var(--color-white);
}
.testimonial-slider-home-2 .swiper-pagination{
    position: static;
    margin-top: 44px;
}
.testimonial-slider-home-2 .swiper-pagination .swiper-pagination-bullet{
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-white);
}
.testimonial-slider-home-2 .swiper-pagination .swiper-pagination-bullet:hover,
.testimonial-slider-home-2 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: var(--color-primary);
}

/*======================================
    end Testimonial section style 2 CSS
========================================*/

/*======================================
    11. Pricing section style 2 CSS
========================================*/
.pricing-section-style-2{
    padding: 110px 0 85px;
}
.pricing-section-style-2 .section-heading {
    margin-bottom: 70px;
}
.pricing-section-style-2 h2.title {
    max-width: 718px;
    margin: 0 auto;
}

/*Pricing Grid*/
.pricing-box{
    background: var(--color-tertiary);
    border-radius: 30px;
    padding: 60px 45px 45px;
}
.pricing-box .pricing-heading{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 33px;
    border-bottom: 1px solid #E4CB9E;
    margin-bottom: 25px;
}
.pricing-box .pricing-heading .pricing-icon{
    max-width: 170px;
    flex-shrink: 0;
    width: 100%;
}
.pricing-box .pricing-title h5{
    margin-bottom: 10px;
}
.pricing-box .pricing-title p{
    margin-bottom: 0;
    max-width: 280px;
}
.pricing-box .pricing-list ul li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: var(--font-size-b2);
}
.pricing-box .pricing-list ul li p{
    margin: 0;
    font-size: var(--font-size-b2);
}
.pricing-box .pricing-btn{
    margin-top: 35px;
    text-align: center;
}

/*======================================
    end Pricing section style 2 CSS
========================================*/


/*======================================
    12. Latest blog posts section style 2 CSS
========================================*/
.blog-posts-section-style-2{
    margin-bottom: 125px;
    position: relative;
        margin-top: 85px;
}
.blog-posts-section-style-2:before{
    content: '';
    background: linear-gradient(270deg, rgba(242, 222, 186, 0.78) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 0px 500px 500px 0px;
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
}
.blog-posts-section-style-2 .container{
    position: relative;
}
.blog-posts-section-style-2 .section-heading{
    margin-bottom: 60px;
}

/*blog grid css*/
.blog-posts-section-style-2 .row-custome{
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 36px;
    margin: 0;
}
.blog-posts-section-style-2 .row-custome .col-md-6{
    -ms-grid-column:span 2;
    grid-column:span 2;
    -ms-grid-row:span 2;
    grid-row:span 2;
    width: 100%;
    padding: 0;
}
.blog-posts-section-style-2 .row-custome .col-md-4{
    -ms-grid-column:span 2;
    grid-column:span 2;
    width: 100%;
    padding: 0;
}
.blog-grid-style-2 .blog-img{
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    background: #D9D9D9;
    border-radius: 20px;
}
.blog-grid-style-2 .blog-img:before {
    content: '';
    padding-top: 58%;
    display: block;
}
.blog-grid-style-2 .blog-img a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.blog-grid-style-2 .blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}
.blog-grid-style-2:hover .blog-img img {
    transform: scale(1.2);
}
.blog-grid-style-2 .blog-date{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}
.blog-grid-style-2 .blog-date p{
    margin: 0;
    font-weight: var(--bold);
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
}
.blog-grid-style-2 .blog-date .btn{
    padding: 8px 35px;
    font-size: 12px;
    line-height: 16px;
}
.col-md-6 .blog-grid-style-2 .blog-info h5{
    font-size: var(--h3);
    line-height: var(--h3-lineHeight);
    margin-bottom: 14px;
}
.blog-grid-style-2 .blog-info h5{
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 14px;
}
.blog-posts-section-style-2 .row-custome .col-md-4 .blog-grid-style-2{
    background: var(--color-white);
    border: 1px solid var(--color-tertiary);
    border-radius: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.blog-posts-section-style-2 .row-custome .col-md-4 .blog-grid-style-2 .blog-img{
    width: 45%;
    order: 2;
    margin-bottom: 0;
}
.blog-posts-section-style-2 .row-custome .col-md-4 .blog-grid-style-2 .blog-info{
    width: 55%;
    padding: 28px;
}
.blog-posts-section-style-2 .row-custome .col-md-4 .blog-grid-style-2 .blog-info p{
    margin-bottom: 0;
}
.blog-posts-section-style-2 .row-custome .col-md-4 .blog-grid-style-2 .blog-info h5{
    margin-bottom: 10px;
}
.blog-posts-section-style-2 .row-custome .col-md-4 .blog-grid-style-2 .blog-date{
    display: block;
    margin-bottom: 10px;
}
.blog-posts-section-style-2 .row-custome .col-md-4 .blog-grid-style-2 .blog-date .btn{
    margin-bottom: 14px;
    padding: 8px 15px;
}

/*======================================
    end Latest blog posts section style 2 CSS
========================================*/


/*======================================
    13. Footer style 2 CSS
========================================*/
.footer-style-2{
    background: var(--color-dark);
    padding: 42px 0 22px 0;
}

/*footer menu style 2 css*/
.footer-right-menu ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: end;
    column-gap: 40px;
}
.footer-right-menu ul li a{
    color: var(--color-white);
    font-weight: var(--regular);
}
.footer-right-menu ul li a:hover{
    color: var(--color-secondary);
}

/*footer bottom style 2*/
.footer-bottom-wrap{
    margin-top: 32px;
    padding-top: 35px;
    border-top: 1px solid #35474A;
}
.footer-bottom-content{
    max-width: 810px;
    margin: 0 auto;
}
.footer-bottom-content .footer-about-text{
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.footer-about-text p{
    color: var(--color-white);
    margin-bottom: 55px;
    font-size: var(--font-size-b2);
}
.footer-address-style-2 p{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 22px;
    color: var(--color-white);
    line-height: 21px;
}
.footer-address-style-2 p .icon{
    width: 40px;
    height: 40px;
    border-radius: 5px;
/*    background: var(--color-tertiary);*/
    background: #c19545;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    flex-shrink: 0;
}
.footer-address-style-2 p a{
    color: var(--color-white);
}
.footer-address-style-2 p a:hover{
    color: var(--color-secondary);
}
/*footer copyright style 2*/
.footer-copyright-style-2{
    text-align: center;
}
.footer-copyright-style-2 p{
    color: var(--color-white);
    margin-bottom: 5px;
}
.footer-copyright-style-2 p a{
    color: var(--color-secondary);
}
.footer-copyright-style-2 p a:hover{
    color: var(--color-white);
}

/*======================================
    end Footer style 2 CSS
========================================*/


/*======================================================
    06. Home Three style
========================================================*/

.bottom-55{
    margin-bottom: 55px;
}

/*======================================
    01. Header style 3 CSS
========================================*/
.header-style-3.sticky{
    background: var(--color-primary);
    top: 0px;
}
/*Header right style*/
.header-style-3 .header-right{
    gap: 28px;
}
.header-style-3 .header-right a,
.header-style-3 .main-menu li a{
    color: var(--color-white);
}
.header-style-3 .header-right a:hover,
.header-style-3 .main-menu li a:hover{
    color: var(--color-secondary);
}
.menu-close{
    display: none;
}


/*======================================
    end Header style 3 CSS
========================================*/


/*======================================
    02. Hero banner section style 3 CSS
========================================*/
.hero-section-style-3{
    background: url('../images/hero-banner-line.svg') no-repeat left bottom -40px  var(--color-primary);
    padding: 150px 0 0;
    position: relative;
}


/*hero banner content style 3 css*/
.hero-section-style-3 .hero-content{
    text-align: left;
    padding-bottom: 155px;
}
.hero-section-style-3 .hero-content h1{
    color: var(--color-white);
}
.hero-section-style-3 .hero-content p{
    color: var(--color-white);
    margin: 0 0 40px;
}
.hero-section-style-3 .hero-content h1 span:before{
    display: none;
}
.hero-section-style-3 .btn-style-3:before{
    background-color: var(--color-white);
    color: var(--color-primary);
}
.hero-section-style-3 .btn-style-3:hover{
    color: var(--color-primary);
}
/*hero image style 3 css*/
.hero-images-style-3{
    width:130%;
    padding-top: 52px;
    position: relative;
}
.hero-images-box{
    overflow: hidden;
    background: #D9D9D9;
    border-radius: 50px 0px 0px 50px;
    margin-bottom: -226px;
    position: relative;
    z-index: 1;
}
.hero-images-box img{
    width: 100%;
}
.hero-section-style-3 .hero-images-style-3:before{
    content: '';
    border-radius: 30px 0px 0px 0px;
    position: absolute;
    top: 0px;
    right: 0;
    width: 50%;
    height: calc(100% - 150px);
    background: var(--color-tertiary);
}
.hero-section-style-3 .hero-images-style-3:after{
    content: '';
    border-radius: 0;
    position: absolute;
    top: 0px;
    right: -500%;
    width: 500%;
    height: calc(100% - 150px);
    background: var(--color-tertiary);
}

/*======================================
    end Hero banner section style 3 CSS
========================================*/

/*======================================
    03. Logos section style 3 CSS
========================================*/
.logos-section-style-3{
    padding: 70px 0;
}

/*logos gallery style 3*/
.logos-section-style-3 .logos-gallery{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 40px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.logos-section-style-3 .logos-gallery .logos-box img{
    filter: grayscale(100%);
}

/*======================================
    end Logos section style 3 CSS
========================================*/

/*======================================
    04. our services section style 3 CSS
========================================*/
.our-services-section-style-3{
    padding-top: 145px;
}
.our-services-section-style-3 .section-heading{
    text-align: left;
    margin-bottom: 0;
}
.our-services-section-style-3 .section-heading h2.title {
    max-width: 100%;
    margin: 0 auto;
}
.right-view-btn{
    text-align: right;
}
.right-view-btn .btn{
    margin: 0 0 0 auto;
    font-size: var(--font-size-b2);
}

/*our services grid style 3 css*/
.what-we-do-service.service-style-3{
    box-shadow: var(--shadow-secondary-md);
    margin-bottom: 24px;
    padding: 35px 30px;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px;
}
.what-we-do-service.service-style-3 .icon{
    flex-shrink: 0;
    max-width: 48px;
}
.what-we-do-service.service-style-3 .our-services-info p{
    margin-bottom: 25px;
}
.what-we-do-service.service-style-3 .our-services-info .btn{
    padding: 7px 20px;
    font-size: var(--font-size-b4);
    line-height: 21px;
    color: var(--color-primary);
}
.what-we-do-service.service-style-3 .our-services-info .btn:hover{
    color: var(--color-white);
}

/*======================================
    end our services section style 3 CSS
========================================*/

/*=============================================
    05. about company section style 3 CSS
===============================================*/
.about-company-section-style-3{
    padding: 105px 0 140px;
}


/*about info style 3 css*/
.about-info-style-3{
    padding-right: 50px;
}
.about-info-style-3 .about-feature-list{
    display: block;
    padding: 0;
    border: 0;
}
.about-info-style-3 .about-feature-list .our-feature{
    border-top: 1px solid rgba(242, 222, 186, 0.5);
    padding: 30px 0;
    gap: 50px;
}
.about-info-style-3 .about-feature-list .our-feature:first-child{
    border-top: 0;
}
.about-info-style-3 .our-feature .about-feature-icon{
    width: 68px;
    height: auto;
}
.about-info-style-3 .our-feature .about-feature-icon img{
    width: 100%;
}
.about-info-style-3 .about-feature-list .our-feature p{
    margin-bottom: 0;
}
.about-info-style-3 .bottom-contact-btn{
    margin-top: 30px;
}

/*about image gallery style 3 css*/
.about-image-gallery-style-3{
    padding-right: 75px;
    position: relative;
}
.about-image-gallery-style-3 .about-image-info{
    position: absolute;
    top: 105px;
    right: -70px;
    background: var(--color-tertiary);
    padding: 18px 15px 18px 56px;
    max-width: 248px;
}
.about-image-gallery-style-3 .about-image-info p{
    color: var(--color-dark);
    margin: 0;
    position: relative;
    z-index: 1;
    font-weight: var(--semi-bold);
    line-height: var(--line-height-b4);
}
.about-image-gallery-style-3 .about-image-info p:before{
    content: '';
    background: rgba(214, 191, 149, 0.4);
    width: 60px;
    height: 60px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: -40px;
    transform: translateY(-50%);
    z-index: -1;
}
.about-image-gallery-style-3 .about-image-style-3{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.about-image-gallery-style-3 .about-image-style-3:before{
    content: '';
    padding-top: 110%;
    display: block;
}
.about-image-gallery-style-3 .about-image-style-3 img{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
}

.about-image-gallery-style-3 .about-image-small{
    width: 100%;
    max-width: 315px;
    margin: -170px -75px 0 auto;
    overflow: hidden;
    position: relative;
}
.about-image-gallery-style-3 .about-image-small:before{
    content: '';
    padding-top: 79%;
    display: block;
}
.about-image-gallery-style-3 .about-image-small img{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
}

/*=============================================
    end about company section style 3 CSS
===============================================*/


/*=============================================
    06. Why choose Us? section style 3 CSS
===============================================*/
.why-choose-us-section-style-3{
    background: var(--color-primary);
    padding: 55px 0;
}

.why-choose-us-section-style-3 .section-heading .sub-title{
    color: var(--color-secondary);
}
.why-choose-us-section-style-3 .section-heading .title{
    color: var(--color-white);
    max-width: 100%;
}

/*why choose us slider grid style 3 CSS*/
.why-choose-us-grid-slider .swiper-slide{
    height: auto;
}
.why-choose-us-grid-slider .why-choose-us-grid-style-3{
    border-radius: var(--radius);
    background: var(--color-white);
    padding: 20px;
    text-align: center;
    max-width: 100%;
    height: 100%;
}
.why-choose-us-grid-style-3 .why-choose-image{
    position: relative;
    overflow: hidden;
}
.why-choose-us-grid-style-3 .why-choose-image:before{
    content: '';
    padding-top: 65%;
    display: block;
}
.why-choose-us-grid-style-3 .why-choose-image a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.why-choose-us-grid-style-3 .why-choose-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}
.why-choose-us-grid-style-3:hover .why-choose-image img{
    transform: scale(1.2);
}
.why-choose-us-grid-style-3 .circle-icon{
margin: 0 auto 25px;
    width: 88px;
    height: 88px;
    position: relative;
    padding: 3px;
    background: rgba(255, 203, 121, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.why-choose-us-grid-style-3 .circle-icon img {
    max-width: 52px;
}
.why-choose-us-grid-style-3 .why-choose-info{
    padding: 0 20px 28px;
}
.why-choose-us-grid-style-3 .why-choose-info h4{
    font-size:var(--font-size-b1);
    line-height: 22px;
    color: var(--color-dark);
    margin-bottom: 16px;
}
.why-choose-us-grid-style-3 .why-choose-info p{
    margin: 0;
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b2);
}

.why-choose-us-grid-slider .swiper-pagination{
    position: static;
    margin-top: 54px;
}
.why-choose-us-grid-slider .swiper-pagination .swiper-pagination-bullet{
    transition: all 0.3s ease;
}
.why-choose-us-grid-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--color-tertiary);
    width: 44px;
    border-radius: var(--radius-lg);
}

/*=============================================
    end Why choose Us? section style 3 CSS
===============================================*/


/*=============================================
    07. Our Recent Projects section style 3 CSS
===============================================*/
.our-recent-projects-section{
    padding: 100px 0;
}

.our-recent-projects-section .section-heading .title{
    max-width: 800px;
}

/*Our Recent Projects tabs*/

.button-tabs-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}
.button-tabs-list li{
    border-radius: 4px;
    padding: 11px 35px;
    background: var(--color-tertiary);
    color: var(--color-dark);
    min-width: 166px;
    text-align: center;
    display: block;
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b2);
    cursor: pointer;
    font-weight: var(--semi-bold);
}
.button-tabs-list li:hover,
.button-tabs-list li.current{
    background: var(--color-primary);
    color: var(--color-white);
}

/*Our Recent Projects gallery*/
.projects-gallery-box{
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
}
.projects-gallery-img{
    position: relative;
    overflow: hidden;
}
.projects-gallery-img:before{
    content: '';
    padding-top: 100%;
    display: block;
}
.projects-gallery-img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.projects-gallery-hover{
    transition: all 0.3s ease;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 94, 111, 0.5);  
}
.projects-gallery-box:hover .projects-gallery-hover{
    top: 0;
}
.projects-gallery-hover .icon{
    width: 46px;
    height: 46px;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    margin: 0 auto 12px;
    background: var(--color-tertiary);
}
.projects-gallery-hover .icon img{
    max-width: 18px;
}
.projects-gallery-hover a{
    color: var(--color-white);
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b2);
    font-weight: var(--semi-bold);
    display: grid;
    align-content: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    text-align: center;
    padding: 20px;
    width: 100%;
    height: 100%;
}
.recent-projects-gallery .read-more-btn{
    text-align: center;
    margin-top: 30px;
}
.recent-projects-gallery .read-more-btn .btn{
    min-width: 185px;
}
.read-more-bottom{
    text-align: center;
    margin-top: 30px;
}
.read-more-bottom .btn{
    min-width: 185px;
}
.read-more-bottom .btn:hover img{
    filter: brightness(16.5);
}

/*=============================================
    end Our Recent Projects section style 3 CSS
===============================================*/

/*=============================================
    08. Testimonial section style 3 CSS
===============================================*/
.testimonial-section-style-3{
    background: var(--color-tertiary);
    padding: 65px 0;
}


/*testimonial video image*/
.testimonial-video-image{
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
}
.testimonial-video-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.testimonial-video-image .about-video-icon{
    bottom: auto;
    right: auto;
    position: relative;
}

/*testimonial slider style 3 css*/
.testimonial-slider-home-3{
    height: 610px;
    position: relative;
}
.testimonial-slider-home-3 .swiper{
    height: 100%;
}
.testimonial-grid .testimonial-item-box,
.testimonial-slider-home-3 .testimonial-item-box{
    background: rgba(255, 255, 255, 0.34);
    border: 1px solid var(--color-white);
    border-radius: var(--radius-sm);
    padding: 25px 55px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    min-height: 190px;
}
.testimonial-slider-home-3 .testimonial-item-box .testimonial-user{
        overflow: auto;
    max-height: 145px;
}
.testimonial-slider-home-3 .testimonial-item-box .testimonial-user::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #Fff;
    border-radius: 10px;
}

.testimonial-slider-home-3 .testimonial-item-box .testimonial-user::-webkit-scrollbar
{
    width: 6px;
    background-color: #Fff;
}

.testimonial-slider-home-3 .testimonial-item-box .testimonial-user::-webkit-scrollbar-thumb
{
    background-color: var(--color-primary);
}

.testimonial-grid .testimonial-item-box .avatar-img,
.testimonial-slider-home-3 .testimonial-item-box .avatar-img{
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 100%;
}
.testimonial-grid .testimonial-item-box .avatar-img img,
.testimonial-slider-home-3 .testimonial-item-box .avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial-grid .testimonial-item-box .testimonial-user h6,
.testimonial-slider-home-3 .testimonial-item-box .testimonial-user h6{
    font-size: var(--font-size-b2);
}
.testimonial-grid .testimonial-item-box .testimonial-user h6 a,
.testimonial-slider-home-3 .testimonial-item-box .testimonial-user h6 a{
    color: var(--color-dark);
}
.testimonial-grid .testimonial-item-box .testimonial-user h6 a:hover,
.testimonial-slider-home-3 .testimonial-item-box .testimonial-user h6 a:hover{
    color: var(--color-primary);
}
.testimonial-grid .testimonial-item-box .testimonial-user p,
.testimonial-slider-home-3 .testimonial-item-box .testimonial-user p{
    margin: 0;
    line-height: 21px;
}
.testimonial-grid .testimonial-item-box .testimonial-user span,
.testimonial-slider-home-3 .testimonial-item-box .testimonial-user span{
    font-size: var(--font-size-b4);
    line-height: 18px;
    margin-bottom: 12px;
    display: block;
}

.testimonial-slider-home-3 .swiper-pagination{
    right: -33px;
}
.testimonial-slider-home-3 .swiper-pagination .swiper-pagination-bullet{
    background: var(--color-primary);
    transition: all 0.3s ease;
}
.testimonial-slider-home-3 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: var(--color-primary);
    height: 44px;
    border-radius: var(--radius-md);
}

/*=============================================
    end Testimonial section style 3 CSS
===============================================*/


/*=============================================
    09. How We Work section style 3 CSS
===============================================*/
.how-we-work-section-style-3{
    padding: 115px 0;
}

/*How We Work grid style 3 CSS */
.how-we-work-grid{
    width: 294px;
    height: 294px;
    border-radius: 100%;
    background: var(--color-primary);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.how-we-work-front .how-we-work-number{
    background: var(--color-tertiary);
    width: 58px;
    height: 58px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid var(--color-white);
    color: var(--color-primary);
    font-size: var(--h6);
    font-weight: var(--semi-bold);
    border-radius: 100%;
    z-index: 1;
}
.how-we-work-front{
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    padding: 30px 15px 15px;
}
.how-we-work-front .how-we-work-icon{
    height: 75px;
    width: 75px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    margin: 0 auto 14px;
    transition: all 0.3s ease;
}
.how-we-work-front h6{
    color: var(--color-white);
    font-weight: var(--semi-bold);
}
.how-we-work-front p{
    margin: 17px 0 0 0;
    transform: translateY(100%);
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition: all 0.3s ease;
    color: var(--color-dark);
        display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.how-we-work-front:hover{
    background: var(--color-tertiary);
}
.how-we-work-front:hover .how-we-work-icon{
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    margin-top: -75px;
}
.how-we-work-front:hover h6{
 color: var(--color-dark); 
}
.how-we-work-front:hover .how-we-work-number{
 background: var(--color-primary);
 color: var(--color-white);
}
.how-we-work-front:hover p{
    height: auto;
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

/*=============================================
    end How We Work section style 3 CSS
===============================================*/

/*=============================================
    10. Blog & Articles section style 3 CSS
===============================================*/
.blog-articles-section-style-3{
    padding-bottom: 95px;
}
.blog-articles-section-style-3 .section-heading{
    text-align: left;
    margin-bottom: 0;
}
.blog-articles-section-style-3 .section-heading h2.title {
    max-width: 100%;
    margin: 0;
}
.read-more-right{
    text-align: right;
}

/*blog grid style 3 CSS*/
.blog-grid-style-3{
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
    background: var(--color-white);
    border-radius: var(--radius-sm);
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    margin-bottom: 20px;
}
.blog-grid-style-3 .blog-img{
    background: #D9D9D9;
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    width: 47%;
}
.blog-grid-style-3 .blog-img:before{
    content: '';
    padding-top: 80%;
    display: block;
}
.blog-grid-style-3 .blog-img a{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}
.blog-grid-style-3 .blog-img a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}
.blog-grid-style-3:hover .blog-img a img {
    transform: scale(1.2);
}
.blog-grid-style-3 .blog-img .blog-date{
    background: rgba(242, 222, 186, 0.7);
    border-radius: var(--radius-lg);
    padding: 2px 10px;
    color: var(--color-dark);
    font-size: 10px;
    line-height: 20px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1;
}
.blog-grid-style-3 .blog-info{
    width: 53%;
    padding: 12px 20px;
}
.blog-grid-style-3 .blog-info .blog-admin-info{
    font-size: 12px;
    line-height: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
}
.blog-grid-style-3 .blog-info .blog-admin-info i{
    color: var(--color-primary);
    font-size: 15px;
    margin-right: 10px;
}
.blog-grid-style-3 .blog-info .blog-admin-info span{
    color: var(--color-primary);
    margin:0 2px;
}
.blog-grid-style-3 .blog-info h6{
    margin-bottom: 10px;
}
.blog-grid-style-3 .blog-info p{
    margin-bottom: 17px;
    font-size: var(--font-size-b4);
    line-height: 20px;
}
.blog-grid-style-3 .blog-info .btn{
    font-size: var(--font-size-b4);
    padding: 3px 18px;
}

/*=============================================
    end Blog & Articles section style 3 CSS
===============================================*/

/*=============================================
    11. Footer style 3 CSS
===============================================*/
.footer-three{
    background: var(--color-dark);
}

/*footer top style 3*/

.footer-three .footer-top{
    padding: 45px 0 25px;
}
.footer-three .footer-top .footer-logo{
    margin-bottom: 25px;
}
.footer-three a{
    color: var(--color-white);
}
.footer-three a:hover{
    color: var(--color-secondary);
}
.footer-three p{
    margin-bottom: 20px;
    color: var(--color-white);
}
.footer-three .footer-widget-about{
    max-width: 240px;
}
.footer-three .footer-widget-about p a{
    color: var(--color-secondary);
}
.footer-three .footer-widget-about p a:hover{
    color: var(--color-white);
}
.footer-three h6 {
    margin-bottom: 28px;
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b2);
    color: var(--color-white);
}
.footer-three h6:after {
    content: '';
    background-color: var(--color-tertiary);
    border-radius: var(--radius-sm);
    height: 3px;
    width: 30px;
    display: block;
    margin-top: 7px;
}
.footer-three .footer-address{
    max-width: 200px;
}
.footer-three .footer-address p {
    margin-bottom: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.footer-three .footer-address p .icon {
    flex-shrink: 0;
    margin-right: 12px;
}
.newsletter-form p{
    max-width: 250px;
}
.newsletter-form .get-free-quote-form{
    display: block;
    position: relative;
    margin-bottom: 22px;
}
.newsletter-form .get-free-quote-form .form-control{
    background: #3F4243;
    border-radius: 4px;
    padding: 10px 60px 10px 26px;
    color: var(--color-white);
    font-size: var(--font-size-b3);
    line-height: var(--line-height-b4);
}
.newsletter-form .get-free-quote-form .form-control:hover{
    border-color: var(--color-tertiary);
}
.newsletter-form .get-free-quote-form .btn {
    border-radius: 0 4px 4px 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
/*    height: 100%;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    padding: 0;
    background: var(--color-tertiary);
        padding: 11px;
}
.newsletter-form .get-free-quote-form .btn img{
    margin: 0;
}
.newsletter-form .get-free-quote-form .form-control::-webkit-input-placeholder { 
  color: var(--color-white);
}
.newsletter-form .get-free-quote-form .form-control::-moz-placeholder { 
  color: var(--color-white);
}
.newsletter-form .get-free-quote-form .form-control:-ms-input-placeholder { 
  color: var(--color-white);
}
.newsletter-form .get-free-quote-form .form-control:-moz-placeholder { 
  color: var(--color-white);
}
.footer-three .header-social li a{
    font-size: var(--font-size-b2);
    color: var(--color-white);
}

/*footer bottom style 3*/
.footer-bottom-part{
    background: #1E1D1D;
    padding: 14px 0;
}
.footer-bottom-part .footer-menu{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px;
}
.footer-bottom-part p{
    margin: 0;
    text-align: right;
}
.footer-bottom-part p a{
    color: var(--color-secondary);
}
.footer-bottom-part p a:hover{
    color: var(--color-white);
}

/*=============================================
    end Footer style 3 CSS
===============================================*/


/*=============================================
    07. About us page style
===============================================*/

/*======= Inner hero section style CSS =======*/
.inner-hero-section{
    position: relative;
    min-height: 550px;
    display: grid;
    align-content: center;
    padding: 100px 0 100px;
}
.inner-hero-section .container{
    position: relative;
    z-index: 1;
}
.inner-banner-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
}
.inner-banner-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inner-banner-img:before{
    content: '';
    background: url('../images/hero-banner-line.svg') no-repeat left -10px bottom -180px var(--color-primary);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 1;
    background-size: 650px;
}
.inner-hero-content{
    position: relative;
    text-align: center;
}
.inner-hero-section h1{
    color: var(--color-white);
    margin-bottom: 20px;
}
.breadcrumb{
    margin: 0;
    color: var(--color-white
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;);
    justify-content: center;
}
.breadcrumb li,
.breadcrumb li a{
    color: var(--color-white);
    font-size: var(--font-size-b2);
    font-weight: var(--regular);
}
.breadcrumb-item+.breadcrumb-item::before{
    color: var(--color-white);
}
.breadcrumb li a:hover,
.breadcrumb li.active{
    color: var(--color-secondary);
}

/*======= Our Specialties section style CSS =======*/

.our-specialties-section{
    padding: 65px 0;
}
.heading-style-2 h2.title {
    max-width: 720px;
}
/*Our Specialties grid*/
.our-specialties-box{
    background: var(--color-white);
    border-radius: 5px;
    padding: 70px 15px 60px;
    text-align: center;
}
.our-specialties-box .icon{
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    margin: 0 auto 12px;
}
.our-specialties-box h3{
    margin: 0 0 5px;
}
.our-specialties-box p{
    margin: 0;
    font-size: var(--h6);
    font-weight: var(--bold);
}

/*======= Our Team Members section style CSS =======*/
.team-members-section{
    padding: 100px 0;
}

/*team members box style*/
.our-team-members-slider{
    position: relative;
}
.our-team-members-slider .swiper-button-next{
    right: -21px;
}
.our-team-members-slider .swiper-button-prev{
    left: -21px;
}
.our-team-members-slider .swiper-button-next,
.our-team-members-slider .swiper-button-prev{
    background: rgba(242, 222, 186, 0.77);
    width: 42px;
    height: 42px;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    top: 30%;
}
.our-team-members-slider .swiper-button-next:hover,
.our-team-members-slider .swiper-button-prev:hover{
    background: var(--color-tertiary);
}
.our-team-members-slider .swiper-button-next:after, 
.our-team-members-slider .swiper-button-prev:after{
    font-size: 20px;
    color: var(--color-black);
}
.our-team-members-slider .team-members-box{
    margin-bottom: 0px;
}
.team-members-box{
    margin-bottom: 50px;
}
.team-members-box .team-members-img{
    position: relative;
    overflow: hidden;
    background: #D9D9D9;
    border-radius: 10px;
    margin-bottom: 20px;
}
.team-members-box .team-members-img:before{
    content: '';
    display: block;
    padding-top: 80%;
}
.team-members-box .team-members-img a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.team-members-box .team-members-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}
.team-members-box .team-members-img:hover img{
    transform: scale(1.1);
}
.team-members-box .team-members-info .founder{
    font-size: var(--font-size-b5);
    line-height: var(--line-height-b5);
    margin-bottom: 6px;
    display: block;
}
.team-members-box .team-members-info h6{
    margin-bottom: 6px;
}
.team-members-box .team-members-info p{
    margin-bottom: 17px;
    font-size: var(--font-size-b4);
    line-height: var(--line-height-b5);
}
.team-members-box .social-link{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    column-gap: 20px;
}

/*======= Quick Online Consultancy section style CSS =======*/

.quick-consultancy-section{
    padding: 20px 0;
}
.quick-consultancy-left{
    position: relative;
}
.quick-consultancy-img{
    overflow: hidden;
    background: #D9D9D9;
    border-radius: 400px;
    position: relative;
}
.quick-consultancy-img:before{
    content: '';
    padding-top: 58%;
    display: block;
}
.quick-consultancy-img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.quick-consultancy-service{
    position: absolute;
    bottom: -55px;
    right: 91px;
    border-radius: 100px;
    background: var(--color-primary);
    width: 130px;
    height: 130px;
    color: var(--color-white);
    font-weight: var(--semi-bold);
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b3);
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.quick-consultancy-form{
    border: 1px solid var(--color-tertiary);
    padding: 40px;
    background: var(--color-white);
}
.quick-consultancy-form h3{
    margin-bottom: 24px;
}
.quick-consultancy-form .btn{
    border-radius: 3px;
    min-width: 180px;
}

/*=============================================
    End About us page style
===============================================*/

/*=============================================
    08. our services page style
===============================================*/

/*======= our services section page style CSS =======*/
.inner-wrapper{
    padding: 100px 0;
}
.preloader-bottom-btn{
    text-align: center;
    margin-top: 15px;
}
/*=============================================
    End our services page style
===============================================*/

/*=============================================
    09. Portfolio Grid page style
===============================================*/

/*======= Portfolio Grid section style CSS =======*/
.projects-style-2 .section-heading{
    margin-bottom: 0;
}
.section-heading-des p{
    font-size: var(--font-size-b2);
    margin-bottom: 0;
}
.projects-style-2 .projects-gallery-box{
    border-radius: 10px;
}
/*=============================================
    End Portfolio Grid page style
===============================================*/


/*=============================================
    10. Portfolio Masonary page style
===============================================*/

/*======= Portfolio Masonary section style CSS =======*/
.masonary-gallery .projects-gallery-img:before{
    display: none;
}
.masonary-gallery .projects-gallery-img img{
    position: static;
}
/*=============================================
    End Portfolio Grid page style
===============================================*/

/*=============================================
    11. Our Team Members page style
===============================================*/

/*======= Our Team Members section style CSS =======*/
.our-twam-page .inner-heading .title{
    max-width: 500px;
}
/*=============================================
    End Our Team Members page style
===============================================*/

/*=============================================
    12. Blog grid page style
===============================================*/

/*======= Blog grid page section style CSS =======*/
.blog-grid-page .blog-grid{
    padding-bottom: 40px;
}
.blog-grid-page .blog-grid .blog-img{
    border-radius: 15px;
}
/*=============================================
    End Blog grid page style
===============================================*/

/*=============================================
    13. Service detail page style
===============================================*/

/*======= Inner Image with text section style CSS =======*/
.inner-image-with-text-section{
    padding: 140px 0 100px;
}
.inner-image-box{
    border-radius: 15px;
    overflow: hidden;
}
.inner-image-box img {
    width: 100%;
}
.inner-image-with-text-section .image-with-text-content .title{
    margin-bottom: 20px;
}
.ul-list{
    padding: 0;
    margin: 0;
}
.ul-list li{
    margin-bottom: 10px;
    position: relative;
    padding-left: 30px;
}
.ul-list li strong{
    color: var(--color-primary);
}
.ul-list li:before{
    content: "";
    background: url('../images/check-icon-primary.svg') no-repeat 0 0;
    background-size: 100%;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 4px;
    left: 0;
}

.icon-box-list{
    margin-top: 75px;
}
.icon-box-list .icon-box{
    border-radius: 5px;
    background: var(--color-white);
    border: 1px solid var(--color-tertiary);
    padding: 20px;
    height: 100%;
    position: relative;
}
.icon-box-list .icon-box .box-count{
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: var(--font-size-b1);
    font-weight: var(--semi-bold);
    color: var(--color-tertiary);
}
.icon-box-list .icon-box .icon{
    max-width: 30px;
    height: 33px;
    margin-bottom: 12px;
}
.icon-box-list .icon-box h6{
    font-size: var(--font-size-b2);
    font-weight: var(--semi-bold);
    color: var(--color-dark);
    margin: 0;
}

/*======= Image with text overlay section style CSS =======*/
.image-with-text-overlay-section{
    position: relative;
    overflow: hidden;
    padding: 125px 0 0;
}
.image-with-text-overlay-section .container{
    position: relative;
    z-index: 1;
}
.image-overlay-full{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.image-overlay-full:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.17);
    z-index: 1;
}

.image-overlay-full img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-text-overlay{
    max-width: 600px;
    margin-bottom: 32px;
}
.image-text-overlay .title{
    color: var(--color-white);
    margin-bottom: 30px;
}
.call-action-quote{
    max-width: 610px;
    margin: 0 0 0 auto;
    background: var(--color-tertiary);
    padding: 20px 45px 12px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 30px;
    border-radius: 50px 0px 0px 0px;
}
.call-action-quote:after{
    content: '';
    background: var(--color-tertiary);
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 500%;
    margin-right: -500%;
}
.call-action-quote .phone-icon{
    font-size: var(--h3);
    color: var(--color-primary);
}
.call-action-quote p{
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b2);
    color: var(--color-dark);
    margin-bottom: 0;
    font-weight: var(--semi-bold);
}

/*======= inner why choose section style CSS =======*/
.inner-why-choose-section{
    padding: 90px 0;
}
.inner-why-choose-section .why-choose-content .title{
    margin-bottom: 20px;
}
.why-choose-img-group{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 13px;
    margin-bottom: 25px;
}
.why-choose-img-group .img-group-box{
    width: 50%;
    position: relative;
    overflow: hidden;
}
.why-choose-img-group .img-group-box:before{
    content: '';
    padding-top: 50%;
    display: block;
}
.why-choose-img-group .img-group-box img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}
.list-style-2 li:before{
    background: url('../images/check-icon-tertiary.svg') no-repeat 0 0;
    background-size: 100%;
}
.inner-why-choose-section .ul-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
}
.inner-why-choose-section .ul-list li{
    width: calc(50% - 15px);
    font-size: var(--font-size-b2);
    color: var(--color-dark);
    font-weight: var(--medium);
}

/*Accordion style*/
.accordion .accordion-list{
    margin-bottom: 22px;
    background: var(--color-white);
    border: 1px solid var(--color-tertiary);
    border-radius: 4px;
    width: 100%;
    display: block;
}
.accordion-list .accordion-tabs{
    border-radius: 4px;
    background: rgba(255, 239, 214, 0.44);
    padding: 12px 22px;
    position: relative;
    cursor: pointer;
}
.accordion-list .accordion-tabs:after{
    content: '+';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 14px;
    font-size: var(--font-size-b1);
    color: var(--color-primary);
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: var(--color-white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
}
.accordion-list .accordion-tabs.active{
    border-radius: 4px 4px 0 0;
}
.accordion-list .accordion-tabs.active:after{
    content: '-';
}
.accordion-list .accordion-tabs h3{
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b2);
    color: var(--color-dark);
    margin: 0;
    padding-right: 40px;
}
.accordion-content{
    padding: 16px 20px;
    display: none;
}
.accordion-content.active{
    display: block;
}
.accordion-content p{
    margin: 0 0 15px;
}
.accordion-content p:last-child{
    margin: 0;
}

/*======= Related section style CSS =======*/
.related-services-wrap{
    background: var(--color-tertiary);
    border-radius: 40px 40px 0px 0px;
    padding: 40px 32px 10px;
}


/*=============================================
    End Service detail page style
===============================================*/

/*=============================================
    14. Portfolio Detail page style
===============================================*/

/*======= inner cms section style CSS =======*/

.image-with-text-content .title{
    margin-bottom: 20px;
}
/*portfolio gallery*/

.portfolio-gallery{
    background: rgba(242, 222, 186, 0.5);
    border-radius: 30px;
    padding: 20px;
    margin: 80px 0;
}
.portfolio-gallery .inner-image-box{
    position: relative;
    overflow: hidden;
}
.portfolio-gallery .inner-image-box:before{
    content: '';
    padding-top: 65%;
    display: block;
}
.portfolio-gallery .inner-image-box img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.full-des-part{
    text-align: center;
}

/*=============================================
    End Portfolio Detail page style
===============================================*/


/*=============================================
    15. FAQ page style
===============================================*/

/*======= FAQ list style CSS =======*/
.faq-list{
    max-width: 1110px;
    margin: 0 auto;
}
/*=============================================
    End FAQ page style
===============================================*/

/*=============================================
    16. Testimonial page style
===============================================*/

/*======= Testimonial grid style CSS =======*/
.testimonial-grid .testimonial-item-box{
    background: rgba(242, 222, 186, 0.46);
    height: 100%;
}
.testimonial-grid .col-md-6{
    margin-bottom: 32px;
}

/*=============================================
    End Testimonial page style
===============================================*/

/*=============================================
    17. Team Member detail page style
===============================================*/
.contact-address{
    max-width: 300px;
}
.contact-address p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 22px;
    color: var(--color-dark);
    line-height: 21px;
}
.contact-address p .icon {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    background: var(--color-tertiary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    flex-shrink: 0;
}
.experience-skill-content .title{
    margin-bottom: 20px;
}

/*skill-progress*/
.skill-progress .progress-list{
    margin-bottom: 25px;
}
.progress-list .progress-title{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 10px;
}
.progress-list .progress-title h5{
    font-size: var(--font-size-b3);
    font-weight: var(--semi-bold);
    color: var(--color-dark);
    line-height: normal;
}
.progress-list .progress-title .progress-count{
    font-size: var(--font-size-b3);
    color: var(--color-primary);
    font-weight: var(--semi-bold);
}
.progress, .progress-stacked{
    height: 8px;
    background: rgba(242, 222, 186, 0.5);
    border-radius: 0;
}
.progress-bar{
    background: var(--color-tertiary);
}


.qualification-experience-content p:last-child{
    margin-bottom: 0;
}


/*Team Popup style*/
.team-popup{
    padding:35px 25px 5px !important;
}
.team-popup .image-with-text-content .sub-title{
    margin-bottom: 5px;
}
.team-popup .image-with-text-content .popup-title{
    margin-bottom: 10px;
}

/*=============================================
    End Team Member detail page style
===============================================*/

/*=============================================
    18. Blog Standard page style
===============================================*/

/*======= blog full grig style CSS =======*/

.blog-full-grig{
    display: block;
    padding: 0;
    border-radius: 15px;
    margin-bottom: 42px;
}
.blog-full-grig .blog-img{
    width: 100%;
    border-radius: 15px;
}
.blog-full-grig .blog-img:before{
    padding-top: 50%;
}
.blog-full-grig .blog-info{
    width: 100%;
    padding: 33px 40px;
}
.blog-full-grig .blog-info .blog-admin-info{
    font-size: var(--font-size-b4);
}
.blog-full-grig .blog-info .blog-admin-info{
    margin-bottom: 20px;
}
.blog-full-grig .blog-info h6 {
    font-size: var(--h5);
    line-height: var(--h5-lineHeight);
}
.blog-full-grig .blog-info .btn {
    font-size: var(--font-size-b2);
    padding: 12px 30px;
}
.blog-admin-info .blog-date{
    color: var(--color-primary);
    background-color: var(--color-tertiary);
    border-radius: 50px;
    font-weight: var(--bold);
    font-size: var(--font-size-b2);
    line-height: 20px;
    padding: 8px 15px;
    margin-left: 10px;
}
/*======= Sidebar style CSS =======*/
.sidebar .widget{
    margin-bottom: 50px;
}
.sidebar .widget .widget-title{
    font-weight: var(--semi-bold);
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b3);
    margin-bottom: 16px;
}
.sidebar .search{
    border: 1px solid var(--color-tertiary);
    border-radius: var(--radius-sm);
}
.sidebar .search .widget-title{
    padding: 4px 22px;
    margin: 0;
    border-bottom: 1px solid var(--color-tertiary);
}
.sidebar .search .search-form-box{
    padding: 11px 23px 20px;
}
.sidebar .search .search-form{
    width: 100%;
    position: relative;
}
.sidebar .search .search-form .form-control{
    border-radius: 5px;
}
.sidebar .search .search-form button{
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    background: transparent;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    font-size: var(--font-size-b3);
    color: var(--color-primary);
    border-radius: 0;
    border: 0;
}

.recent-blogs-list .recent-post-single{
    padding: 14px 0;
    border-top: 1px solid rgba(214, 191, 149, 0.16);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 19px;
}
.recent-blogs-list .recent-post-single:first-child{
    border-top: 0;
}
.recent-blogs-list .recent-post-single .recent-post-img{
    width: 56px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}
.recent-blogs-list .recent-post-single .recent-post-img:before{
    content: '';
    padding-top: 100%;
    display: block;
}
.recent-blogs-list .recent-post-single .recent-post-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.recent-blogs-list .recent-post-single .recent-post-bio h6{
    font-size: var(--font-size-b4);
    line-height: var(--line-height-b5);
}
.recent-blogs-list .recent-post-single .recent-post-bio span{
    font-size: var(--font-size-b5);
    font-weight: var(--medium);
}
.sidebar .category-list li{
    border-bottom: 1px solid rgba(214, 191, 149, 0.16); 
}
.sidebar .category-list li a{
    padding: 13px 0;
    display: block;
    font-size: var(--font-size-b4);
    line-height: var(--line-height-b5);
    color: var(--color-dark);
    font-weight: var(--medium);
    transition: all 0.3s ease;
}
.sidebar .category-list li a:hover {
    padding-left: 10px;
    color: var(--color-primary);
}
.sidebar .category-list li a:before{
    content: "\f058";
    font-weight: 400;
    font-family: 'Font Awesome 6 Pro';
    margin-right: 13px;
    color: var(--color-tertiary);
}
.sidebar .category-list li a span {
    float: right;
    color: var(--color-primary);
}
.sidebar .tag-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sidebar .tag-list a{
    border-radius: var(--radius);
    background: rgba(242, 222, 186, 0.5);
    padding: 6px 18px;
    font-size: var(--font-size-b4);
    line-height: var(--line-height-b5);
    color: var(--color-dark);
}
.sidebar .tag-list a:hover{
    background: var(--color-primary);
    color: var(--color-white);
}

/*=============================================
    End Blog Standard page style
===============================================*/

/*=============================================
    19. blog single page style
===============================================*/

/*======= blog single content style CSS =======*/

.blog-single-content{
    margin-bottom: 80px;
}
.blog-single-content .blog-thumb-img{
    border-radius: var(--radius-lg);
    margin-bottom: 30px;
    overflow: hidden;
}
.blog-single-content .blog-thumb-img img{
    width: 100%;
}
.blog-single-content .blog-info img{
    border-radius: var(--radius-sm);
    margin-bottom: 25px;
}
.blog-single-content .blog-info .blog-admin-info {
    font-size: 12px;
    line-height: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
}
.blog-single-content .blog-info .blog-admin-info i {
    color: var(--color-primary);
    font-size: 15px;
    margin-right: 10px;
}
.blog-single-content .blog-info .blog-admin-info span {
    color: var(--color-primary);
    margin: 0 2px;
}
.blog-single-content h2{
    font-size: var(--h3);
    line-height: var(--h3-lineHeight);
}
.blog-single-content p{
    margin-bottom: 25px;
}
.blockqoute{
    padding: 27px 40px;
    border-radius: 15px;
    background: var(--color-tertiary);
    margin-bottom: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 40px;
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b2);
    color: var(--color-dark);
    font-weight: var(--medium);
}
.blockqoute:before{
    content: '';
    background: url('../images/quote-icon.svg') no-repeat 0 0;
    background-size: 100%;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}
.blog-details-tags{
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-tertiary);
    padding: 12px 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex-wrap: wrap;
}
.blog-details-tags .share-icon{
    border-radius: 3px;
    background: var(--color-tertiary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    flex-shrink: 0;
    width: 31px;
    height: 31px;
}
.blog-details-tags .share-icon img{
    margin: 0;
    max-width: 18px;
    border-radius: 0;
}
.blog-details-tags .blog-tags{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.blog-details-tags .blog-tags li{
    margin-left: 19px;
}
.blog-details-tags .blog-tags li a{
    border-radius: var(--radius);
    padding: 5px 10px;
    display: block;
    color: var(--color-dark);
    font-size: var(--font-size-b4);
    border: 1px solid var(--color-tertiary);
    line-height: normal;
}
.blog-details-tags .blog-tags li a:hover{
    background: var(--color-tertiary);
}
.blog-details-tags .social-link{
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 15px;
}

/*=============================================
    End Blog Standard page style
===============================================*/


/*=============================================
    20. Contact page style
===============================================*/

/*======= Contact detail box style CSS =======*/
.contact-detail-box{
    border-radius: var(--radius-md);
    border: 1px solid var(--color-tertiary);
    background: var(--color-white);
    padding: 60px 30px;
    text-align: center;
    height: 100%;
}
.contact-detail-box .icon{
    margin-bottom: 40px;
    height: 85px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    color: var(--color-primary);
    font-size: var(--h2);
}
.contact-detail-box h6{
    font-size: var(--font-size-b1);
    margin-bottom: 15px;
}
.contact-detail-box p{
    font-size: var(--font-size-b2);
    color: var(--color-body);
    max-width: 200px;
    margin: 0 auto;
}
.contact-detail-box p a{
    color: var(--color-body);
}
.contact-detail-box p a:hover{
    color: var(--color-primary);
}

/*======= Contact form section style CSS =======*/
.contact-form-section{
    padding: 220px 0;
    margin: -100px 0;
}
.contact-form-info{
    max-width: 480px;
}
.contact-form-info .section-heading{
    text-align: left;
}
.contact-dark .form-control{
    background: var(--color-white);
    border-radius: 3px;
}
.contact-dark .btn-primary{
    border-radius: 3px;
    min-width: 180px;
    font-size: var(--font-size-b2);
}
.contact-dark .btn-primary:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
}
.contact-dark .btn-primary::before,
.contact-dark .btn-primary::after{
    background-color: var(--color-dark);
}

.contact-page-2{
    padding-bottom: 0 !important;
}
/*contact-gallery*/
.contact-gallery{
    max-width: 600px;
}
.contact-gallery .about-image:before{
    padding-top: 50%;
}
.contact-gallery .about-image{
    max-width: 70% !important;
}
.contact-gallery .about-image.image-2{
    margin: -120px 0 0 auto !important;
    max-width: 53% !important;
}
.contact-gallery .about-image.image-2:before{
    padding-top: 52%;
}

.contact-form-style-2 .btn{
    width: 100%;
    border-radius: 5px;
    font-size: var(--font-size-b2);
}

.contact-box-wrap{
    margin: 100px 0 75px;
}
.contact-box-style-2{
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    text-align: left;
}
.contact-box-style-2 .icon{
    max-width: 40px !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    flex-shrink: 0;
}
.contact-box-style-2 h6 {
    margin-bottom: 5px;
}

/*======= Contact map style CSS =======*/
.contact-pam{
    border-radius: 40px;
    overflow: hidden;
}
.contact-pam iframe{
    display: block;
}
.contact-pam-full{
    border-radius: 0;
}

/*=============================================
    End Contact page style
===============================================*/

/*=============================================
    21. 404 page style
===============================================*/

/*======= not found content style CSS =======*/
.not-found-content{
    text-align: center;
}
.not-found-content img{
    margin-bottom: 50px;
}
.not-found-info p{
    font-size: var(--font-size-b1);
    line-height: var(--line-height-b1);
    max-width: 470px;
    margin: 0 auto 25px;
}

/*=============================================
    End 404 page style
===============================================*/
/*=============================================
   22. Presantation page style
===============================================*/
.header-style-3 .header-right .menu-btn a{
    color: var(--color-dark);
    font-size: var(--font-size-b3);
}
.header-style-3 .header-right .menu-btn a:before{
    background: var(--color-dark);
}
.header-style-3 .header-right .menu-btn a:hover{
    color: var(--color-white);
}

/*======= Presantation hero banner section CSS =======*/
.presantation-hero-section{
    position: relative;
    padding: 245px 0 170px;
}
.presantation-hero-section .container{
    position: relative;
    z-index: 1;
}
.presantation-hero-section .inner-banner-img:before{
    background-image: none;
}
.presantation-hero-section .title{
    color: var(--color-white);
}
.presantation-hero-section p{
    color: var(--color-white);
    max-width: 780px;
    margin: 0 auto 45px;
}
.presantation-hero-section .btn-style-2:before{
    background: var(--color-dark);
}

/*======= Stunning Home grig section CSS =======*/
.presantation-heading{
    max-width: 600px;
    margin:0 auto 60px;
}
.presantation-heading.section-heading h2.title{
    max-width: 100%;
    font-size: 50px;
    margin-bottom: 20px;
}
.presantation-heading .title span{
    color: var(--color-secondary);
}

.stunning-grid-style{
    margin-bottom: 25px;
}
.stunning-grid-style .stunning-grid-img{
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-tertiary);
    border-radius: 15px;
    margin-bottom: 19px;
}
.stunning-grid-style .stunning-grid-img:before{
    content: '';
    padding-top: 115%;
    display: block;
}
.stunning-grid-style .stunning-grid-img img{
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    object-fit: cover;
    height: 100%;
    object-position: top;
    transition-duration: var(--duration, 2s);
    transition-timing-function: linear;
}
.stunning-grid-style:hover .stunning-grid-img img{
    object-position: bottom;
    transition-duration: var(--duration, 3s);
}
.stunning-grid-hover{
    position: absolute;
    top: 100%;
    left: 0;
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    background: rgba(14, 94, 111, 0.62);
}
.stunning-grid-style:hover .stunning-grid-hover{
    top: 0;
}
.stunning-grid-style .stunning-grid-title{
    text-align: center;
    font-size: var(--h6);
    color: var(--color-dark);
    font-weight: var(--semi-bold);
}

/*======= Stunning Inner grig section CSS =======*/
.stunning-inner-grig{
    padding: 80px 0;
}


/*======= Multipurpose HTML section CSS =======*/
.multipurpose-html-section h3{
    text-align: center;
    font-size: 40px;
    max-width: 925px;
    margin: 0 auto 60px;
}
.multipurpose-html-images{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.multipurpose-html-images .multipurpose-image{
    width: 55%;
}
.multipurpose-html-images .multipurpose-image:last-child{
    margin-top: 74px;
    margin-left: -75px;
}
.multipurpose-html-text{
    max-width: 340px;
    margin: 0 auto;
}
.multipurpose-html-project{
    border-radius: 30px;
    border: 2px solid var(--color-tertiary);
    text-align: center;
    padding: 30px;
    max-width: 320px;
    margin: 0 auto;
}
.multipurpose-html-project img{
    margin-bottom: 10px;
}
.multipurpose-html-project h2{
    font-size: 80px;
    color: var(--color-primary);
    margin-bottom: 10px;
    line-height: 80px;
}
.multipurpose-html-project p{
    color: var(--color-dark);
    font-size: var(--font-size-b2);
    margin-bottom: 12px;
}
.multipurpose-html-project .btn-link{
    font-size: var(--font-size-b2);
    color: var(--color-primary);
    font-weight: var(--medium);
    text-decoration: underline;
}
.multipurpose-html-project .btn-link i{
    margin-left: 5px;
}
.multipurpose-html-project .btn-link:hover{
    color: var(--color-dark);
    text-decoration: none;
}

/*======= Presantation Why choose Us? section CSS =======*/
.presantation-why-choose{
    margin-top: 80px;
}
.presantation-why-choose .why-choose-us-grid p{
    margin-bottom: 0;
    font-size: var(--font-size-b1);
    color: var(--color-dark);
    font-weight: var(--medium);
}

/*======= footer four CSS =======*/
.footer-four{
    background: var(--color-primary);
    padding: 100px 0;
    text-align: center;
}
.footer-four img{
    margin-bottom: 48px;
}
.footer-four h2{
    font-size: var(--h1);
    color: var(--color-white);
    margin-bottom: 30px;
    line-height: var(--h1-lineHeight);
}
.footer-four p{
    color: var(--color-white);
    font-size: var(--font-size-b2);
    margin-bottom: 44px;
}
.footer-four .btn-style-2:before{
    background: var(--color-dark);
}

/*=============================================
    End Presantation page style
===============================================*/

/*=============================================
   23. Career page style
===============================================*/

/*======= Career Opportunity section CSS =======*/
.career-opportunity-section{
    padding: 70px 0;
}
.career-opportunity-section .section-heading .title{
    margin-bottom: 26px;
}
.career-opportunity-box{
    background: var(--color-tertiary);
    padding: 45px 20px;
    max-width: 490px;
    margin: 0 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: start;
    gap: 20px;
    border-radius: 15px;
}
.career-opportunity-box img{
    flex-shrink: 0;
}
.career-opportunity-box p{
    font-size: var(--font-size-b1);
    line-height: var(--line-height-b2);
    color: var(--color-dark);
    margin: 0;
}

/*======= Current Openings section CSS =======*/
.current-opportunity-section{
    background: rgba(255, 239, 214, 0.4);
    padding: 65px 0 65px;
}
.current-opportunity-section .section-heading .title{
    margin-bottom: 40px;
}
.current-opportunity-section .accordion-list .accordion-tabs{
    background: rgba(242, 222, 186, 0.5);
}
.current-opportunity-section .accordion-content{
    padding: 32px 50px 28px;
}
.current-opportunity-section .accordion-content p{
    font-size: var(--font-size-b2);
}
.current-opportunity-section .accordion-content h6{
    font-size: var(--font-size-b2);
    color: var(--color-body);
    font-weight: var(--regular);
    margin-bottom: 24px;
}
.current-opportunity-section .accordion-content h6 strong{
    font-weight: var(--semi-bold);
    color: var(--color-dark);
}
.current-opportunity-section .accordion-content .btn{
    font-size: var(--font-size-b2);
    padding: 6px 25px;
    border-radius: 4px;
}
.current-opportunity-section .accordion-content .btn:before{
    background: var(--color-dark);
}

/*current-openings-grid*/
.current-openings-grid{
    height: 100%;
    padding-bottom: 25px;
}
.current-openings-grid .current-openings-box{
    height: 100%;
    background: rgba(242, 222, 186, 0.2);
    border: 1px solid var(--color-tertiary);
    border-radius: 4px;
}
.current-openings-box h3{
    background: rgba(242, 222, 186, 0.5);
    border-radius: 4px 4px 0 0;
    padding: 12px 20px;
    line-height: normal;
    color: var(--color-dark);
    margin-bottom: 0;
    font-size: var(--font-size-b2);
}
.current-openings-body{
    padding: 25px;
}
.current-openings-body p{
    color: var(--color-dark);
    margin-bottom: 16px;
}
.current-openings-body .btn{
    padding: 7px 20px;
    font-size: var(--font-size-b4);
    line-height: var(--line-height-b3);
}
.current-openings-body .btn:before{
    background: var(--color-dark);
}

/*======= Recruitment Process section CSS =======*/
.recruitment-process-section{
    padding: 85px 0;
}
.recruitment-process-section .section-heading{
    margin-bottom: 45px;
}
.recruitment-process-section .section-heading .title{
    max-width: 100%;
    margin-bottom: 0;
}
.recruitment-process-wrap{
    padding: 0 10px;
    position: relative;
    height: 100%;
}

.recruitment-process-wrap:before{
    content: '';
    position: absolute;
    left: -25px;
    top: 50%;
    background: url('../images/process-arrow.svg') no-repeat 0 0;
    background-size: 26px;
    width: 26px;
    height: 15px;
}
.recruitment-process-section .col-lg-3:first-child .recruitment-process-wrap:before{
    display: none !important;
}
.recruitment-process-box{
    background: var(--color-white);
    border: 2px solid var(--color-tertiary);
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
}
.recruitment-process-box h3{
    background: var(--color-tertiary);
    padding: 12px 10px;
    text-align: center;
    line-height: normal;
    color: var(--color-dark);
    text-transform: uppercase;
    margin-bottom: 0;
    font-size: var(--font-size-b2);
}
.recruitment-process-box .process-box-body{
    padding: 25px 15px;
    text-align: center;
}
.recruitment-process-box .process-box-body p{
    margin: 0;
}

/*======= how we care section CSS =======*/
.how-we-care-section{
    padding: 30px 0 80px;
    position: relative;
}
.how-we-care-section .container{
    position: relative;
}
.how-we-care-section:before{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    height: calc(100% - 80px);
    width: 44%;
    background: linear-gradient(90deg, rgba(242, 222, 186, 0.5) 0%, rgba(242, 222, 186, 0) 100%);
    border-radius: 400px 0px 0px 400px;
}
.how-we-care-info{
    max-width: 410px;
    margin: 0 0 0 auto;
}
.how-we-care-section .section-heading{
    margin-bottom: 15px;
    text-align: left;
}
.how-we-care-section .section-heading .sub-title{
    margin-bottom: 15px;
}
.how-we-care-section .section-heading .title{
    max-width: 100%;
    margin-bottom: 0;
}
.how-we-care-box{
    position: relative;
    border-radius: 10px;
    margin-bottom: 25px;
}
.how-we-care-box .thumb{
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    display: block;
}
.how-we-care-box .thumb:before{
    content: '';
    padding-top: 73%;
    display: block;
}
.how-we-care-box .thumb img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}
.how-we-care-box .how-we-care-title{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
}
.how-we-care-box .how-we-care-title a{
    background: rgba(14, 94, 111, 0.64);
    border-radius: 10px 10px 0px 0px;
    padding: 5px 17px;
    color: var(--color-white);
    font-size: var(--font-size-b3);
    display: block;
    max-width: fit-content;
    margin: 0 auto;
}
.mt-7{
    margin-top: 5rem;
}
.m-top{
    margin-top: -5rem;
}
.how-we-care-box:hover .how-we-care-title a{
    background: var(--color-primary);
}


/*=============================================
    End Career page style
===============================================*/

/*=============================================
   24. Langing page style
===============================================*/
.blog-articles-section-style-4{
    padding: 100px 0;
}
.contact-section-3{
    padding: 100px 0;
}
.mainmenu-style-2 .main-menu li a.active{
    color: var(--color-primary);
}
.mainmenu-style-2 .main-menu li a.active:before {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-dark);
    width: 6px;
    height: 6px;
    border-radius: 100%;
}
.subscribed-form-form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.service_grid{
    padding: 15px;
}
/*=============================================
    End Langing page style
===============================================*/