@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');

:root {
   --white: #fff;
   --lite: #DBDBDB;
   --ultra-lite: #F9F9F9;
   --gray: #C3C3C3;
   --orange: #BD590B;
   --green: #4B7722;
   --red: #bb3737;
   --dark-green: #4B7621;
   --mid-dark: #707070;
   --dark: #303030;
   --black: #000000;
}



* {
   font-family: 'Playfair Display', serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
}

html {
   overflow-x: hidden;
   scroll-behavior: smooth;
}

body {
   overflow-y: hidden;
   padding: 0 !important;
}

#loading {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 999999;
   background-color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
}


.loader {
   position: relative;
   width: 80px;
   letter-spacing: 2px;
   display: inline-block;
   box-sizing: border-box;
   animation: floating 1s ease-out infinite alternate;
}

.loader::after {
   content: '';
   width: 80%;
   height: 20px;
   background: rgba(0, 0, 0, 0.424);
   position: absolute;
   left: 10%;
   top: 110%;
   filter: blur(4px);
   border-radius: 50%;
   box-sizing: border-box;
   animation: animloader 1s ease-out infinite alternate;
}

@keyframes floating {
   0% {
      transform: translateY(0);
   }

   100% {
      transform: translateY(-25px);
   }
}

@keyframes animloader {
   0% {
      transform: scale(0.8);
   }

   100% {
      transform: scale(1.2);
   }
}


html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   vertical-align: middle;
   background: transparent;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
   display: block;
}

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

a {
   text-decoration: none;
}

iframe {
   width: 100%;
   border: 0;
   height: 100%;
}

.dropdown-menu {
   background-clip: none;
}

.dropdown-item:focus {
   background-color: var(--light-orange);
}

.dropdown-item:hover {
   color: var(--dark);
   background-color: #ff54164b;
}

.form-select, .form-select:focus {
   padding: .375rem .75rem .375rem 2.25rem;
   font-size: 0.8rem;
   font-weight: 400;
   line-height: 1.3;
   background-position: left .75rem center;
   box-shadow: none;
   outline: 0;
}

.form-label {
   font-size: 15px;
   margin-bottom: 0.5rem;
   color: var(--dark);
   font-weight: 700;
}

.form-label span {
   color: var(--red);
   font-size: 20px;
   font-weight: 800;
}
.select2-container--default .select2-selection--single{
   font-size: 1.1rem;
   border: 1px solid var(--lite);
   padding: 10px 15px;
   height:48.39px;
   display:flex;
   align-items: center;
   background-color: var(--white);
   color: var(--mid-dark);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 12px;
    right: 12px;
}
.form-control {
   font-size: 1.1rem;
   border: 1px solid var(--lite);
   padding: 10px 15px;
   background-color: var(--white);
   color: var(--mid-dark);
}

.form-control:focus {
   border: 1px solid var(--orange);
   box-shadow: none;
}

.form-control+svg {
   position: absolute;
   right: 15px;
   bottom: 15px;
   color: var(--orange);
}

.form-select {
   font-size: 1.1rem;
   border: 1px solid var(--lite);
   padding: 10px 15px;
   background-color: var(--white);
   color: var(--mid-dark);
   background-position: right 0.75rem center;
}

.form-select:focus {
   font-size: 1.1rem;
   padding: 10px 15px;
   background-color: var(--white);
   color: var(--mid-dark);
   border: 1px solid var(--orange);
   box-shadow: white;
   background-position: right 0.75rem center;
}

.form-check {
   display: block;
   min-height: 1.5rem;
   padding-left: 0;
   margin-bottom: 0.125rem;
   margin-right: 2rem;
}

.form-check .form-check-input {
   /* float: left; */
   margin-left: 0em;
}

.form-check-input, .form-check-input:focus {
   float: left;
   margin-left: 0;
   width: 1.5em;
   height: 1.5em;
   box-shadow: none;
}

.form-check-input:checked[type=radio] {
   background-image: url("../images/true.svg");
   border: 1px solid var(--orange);
   background-color: var(--orange);
}

textarea {
   resize: none;
}

::placeholder {
   /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: var(--lite);
}

:-ms-input-placeholder {
   /* Internet Explorer 10-11 */
   color: var(--ultra-lite);
}

::-ms-input-placeholder {
   /* Microsoft Edge */
   color: var(--ultra-lite);
}

img {
   width: 100%;
}

.btn, .btn:focus, .btn-close, .btn-close:focus {
   outline: none;
   box-shadow: none;
}

::-webkit-scrollbar {
   width: 0.8rem;
}

::-webkit-scrollbar-track {
   background-color: var(--lite);
}

::-webkit-scrollbar-thumb {
   background-color: var(--green);
   border-radius: 0px;
}

.nice-select-container {
   display: flex;
   flex-direction: column;
}

.nice-select .list {
   width: 100%;
   max-height: 200px;
   overflow: auto;
}

.nice-select {
   font-size: 1.1rem;
   padding: 0 15px 10px;
   height: 49px;
   border: 1px solid var(--lite);
   background-color: var(--white);
   color: var(--mid-dark);
   width: 100%;
}

.nice-select.open {
   border: 1px solid var(--orange);
}




#social-media {
   position: fixed;
   top: 45%;
   right: 0px;
   width: 80px;
   font-size: 24px;
   line-height: 2px;
   vertical-align: middle;
   transform:translateY(-50%);
   z-index: 1000;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   transition: all 0.3s;
}
#social-media .icon{
    position: relative;
    background-color: var(--orange);
    color: var(--white) !important;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    font-size: 16px;
    margin-bottom: 10px;
    opacity: 0.7;
    transition: all 0.3s;
}
#social-media .icon:hover{
    opacity: 1;
}

.whatsapp{
   position: fixed;
   bottom: 35px;
   left: 35px;
   z-index: 9999;
}

.whatsapp i,.whatsapp svg{
   font-size: large;
   width: 25px;
   height: 25px;
   padding: 10px;
   text-align: center;
   line-height: 2.2;
   color: white;
   background: #25D366;
   border-radius: 50%;
   box-shadow: 0 2px 6px 0 rgb(0 0 0 / 30%);
   transition: .5s;
}

.custom-btn {
   font-size: 18px;
   padding: 12px 65px;
   height: 50px;
   width: 140px;
   background: var(--green);
   color: var(--white) !important;
   border-radius: 5px;
   text-align: center;
   overflow: hidden;
   position: relative;
}

.custom-btn:hover::after {
   width: 100%;
}

.custom-btn::after {
   content: '';
   position: absolute;
   top: 0;
   right: 0%;
   width: 0px;
   height: 100%;
   background: var(--orange);
   border-radius: 5px;
   z-index: 1;
   transition: all 0.3s;
}

.custom-btn span {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   vertical-align: baseline;
   z-index: 2;
   white-space: nowrap;
   transition: all 0.3s;
}


.custom-btn.lite {
   color: var(--green) !important;
   border: 1px solid var(--green);
   background: var(--white)
}

.custom-btn.lite:hover::after {
   width: 100%;
}

.custom-btn.lite::after {
   background: var(--green);
}

.custom-btn.lite:hover span {
   color: var(--white);
}

.boardcrumb {
   display: flex;
   justify-content: center;
   align-items: center;
   background-image: url("../images/happy-family-sitting-couch-living-room@2x.png");
   background-position: center center;
   background-size: cover;
   height: 50vh;
}

.boardcrumb .content {
   width: 100%;
   height: 100%;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   background-color: rgba(0, 0, 0, 0.6);
}

.boardcrumb .content h2 {
   font-size: 40px;
   margin-bottom: 20px;
   color: var(--white);
   text-align: center;
   font-weight: 700;
}
.boardcrumb .content> div {
    display: flex;
}

.boardcrumb .content a {
   font-size: 22px;
   color: var(--white);
   font-weight: 600;
}

.boardcrumb .content span {
   font-size: 22px;
   color: var(--orange);
   font-weight: 600;
   vertical-align: baseline;
}


/* ------------  nav  ------------ */


nav {
   padding: 15px 0;
}

nav .logo {
   width: 220px;
}

nav .nav-links {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 30px;
}

nav .nav-links>li>a:hover::after {
   width: 100%;
}

nav .nav-links>li>a::after {
   content: '';
   position: absolute;
   bottom: 0;
   right: 50%;
   width: 0px;
   height: 2px;
   background: var(--orange);
   transform: translateX(50%);
   transition: all 0.3s;
}

nav .nav-links>li>a {
   color: var(--dark);
   font-size: 18px;
   font-weight: 400;
   padding: 10px 15px;
   white-space: nowrap;
   position: relative;
   transition: all 0.3s;
}
nav li {
       cursor: pointer;
}

nav .nav-links>li:hover a {
   color: var(--orange);
}

nav .nav-links>li>a.active {
   color: var(--orange);
   font-weight: 600;
}

nav .toggle-side-menu {
   background-color: transparent;
   color: var(--orange);
   font-size: 24px;
   display: none;
}

.offcanvas-bottom {
   right: 0;
   left: 0;
   height: 75vh;
   max-height: 100%;
   transform: translateY(100%);
}

.side-menu-nav ul {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.side-menu-nav ul>li {
   margin-bottom: 15px;
}

.side-menu-nav ul>li>a:hover::after {
   width: 100%;
}

.side-menu-nav ul>li>a::after {
   content: '';
   position: absolute;
   bottom: 0;
   right: 50%;
   width: 0px;
   height: 2px;
   background: var(--orange);
   transform: translateX(50%);
   transition: all 0.3s;
}

.side-menu-nav ul>li>a {
   color: var(--dark);
   font-size: 16px;
   font-weight: 400;
   position: relative;
   padding: 10px 30px;
   transition: all 0.3s;
}

.side-menu-nav ul>li>a:hover {
   color: var(--orange);
}

.side-menu-nav ul>li>a.active {
   color: var(--orange);
   font-weight: 600;
}

.side-menu-nav .toggle-side-menu {
   background-color: transparent;
   color: var(--orange);
   font-size: 24px;
   display: none;
}



nav .auth {
   display: flex;
   align-items: center;
   justify-content: center;
}

nav .auth> li {
   margin: 0 5px;
}

nav .auth>li>a {
   color: var(--dark);
   font-size: 17px;
   font-weight: 400;
   transition: all 0.3s;
}

nav .auth>li>a.has-menu {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--green);
    background: var(--ultra-lite);
    border-radius: 50%;
}

nav .auth>li>a.has-menu:hover {
   color: var(--white);
   background: var(--green);
}

nav .auth>li>a.has-menu:hover .quantity-num {
   color: var(--green);
   background: var(--white);
}

.top-nav-user {
   position: relative;
}

.top-nav-notification {
   position: relative;
}

.quantity-num {
   position: absolute;
   top: -5px;
   right: -5px;
   width: 18px;
   height: 18px;
   color: var(--white);
   background: var(--green);
   font-size: 11px;
   text-align: center;
   vertical-align: middle;
   border-radius: 50%;
   transition: all 0.3s;
}

.top-nav-user .sub-menu {
   position: absolute;
   top: 100%;
   right: 50%;
   transform: translateX(50%);
   min-width: 200px;
   max-width: 200px;
   font-size: 12px;
   background-color: var(--white);
   display: none;
   flex-direction: column;
   z-index: 100;
   box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 10%);
   padding: 1rem 0.7rem;
   border-radius: 15px;
}

/* .top-nav-user .sub-menu::before {
   content: "";
   border-bottom: 5px solid var(--white);
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-top: 5px solid transparent;
   position: absolute;
   top: -10px;
   right: 50%;
   transform: translateX(50%);
} */

.top-nav-user .sub-menu>a {
   font-size: 14px;
   padding: 10px 0;
   text-align: left;
   white-space: nowrap;
   color: var(--mid-dark);
   background-color: var(--white);
   display: flex;
   align-items: center;
   transition: all 0.3s;
}
.top-nav-user .sub-menu>a>span{
   width: 25px;
    height: 25px;
    background: var(--ultra-lite);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.top-nav-user .sub-menu>a:hover {
   transform: translateX(10px);
}

.top-nav-user .sub-menu>a.logout {
   text-align: center;
   color: var(--mid-dark);
   background-color: var(--ultra-lite);
   text-align:center;
   border-radius: 20px;
   justify-content: center;
   margin-top: 10px;
}
.top-nav-user .sub-menu>a.logout:hover {
   text-align: center;
   color: var(--white);
   background-color: var(--red);
   transform: none;
}



.top-nav-notification .sub-menu {
   position: absolute;
   top: 100%;
   right: 0;
   min-width: 300px;
   max-width: 300px;
   font-size: 12px;
   background-color: var(--white);
   display: none;
   flex-direction: column;
   z-index: 100;
   box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 10%);
   padding: 1rem 0.7rem;
   border-radius: 15px;
}


.top-nav-notification .sub-menu>a {
   padding: 0px 15px 15px 15px;
   text-align: left;
   color: var(--mid-dark);
   background-color: var(--white);
   display: flex;
   align-items: center;
}

.top-nav-notification .sub-menu>a>img {
   width: 50px;
   height: 50px;
   margin-right: 15px;
   border-radius: 50%;
   padding: 0.7rem;
   box-shadow: 1.5px 1.5px 3px 0px #ccc;
   margin-left: 0x;
}
.top-nav-notification .sub-menu>a h6 {
   font-size: 13px;
   font-weight: 400;
   color: #000;
}

.top-nav-notification .sub-menu>a span {
   font-size: 10px;
   font-weight: 400;
   color: #000;
}

.top-nav-notification .sub-menu>a.viewAll {
   color: var(--white);
   background-color: var(--green);
   justify-content: center;
   border-radius: 30px;
   padding: 10px;
   margin: 10px 20px ;
}



#content-data, #personal-data, #personal, #personal+span, #building-data, #building, #building+span{
    display: none;
}





/* ------------- header -------------- */
header {
   position: relative;
   margin-bottom: 120px;
}

header .mob-img {
   display: none;
}

.header-content {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0 0 0 / 50%);
   display: flex;
   align-items: center;
}

header .header-content .content {
   width: 40%;
   margin-bottom: 40px;
}

header .header-content .content h2 {
   font-size: 46px;
   color: var(--white);
   margin-bottom: 20px;
   font-weight: 700;
   letter-spacing: 3px;
}

header .header-content .content h2 span {
   line-height: 1;
   vertical-align: baseline;
   color: var(--orange);
}

header .header-content .content p {
   font-size: 18px;
   color: var(--lite);
   line-height: 40px;
}

header .owl-carousel .owl-dots {
   width: 200px;
   position: absolute;
   left: 180px;
   top: calc(100% + 10px);
}

header .owl-carousel .owl-dots .owl-dot {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: rgba(256, 256, 256, 0.4);
   margin: 5px;
   transition: all 0.4s;
}

header .owl-carousel .owl-dots .owl-dot.active {
   background: rgba(256, 256, 256, 1);
   border-radius: 20px;
}




section {
   margin-bottom: 120px;
}

.section-title {
   text-align: center;
   margin-bottom: 50px;
}

.section-title h5 {
   font-size: 24px;
   color: #999;
   margin-bottom: 10px;
}

.section-title h6 {
   font-size: 21px;
   font-weight: 700;
}

.section-title h6>span {
   vertical-align: baseline;
   color: var(--orange);
}

.why-section .item {
   text-align: center;
   padding: 10px;
}

.why-section .item img {
   width: 100px;
   border-radius: 10px;
   transition: all 0.5s;
}

.why-section .item:hover img {
   transform: rotate(360deg);
}

.why-section .item h4 {
   font-size: 24px;
   margin: 10px 0px;
   font-weight: 700;
}

.why-section .item p {
   font-size: 16px;
   color: var(--mid-dark);
}






.our-services .item {
   position: relative;
   border-radius: 10px;
   overflow: hidden;
   margin-bottom: 20px;
   height: 100%;
}

.our-services .item>img {
    height: 100%;
   transition: all 0.4s;
}

.our-services .item:hover>img {
   transform: scale(1.1);
}

.router-link {
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
}

.our-services .item .overlay-content {
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   background: #00000079;
   display: flex;
   align-items: self-start;
   flex-direction: column;
   justify-content: end;
   padding: 10% 6%;
   z-index: 1;
}

.our-services .item .overlay-content .cyrcle-icon {
   width: 45px;
   height: 45px;
   background: var(--white);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.our-services .item .overlay-content .cyrcle-icon:hover img {
   transform: rotateY(180deg);
}

.our-services .item .overlay-content .cyrcle-icon img {
   width: 22px;
   transition: all 0.3s;

}

.our-services .item .overlay-content h6 {
   font-size: 20px;
   color: var(--white);
   margin: 15px 0;
}

.our-services .item .overlay-content>a {
   width: 40px;
   height: 40px;
   background: #ffffff7a;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 23px;
   border-radius: 5px;
   color: var(--white);
   transition: all 0.3s;
}

.our-services .item .overlay-content>a:hover {
   background: var(--white);
   color: var(--mid-dark);
}

.Quotation-note{
    background: #b6d39b;
    padding: 1.5rem 1rem;
    border-left: 7px solid var(--green);
    margin-bottom: 4rem;
}
.why-us-section {
   padding: 80px 0;
   background: #95b5a052;
}

.why-us-section .item {
   text-align: center;
   margin-bottom: 30px;
}

.why-us-section .child:nth-child(odd) {
   padding-top: 60px;
}

.why-us-section .item span {
   width: 55px;
   height: 55px;
   background: var(--green);
   font-size: 28px;
   color: var(--white);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   margin: auto;
}

.why-us-section .item h4 {
   font-size: 24px;
   font-weight: 700;
   margin: 10px 0;
}

.why-us-section .item p {
   font-size: 16px;
   color: var(--mid-dark);
}



.video-container {
   position: relative;
   width: 100%;
}

.video-container video {
   width: 100%;
   border-radius: 20px;
}

.video-container .play-icon, .video-container .pause-icon {
   position: absolute;
   top: 50%;
   right: 50%;
   transform: translate(50%, -50%);
   width: 80px;
   height: 80px;
   padding: 10px;
   background-color: rgba(255, 255, 255, 0.415);
   border-radius: 50%;
   cursor: pointer;
}

.video-container .pause-icon {
   opacity: 0;
   transition: all 0.3s;
}

.video-container:hover .pause-icon {
   opacity: 1;

}

.video-container .play-icon>div, .video-container .pause-icon>div {
   width: 100%;
   height: 100%;
   padding: 12px;
   background-color: rgba(255, 255, 255, 0.639);
   border-radius: 50%;
}

.video-container .play-icon>div>div, .video-container .pause-icon>div>div {
   width: 100%;
   height: 100%;
   padding: 12px;
   background-color: #fff;
   border-radius: 50%;
   font-size: 18px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.video-container .play-icon>div>div i, .video-container .pause-icon>div>div i {
   font-size: 30px;
   line-height: 0;
   color: var(--green)
}

.video-container>span {
   position: absolute;
   top: 50%;
   left: -30px;
   z-index: 2;
   transform: translateY(-50%);
   background: var(--orange);
   padding: 10px 30px;
   color: var(--white);
}

.video-container>span::before {
   content: '';
   position: absolute;
   bottom: 100%;
   left: 0;
   border: 15px solid var(--orange);
   border-left-color: transparent;
   border-top-color: transparent;
}

.video-container>span>.video-duration {
   vertical-align: baseline;
}


.about-us-section .section-title {
   margin: 0;
   text-align: left;
}
.about-us-section .about-img{
    height:350px;
    border-radius:20px;
    filter: brightness(0.6);
}
.about-us-section .section-title h6 {
   margin: 15px 0;
   font-weight: 800;
   font-size: 33px;
}

.about-us-section p {
   font-size: 16px;
   margin-bottom: 15px;
}
.about-us-section p:nth-child(3) {
   margin-bottom: 2rem;
}

.about-us-section .custom-btn {
   padding: 15px 75px;
    font-size: 15px;
}

.about-us-section .custom-btn svg {
   margin-left: 7px;
   transition: all 0.3s;
}

.about-us-section .custom-btn:hover svg {
   transform: translateX(5px);
}





.client-feadback .item .content {
   padding: 25px 15px;
   background: var(--ultra-lite);
   margin-bottom: 10px;
}

.client-feadback .item .content h4 {
   font-size: 24px;
   font-weight: 700;
   color: var(--green);
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   line-height: 0;
}
.client-feadback .item .content h4>svg{
   font-size: 26px;
   line-height: 0;
}
.client-feadback .item p {
   line-height: 30px;
   color: var(--mid-dark);
   font-size: 17px;
}

.client-feadback .item .auther {
   padding: 25px 15px;
   background: var(--ultra-lite);
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.client-feadback .item .auther img {
   width: 80px;
   margin-right: 15px;
}

.client-feadback .item .auther h6 {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 5px;
}


.our-blog .item {
     height: 100%;
   align-items: stretch;
}

.our-blog .blog-img {
   position: relative;
   border-radius: 15px;
   overflow: hidden;
    height: 100%;
}
.our-blog .blog-img > img {
    height: 260px;
}

.our-blog .blog-img .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #00000035;
}

.our-blog .blog-img .badge {
    position: absolute;
    top: 28px;
    left: -80px;
    padding: 15px 80px;
    text-align: center;
    background: var(--green);
    transform: rotateZ(314deg);
    font-size: 16px;
}
.our-blog .blog-content{
   padding-top: 1rem;
}
.our-blog .blog-content h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    min-height: 55px;
}

.our-blog .blog-content ul {
   display: flex;
   justify-content: space-between;
   margin: 15px 0;
   font-size: 18px;
   color: var(--mid-dark);
}
.our-blog .blog-content ul>li{
   font-size: 14px;
}
.our-blog .blog-content ul>li>i {
   color: var(--orange);
   vertical-align: baseline;
     margin-right: 5px;
}

.our-blog .blog-content p {
   font-size: 14px;
   margin-bottom: 1.5rem;
   color: var(--mid-dark);
   font-weight: 600;
}

.our-blog .blog-content a {
   font-size: 18px;
   color: var(--green);
   font-weight: 600;
}

.our-blog .blog-content a svg {
   margin-left: 5px;
   transition: all 0.3s;
}

.our-blog .blog-content a:hover svg {
   margin-left: 10px;
}

.sponsers .item {
   height: 170px;
   align-items: center;
   display: flex;
   padding: 20px 28%;
   background: var(--ultra-lite);
   border-radius: 10px;
}


.our-blog.single-blog .blog-content {
   margin-bottom: 3rem;
   padding-bottom: 3rem;
   border-bottom: 1px solid var(--lite);
}

.our-blog.single-blog .blog-content ul {
   justify-content: start;
   margin: 20px 0;
}

.our-blog.single-blog .blog-content ul li:first-child {
   margin-right: 3rem;
}

.our-blog.single-blog .comments {
   margin-bottom: 3rem;
}
.our-blog.single-blog .comments .row{
    max-height: 300px;
    overflow: auto;
}

.our-blog.single-blog .comments h4 {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 20px;
   padding-bottom: 10px;
   border-bottom: 4px solid var(--orange);
   width: fit-content;
}

.our-blog.single-blog .comments .comment {
   display: flex;
   padding: 2rem 0;
   border-bottom: 1px solid var(--lite);
}

.our-blog.single-blog .comments .comment img {
   width: 80px;
   height: 80px;
   margin-right: 1.5rem;
}

.our-blog.single-blog .comments .comment h6 {
   font-size: 20px;
   font-weight: 600;
   margin: 15px 0 5px 0;
}

.our-blog.single-blog .comments .comment span {
   font-size: 14px;
   color: var(--gray);
}

.our-blog.single-blog .comments .comment p {
   font-size: 16px;
   color: var(--mid-dark);
   margin-top: 10px;
   line-height: 30px;
}

.our-blog.single-blog .leave-comment h4 {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 3rem;
   padding-bottom: 10px;
   border-bottom: 4px solid var(--orange);
   width: fit-content;
}

.our-blog.single-blog .side-content {
   padding: 1.5rem;
   background-color: var(--ultra-lite);
   border-radius: 15px;
   margin-bottom: 2rem;
}

.our-blog.single-blog .side-content h4 {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 3rem;
   padding-bottom: 10px;
   border-bottom: 4px solid var(--orange);
   width: fit-content;
}

.our-blog.single-blog .side-content .item {
   display: flex;
   align-items: flex-start;
   margin: 0 0 30px 0;
}

.our-blog.single-blog .side-content .item:hover h6 {
   color: var(--orange);
}

.our-blog.single-blog .side-content .item img {
   width: 90px;
   margin-right: 1rem;
}

.our-blog.single-blog .side-content .item .content h6 {
   font-size: 16px;
   font-weight: 500;
   color: var(--dark);
}

.our-blog.single-blog .side-content .item .content span {
   font-size: 12px;
   color: var(--gray);
}

.our-blog.single-blog .side-content ul>li {
   margin-bottom: 15px;
}

.our-blog.single-blog .side-content ul>li>a {
   color: var(--mid-dark);
   font-size: 20px;
   transition: all 0.3s;
}

.our-blog.single-blog .side-content ul>li>a:hover {
   color: var(--orange);
   font-size: 20px;
   margin-left: 10px;
}




footer .form-control{
   background-color: var(--ultra-lite);
   border: 1px solid var(--lite);
}
footer .form-control:focus{
   background-color: var(--ultra-lite);
   border: 1px solid var(--lite);
}
footer h5 {
   font-size: 24px;
   border-bottom: 4px solid var(--orange);
   width: max-content;
   padding: 5px 0;
   margin-bottom: 40px;
}

footer p {
   font-size: 16px;
   color: var(--mid-dark);
   margin-bottom: 20px;
}

footer .social-icons i,footer .social-icons svg {
   color: inherit;
   margin-right: 15px;
   width: 20px;
   height: 20px;
   padding: 10px;
   background: var(--ultra-lite);
   border-radius: 50%;
}
footer .social-icons a{
   font-size: 18px;
   transition: all 0.4s;
   color: var(--green);
   display: flex;
   align-items: center;
   margin-bottom: 15px;
}
footer .social-icons a:hover {
   color: var(--orange);
   transform: translateX(10px);
}

footer ul>li {
   margin-bottom: 15px;
}

footer ul>li>a {
   color: var(--mid-dark);
   font-size: 20px;
   transition: all 0.3s;
}

footer ul>li>a:hover {
   color: var(--orange);
   font-size: 20px;
   margin-left: 10px;
}


footer .footer-blog>a {
   display: flex;
   align-items: stretch;
   margin-bottom: 20px;
}

footer .footer-blog img {
   width: 25%;
   margin-right: 10px;
   border-radius:5px;
}

footer .footer-blog h6 {
   font-size: 15px;
   margin-bottom: 7px;
   font-weight: 700;
   color: var(--black);
   transition: all 0.3s;
}

footer .footer-blog span {
   color: var(--gray);
   font-size: 14px;
}

footer .footer-blog>a:hover h6 {
   color: var(--orange)
}

footer .custom-btn {
   width: 100%;
}

footer .bottom-nav {
   padding: 20px;
   background: var(--orange);
   margin: 30px 0 50px 0;
   border-radius: 10px;
}

footer .bottom-nav ul {
   display: flex;
   justify-content: end;
}

footer .bottom-nav ul>li {
   margin-bottom: 0;
}

footer .bottom-nav ul>li>a {
   color: var(--white);
   font-size: 22px;
}

footer .bottom-nav ul>li>a:hover {
   color: var(--lite);
   margin-left: 0px;
}

footer .bottom-nav .logo {
   padding: 15px 25px;
   background: var(--white);
   max-width: 230px;
}























#wizard {
   background-color: #ffffff;
   margin: 50px auto 6rem;
   font-family: Raleway;
   padding: 40px;
   width: 100%;
   min-width: 300px;
   border: 2px dashed var(--lite);
   border-radius: 15px;
}

#wizard .tab-content {
   padding: 5%;
   background-color: var(--ultra-lite);
   border-radius: 15px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

#wizard>.tab {
   display: none;
}

#wizard h1 {
   text-align: center;
}

/* Make circles that indicate the steps of the form: */
.steps-container {
   width: 100%;
   margin: 0 auto 80px;
   border-top: 1px solid var(--light);
   display: flex;
   justify-content: space-around;
   text-align: center;
}

#wizard .step {
   padding: 20px 0;
   border: none;
   color: var(--dark);
   background-color: var(--white);
   display: flex;
   align-items: center;
   flex-direction: column;
   position: relative;
   font-weight: 600;
   width: 15%;
}

#wizard .step.disabled>.router-link {
   cursor: not-allowed
}

#wizard .step .icon {
   width: 80px;
   height: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 2px dashed var(--mid-dark);
   background: #eee;
   border-radius: 50%;
   margin-bottom: 10px;
   color: var(--mid-dark);
   font-size: 30px;
   font-weight: 500;
}

#wizard .step.active .icon {
   border: 2px dashed #BD590B;
   background: #bd580b36;
   color: var(--orange);
}

#wizard .step.finish .icon {
   border: 2px dashed #BD590B;
   background: #bd580b;
   color: var(--white);
}

#wizard .step::after {
   content: "";
   width: 70%;
   height: 0px;
   border-top: 2px dashed var(--mid-dark);
   position: absolute;
   top: 35%;
   left: 47.5%;
   color: var(--white);
   vertical-align: sub;
   z-index: 2;
   transform: translate(50%, 50%);
}

#wizard .step.active::after, #wizard .step.finish::after {
   border-top: 2px dashed var(--orange);
}

#wizard .step:last-child:after {
   content: none;
}

#wizard .nav {
   display: flex;
   justify-content: center;
}

#wizard .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
   color: var(--green);
   background-color: var(--white);
   border: 1px solid var(--green);
}

#wizard .nav-pills .nav-link {
   color: var(--gray);
   border: 1px solid transparent;
   margin: 1rem;
   border-radius: 5px;
   font-weight: 600;
   background-color: var(--ultra-lite);
}

#wizard .nav-pills input.nav-link{
   width: 180px;
   height: 50px;
   margin: 2rem 1rem;
   z-index: 1;
   position: relative;
}
#wizard .nav-pills input.nav-link::after{
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   font-size: 18px;
   background: var(--ultra-lite);
   border-radius: 5px;
   border: 1px solid var(--ultra-lite);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 0;
}
#wizard .nav-pills input.nav-link.active::after{
   background: white;
   border: 1px solid var(--green);
}
#wizard .nav-pills input.nav-link#pills-comprehensive-tab::after{
   content: "comprehensive";
}
#wizard .nav-pills input.nav-link#pills-TPL-tab::after{
   content: "TPL";
}


#wizard .step.finish, #wizard .step.active {
   opacity: 1;
}

/* Mark input boxes that gets an error on validation: */
#wizard input {
   transition: all 0.3s;
}

#wizard .invalid {
   background-color: #ffdddd !important;
}

#wizard .sorted-by {
   display: flex;
   width: 90%;
   margin-bottom: 3rem;
   align-items: center;
}

#wizard .sorted-by .item {
   padding: 1rem;
}

#wizard .sorted-by .item h6 {
   font-size: 20px;
   font-weight: 700;
}

#wizard .card {
   position: relative;
   display: flex;
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
   background-color: #fff;
   background-clip: border-box;
   border: 1px solid var(--lite);
   border-radius: 15px;
   box-shadow: 0px 0px 17px -14px #000;
}

#wizard .card .card-img-top {
   display: flex;
   align-items: flex-start;
   padding: 2rem 1rem;
   width: 90%;
   border-bottom: 1px solid var(--lite);
   margin: auto;
}

#wizard .card .card-img-top img {
   width: 30%;
   margin-right: 1rem;
}

#wizard .card .card-img-top h6 {
   font-size: 18px;
   font-weight: 700;
   margin: 5px 0;
}

#wizard .card .card-img-top span {
   font-size: 16px;
   color: var(--mid-dark);
}

#wizard .card .card-body>ul>li {
   margin: 0.5rem 0;
   padding: 0 1rem;
}

#wizard .card .card-body {
   padding: 1rem 0;
}

#wizard .card .card-body>ul>li span:first-child {
   font-size: 16px;
   font-weight: 600;
   color: var(--mid-dark);
   margin-right: 10px;
}

#wizard .card .card-body>ul>li span:last-child {
   font-size: 18px;
   font-weight: 700;
   color: var(--green);
}

#wizard .card .card-body>ul li:last-child {
   text-align: center;
   margin: 2rem 0;
   padding: 1rem;
   background: var(--ultra-lite);
}

#wizard .card .card-body .padge {
   display: flex;
   align-items: center;
   padding: 0.6rem 2rem;
   background: #bd590b24;
   width: fit-content;
   border: 1px dashed var(--orange);
   border-radius: 7px;
   margin: 2rem auto 1rem;
   color: var(--orange);
}

#wizard .card .card-body .padge img {
   width: 30px;
   margin-right: 10px;
}

#wizard .card .card-footer {
   padding: 0;
   border-top: 0px;
}

#wizard .card .card-footer .custom-btn {
   width: 100%;
   height: 60px;
   border-radius: 0 0 15px 15px;
}

#wizard .payment-tab .payment-img {
   border-radius: 5px;
   width: 200px;
}

.buy-package-modal .tab-content {
   padding: 0%;
   background-color: var(--white);
   border-radius: 15px;
   display: flex;
   flex-direction: row;
}

.buy-package-modal .modal-header {
   border-bottom: 0px solid #dee2e6;
   padding: 1rem 2rem;
}

.buy-package-modal .modal-content {
   border-radius: 20px;
   overflow: hidden;
}

.buy-package-modal .modal-body {
   padding: 0;
}

.buy-package-modal .modal-body .nav .nav-item {
   flex: 1;
}

.buy-package-modal .modal-body .nav .nav-link {
   color: var(--dark);
   background: #bd590b24;
   padding: 1rem 0.5rem;
   border: none;
   border-radius: 0px;
   width: 100%;
   white-space: nowrap;
}

.buy-package-modal .modal-body .nav .nav-link.active {
   color: var(--white);
   background: var(--orange);
   padding: 1rem;
   border: none;
   border-radius: 0px;
   ;
}

.buy-package-modal .modal-body .tab-pane {
   padding: 1rem;
}

.buy-package-modal .card {
   position: relative;
   display: flex;
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
   background-color: var(--ultra-lite);
   border: 0px solid rgba(0, 0, 0, .125);
   border-radius: 0;
}

.buy-package-modal .card .card-img-top {
   display: flex;
   padding: 2rem 0 0;
   width: 90%;
   margin: auto;
}

.buy-package-modal .card .card-img-top img {
   width: 70px;
   height: 70px;
   margin-right: 1rem;
}

.buy-package-modal .card .card-img-top h6 {
   font-size: 18px;
   font-weight: 700;
   margin: 5px 0;
}

.buy-package-modal .card .card-img-top span {
   font-size: 16px;
   color: var(--mid-dark);
}

.buy-package-modal .card .padge {
    display: flex;
    align-items: center;
    padding: 0rem;
    background: transparent;
    width: fit-content;
    border: 0px dashed var(--orange);
    border-radius: 7px;
    margin: 0 auto 0rem;
    color: var(--orange);
}

.buy-package-modal .card .padge img {
   width: 30px;
   margin-right: 10px;
}

.buy-package-modal .card .card-body>ul>li {
   margin: 0.5rem 0;
   padding: 0 1rem;
}

.buy-package-modal .card .card-body {
   padding: 1rem 0 2rem 0;
   display: flex;
   flex-direction: column;
}

.buy-package-modal .card .card-body>ul>li span:first-child {
   font-size: 16px;
   font-weight: 600;
   color: var(--mid-dark);
   margin-right: 10px;
}

.buy-package-modal .card .card-body>ul>li.tot-Amount span{
   font-size: 16px;
   font-weight: 600;
   color: var(--green);
}
.buy-package-modal .card .card-body>ul>li.coupon-Amount span{
   font-weight: 700;
   color:white;
}

.buy-package-modal .card .card-body>ul>li.coupon-Amount span.price_after_coupon{
   font-size: 18px;
   font-weight: 700;
   color:wheat;
}

.buy-package-modal .card .card-body>ul li.pre-Amount {
   text-align: center;
   margin: 0rem auto 1rem;
   padding: 0.5rem;
   background: var(--white);
   width: 75%;
   border-radius: 5px;
}

.buy-package-modal .card .card-body>ul li.tot-Amount {
   text-align: center;
   margin: 0rem auto 1rem;
   padding: 0.5rem;
   background: var(--white);
   width: 75%;
   border-radius: 5px;
   border: 1px dashed var(--green);
}
.buy-package-modal .card .card-body>ul li.coupon-Amount {
   text-align: center;
   margin: 0rem auto 2rem;
   padding: 0.5rem;
   background: var(--orange);
   width: 75%;
   border-radius: 5px;
   border: 1px dashed var(--orange);
}

.buy-package-modal .card .card-body .custom-btn {
   width: 75%;
   margin: auto;
   ;
}

#wizard2>.tab2 {
   display: none;
}

#wizard2 h1 {
   text-align: center;
}


/* Make circles that indicate the steps of the form: */
.step-container {
   width: 100%;
   margin: 0 auto 80px;
   border-top: 1px solid var(--light);
   display: flex;
   justify-content: space-between;
   align-items: center;
   text-align: center;
}

#wizard2 .step2, #wizard2 .step2:disabled {
   padding: 20px 0;
   border: none;
   color: var(--dark);
   display: flex;
   align-items: center;
   flex-direction: column;
   position: relative;
   font-size: 18px;
   font-weight: 700;
}

#wizard2 .step2::after {
   content: "";
   font-size: 22px;
   width: 100%;
   border-bottom: 2px dashed var(--mid-dark);
   position: absolute;
   top: 0px;
   left: 90%;
   padding: 0.5rem 0;
   color: var(--mid-dark);
   z-index: 2;
   transform: translate(50%, -30%);
}

#wizard2 .step2:nth-child(1):after {
   content: "01";
}

#wizard2 .step2:nth-child(2):after {
   content: "02";
}

#wizard2 .step2.active::after, #wizard2 .step2.finish::after {
   color: var(--orange);
   border-bottom: 2px dashed var(--orange);
}

#wizard2 .step2:last-child:after {
   content: none;
}

#wizard .step.disabled>.router-link {
   cursor: not-allowed
}

#wizard2 .nav {
   display: flex;
   justify-content: center;
}

#wizard2 .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
   color: var(--green);
   background-color: var(--white);
   border: 1px solid var(--green);
}

#wizard2 .nav-pills .nav-link {
   color: var(--gray);
   border: 1px solid transparent;
   margin: 1rem;
   border-radius: 5px;
   font-weight: 600;
}

#wizard2 .step2.finish, #wizard2 .step2.active {
   color: var(--orange);
}

/* Mark input boxes that gets an error on validation: */
#wizard2 input {
   transition: all 0.3s;
}

#wizard2 .invalid {
   background-color: #ffdddd !important;
}

#wizard .summary-tab .list-info {
   margin-bottom: 3rem;
}

#wizard .summary-tab .list-info h5 {
   color: var(--orange);
   font-size: 18px;
   margin-bottom: 1rem;
   font-weight: 700;
}

#wizard .summary-tab .list-info img {
   width: 70px;
   height: 70px;
   margin-right: 6px;
}

#wizard .summary-tab .list-info h6 {
   font-size: 16px;
   font-weight: 700;
   color: var(--mid-dark);
}

#wizard .summary-tab .list-info span {
   font-size: 14px;
   font-weight: 300;
   color: var(--mid-dark);
}

#wizard .summary-tab .list-info li {
   margin-bottom: 10px;
}

#wizard .summary-tab .list-info li>span:first-child {
   font-size: 15px;
   font-weight: 700;
   color: var(--mid-dark);
}

#wizard .summary-tab .list-info li>span:last-child {
   font-size: 15px;
   font-weight: 400;
   color: var(--mid-dark);
}


.my-insurance .item {
   padding: 2rem 4rem;
   background-color: var(--ultra-lite);
   border-radius: 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 2rem;
}

.my-insurance .item>div>img {
   width: 100px;
   height: 100px;
   margin-right: 3rem;
}

.my-insurance .item ul {
   display: flex;
}

.my-insurance .item li {
   margin: 0rem 2rem 1rem 0;
}

.my-insurance .item li>span:first-child {
   font-size: 15px;
   font-weight: 700;
   color: var(--mid-dark);
}

.my-insurance .item li>span:last-child {
   font-size: 15px;
   font-weight: 400;
   color: var(--mid-dark);
}

.my-insurance .item .padge {
   display: flex;
   align-items: center;
   padding: 0.6rem 2rem;
   background: #bd590b24;
   width: fit-content;
   border: 1px dashed var(--orange);
   border-radius: 7px;
   color: var(--orange);
}

.my-insurance .item .padge img {
   width: 30px;
   margin-right: 10px;
}

.my-insurance .item a {
   width: 50px;
   height: 50px;
   font-size: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #4b77223f;
   color: var(--green);
   border: 1px dashed var(--green);
   border-radius: 5px;
   transition: all 0.3s;
}

.my-insurance .item a:hover {
   background-color: var(--green);
   color: var(--white);
   border: 1px solid var(--green);
}


.my-condation .item {
   padding: 1.5rem;
   background-color: var(--ultra-lite);
   border-radius: 10px;
   display: flex;
   margin-bottom: 2rem;
}

.my-condation .item svg {
   font-size: 20px;
   color: VAR(--green);
   margin: 5px 15px 0 0;
}

.my-condation .item p {
   font-size: 16px;
   color: VAR(--mid-dark);
}

section.contact-us h6 {
   font-size: 18px;
   line-height: 30px;
   font-weight: 700;
   margin-bottom: 2rem;
   width: 75%;
}

section.contact-us form {
   padding: 2rem 0;
   display: flex;
   flex-direction: column;
   align-items: center;
}


.contact-us .contacts {
   padding: 80px 0;
}

.contact-us .contacts .item {
   text-align: center;
   margin-bottom: 30px;
}

.contact-us .contacts .item span {
   width: 55px;
   height: 55px;
   background: var(--orange);
   font-size: 24px;
   color: var(--white);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: auto;
   padding: 10px;

}

.contact-us .contacts .item h4 {
   font-size: 20px;
   font-weight: 700;
   margin: 10px 0;
}

.contact-us .contacts .item p , .contact-us .contacts .item p> a{
   font-size: 16px;
   color: var(--mid-dark);
   transition: all 0.3s;
}

.contact-us .contacts .item p> a:hover{
   font-size: 16px;
   color: var(--orange);
}

.service-advantages .item {
   text-align: center;
   margin-bottom: 30px;
}

.service-advantages .item span {
   width: 60px;
   height: 60px;
   background: var(--green);
   font-size: 24px;
   color: var(--white);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: auto;
   padding: .8rem;

}

.service-advantages .item h4 {
   font-size: 20px;
   font-weight: 700;
   margin: 25px 0 15px;
}

.service-advantages .item p {
   font-size: 16px;
   color: var(--mid-dark);
   line-height: 30px;
}

.service-advantages .item span.num {
   width: unset;
   height: unset;
   background: transparent;
   font-size: 30px;
   color: var(--gray);
}

.notifications h5 {
   font-size: 20px;
   margin: 0 0 3rem 0;
   font-weight: 700;
   line-height: 0;
}

.notifications h5>span {
   vertical-align: baseline;
   background: var(--orange);
   color: var(--ultra-lite);
   border-radius: 50%;
   font-size: 18px;
   padding: 5px 8px;
   line-height: 0;
}

.notifications .item {
   padding: 1.5rem;
   background-color: var(--ultra-lite);
   border-radius: 10px;
   display: flex;
   justify-content: space-between;
   margin-bottom: 2rem;
   border: 1px solid transparent;
   transition: all 0.3s;
}

.notifications .item:hover {
   border: 1px solid var(--green);
}

.notifications .item img {
   width: 80px;
   height: 80px;
   margin-right: 1rem;
   border-radius: 10px;
}

.notifications .item h6 {
   font-size: 20px;
   margin: 0.4rem 0;
}

.notifications .item p {
   font-size: 16px;
   color: var(--mid-dark);
}

.notifications .item span {
   font-size: 16px;
   color: var(--mid-dark);
   white-space: nowrap;
}

.profile {
   padding: 20px 40px 40px;
   background: var(--ultra-lite);
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 14rem;
   position: relative;
   border-radius: 15px;
}

.profile .art-img {
   transform: translateY(40px);
}

.profile .edit-profile-btn {
   color: var(--orange);
   font-size: 18px;
   padding: 0.7rem 2rem;
   background: #bd590b24;
   border: 1px solid var(--orange);
   font-weight: 700;
   border-radius: 5px;
   position: absolute;
   right: 2rem;
   top: 2rem;
   transition: all 0.3s;
}

.profile .edit-profile-btn:hover {
   color: var(--white);
   background: var(--orange);
   border: 1px solid var(--orange);
}

.profile .profile-header {
   text-align: center;
   transform: translateY(-110px);
}

.profile .profile-header img {
   height: 180px;
   border-radius: 50%;
}
.profile .profile-pic-icon {
   position: absolute;
   top: calc(100% - 40px);
   left: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   z-index: 3;
   background-color: var(--orange);
   color: #FFF;
   transition: .2s;
   border: 4px solid var(--orange);
   font-size: 20px;
   border-radius: 50%;
}
.profile .profile-pic{
   border: 1px solid var(--orange);
   border-radius: 50%;
}

.profile .profile-pic input{
   cursor: pointer;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   z-index: 10;
   opacity: 0;
}


.profile .profile-header h5 {
   font-size: 22px;
   font-weight: 700;
   color: var(--orange);
   margin: 1rem 0 0.4rem 0;
}

.profile .profile-header p {
   font-size: 18px;
   color: var(--mid-dark);
}


.profile .edit-profile-pic {
   position: relative;
   width: 150px;
   height: 28px;
   margin: 1rem;
   cursor: pointer;
}

.profile .edit-profile-pic input {
   position: absolute;
   z-index: 1;
   width: 100%;
   top: 0;
   right: 0;
   opacity: 0;
   cursor: pointer;
}

.profile .edit-profile-pic h5 {
   position: absolute;
   z-index: 0;
   margin: 0;
}

.profile .form-control {
   font-size: 1.1rem;
   border: 1px solid var(--lite);
   padding: 10px 40px 10px 15px;
}

.change-pass-btn {
   background: transparent;
   color: var(--orange);
   font-size: 18px;
   font-weight: 700;
}

.sign-in-up-modal .modal-body {
   padding: 2rem 4rem;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.sign-in-up-modal h3 {
   text-align: center;
   font-weight: 700;
   margin-bottom: 2rem;
}

.vir-form {
   margin: 0 0 2rem 0;
}

.vir-input {
   text-align: center;
   font-size: 30px;
   line-height: 0;
   margin: 0 0.5rem;
}

.sign-in-btn {
   font-size: 18px;
   color: var(--orange);
   background: transparent;
   padding: 0;
}

section.comming-soon {
   background: var(--green);
   height: 40vh;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--white);
}

section.comming-soon h2 {
   font-size: 42px;
}

.toggle-side-outher-blogs {
   display: none;
   position: fixed;
   top: 40%;
   right: 0;
   background: var(--orange);
   color: var(--white);
   padding: 10px 15px;
   font-size: 24px;
   border-radius: 5px 0 0 5px;
}




.btn-login.load{
   position: relative;
}
.btn-login.load::after {
    content: "";
    position: absolute;
    top: 30%;
    right: 42%;
    line-height: 0;
    transform: translate(-50% , -50%);
    color: var(--white);
    font-size: 20px;
    z-index: 9;
    width: 25px;
    height: 25px;
    border: 4px dotted #fff;
    border-radius: 50%;
    animation-name: spin-add-cart;
    animation-duration: 1100ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transition: none;
}
.btn-login.load:hover::after{
    content: "";
    position: absolute;
    top: 30%;
    right: 42%;
    line-height: 0;
    transform: translate(-50% , -50%);
    color: var(--white);
    font-size: 20px;
    z-index: 9;
    width: 25px;
    height: 25px;
    border: 4px dotted #fff;
    border-radius: 50%;
    animation-name: spin-add-cart;
    animation-duration: 1100ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
     transition: none;
}
.btn-login.load::before{
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   color: var(--white);
   background: #bd590bd4;
   font-size: 20px;
   border-radius: 5px;
   z-index: 9;
   transition: none;
}
.custom-btn.load{
       transition: none;
}
@keyframes spin-add-cart {
   from {
       transform:rotate(0deg);
   }
   to {
       transform:rotate(360deg);
   }
}


.print-quotation{
    text-align: center;
    margin-bottom: 0;
    font-size: 14px;
    color: var(--white);
    width: 100%;
    padding: 0.5rem;
    background: #224600;
}
.print-quotation:hover{
    color: var(--white);
}
.buy-package-modal .card-body > div{
    display: flex;
    align-items: center;
    justify-content: center;
}
.buy-package-modal .card-body > div > img{
        width: 30px;
    margin-right: 10px;
}
.buy-package-modal .card-body > div > span{
    color: var(--orange);
}


.buy-package-modal .applay-copoun{
display: flex;
    align-items: center;
    border-radius: 35px;
    border: 1px solid var(--orange);
    border-right: 2px;
    overflow: hidden;
    padding: 0;
    width: 80%;
    margin: 1rem auto 0rem;
}

.buy-package-modal .applay-copoun input{
        width: 75%;
    padding: 5px 10px 5px 20px;
    border-right: 0;
    font-size: 14px;
}
.buy-package-modal .applay-copoun input::placeholder{
    font-size: 14px;
}
.buy-package-modal .applay-copoun button{
        width: 25%;
    background: var(--orange);
    color: var(--white);
    font-size: 12px;
    border: 0;
    outline: 0;
    height: 35px;
}
.buy-package-modal .applay-copoun button.load::after {
    content: "";
    position: absolute;
    top: 25%;
    right: 35%;
    width: 20px;
    height: 20px;
    border: 3px dotted #fff;
    transition: none;
}



footer .copyrights {
   padding: 1rem 0;
   color:#000;
}

footer .copyrights>div {
   display: flex;
   justify-content: space-between;
}

footer .copyrights h6 {
   font-size: 16px;
   font-weight: 500;
}

footer .copyrights img {
   width: 45px;
   margin: 10px;
}

.summary-tab{
    border-radius: 20px;
    padding: 2rem;
    background: #fcfcfc;
    margin-bottom: 100px;
}
.summary-tab .list-info h5{
    color: var(--green);
    border-bottom: 3px solid;
    padding-bottom: 10px;
    margin-bottom: 1rem;
    width: max-content;
}
.summary-tab .list-info ul li{
    line-height: 2;
    padding-left: 20px;
    position: relative;
}
.summary-tab .list-info ul li:before{
    content:'';
    position: absolute;
    top: 15px;
    left: 0px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--orange);
}





@media (max-width: 1395px) {
   #wizard2 .step2::after {
      width: 80%;
   }
}


@media (max-width: 1200px) {
   #wizard2 .step2::after {
      top: 0px;
      left: 70%;
   }

   #wizard .card .card-img-top {
      display: flex;
      align-items: flex-start;
      padding: 1rem 0rem;
   }

   #wizard .card .card-body>ul>li span:first-child {
      font-size: 12px;
   }

   #wizard .card .card-body>ul>li span:last-child {
      font-size: 14px;
      font-weight: 700;
   }

   #wizard .card .card-img-top img {
      width: 30%;
      margin-right: 0.5rem;
   }

   #wizard .card .card-img-top h6 {
      font-size: 15px;
   }

   #wizard .card .card-img-top span {
      font-size: 12px;
   }
}

@media (max-width: 991px) {
   nav .nav-links {
      display: none;
   }

   nav .toggle-side-menu {
      display: block;
   }

   header .header-content .content {
      width: 50%;
      margin-bottom: 20px;
   }

   header .header-content .content h2 {
      font-size: 36px;
      color: var(--white);
      margin-bottom: 15px;
      font-weight: 700;
   }

   header .header-content .content p {
      font-size: 16px;
   }

   header .owl-carousel .owl-dots .owl-dot {
      width: 10px;
      height: 10px;
   }
   
   #wizard .step .icon {
    width: 65px;
    height: 65px;
   }

   #wizard .step::after {
      content: "";
      width: 40%;
      top: 35%;
      left: 76%;
   }

   #wizard2 .step2 {
      font-size: 16px;
   }

   #wizard2 .step2::after {
      font-size: 20px;
      width: 40%;
      top: 0px;
      left: 90%;
   }

   .buy-package-modal .modal-body .nav .nav-link {
      font-size: 12px;
   }
}


@media (max-width: 768px) {
   .boardcrumb .content h2 {
      font-size: 30px;
   }

   .boardcrumb .content a {
      font-size: 19px
   }

   .boardcrumb .content span {
      font-size: 19px;
   }

   header .web-img {
      display: none;
   }

   header .mob-img {
      display: block;
   }

   header .header-content .content {
      width: 50%;
      margin-bottom: 20px;
   }

   header .header-content .content h2 {
      font-size: 26px;
      color: var(--white);
      margin-bottom: 15px;
      font-weight: 700;
   }

   header .header-content .content p {
      font-size: 16px;
   }

   header .owl-carousel .owl-dots .owl-dot {
      width: 10px;
      height: 10px;
   }

   .custom-btn {
      font-size: 16px;
      padding: 10px 30px;
   }

   .video-container {
      position: relative;
      width: 85%;
      margin: auto;
   }

   .video-container>span {
      left: -20px;
      padding: 8px 10px;
      font-size: 10px;
   }

   .video-container>span::before {
      border: 10px solid var(--orange);
      border-left-color: transparent;
      border-top-color: transparent;
   }

   .about-us-section .section-title h6 {
      font-size: 23px;
   }
.about-us-section .about-img{
    height:350px;
    border-radius:20px;
    filter: brightness(0.6);
}
   .section-title h5 {
      font-size: 20px;
   }

   .section-title h6 {
      font-size: 23px;
   }

   section {
      margin-bottom: 100px;
   }

   .video-container .play-icon, .video-container .pause-icon {
      width: 50px;
      height: 50px;
      padding: 6px;
   }

   .video-container .play-icon>div, .video-container .pause-icon>div {
      padding: 6px;
   }

   .video-container .play-icon>div>div, .video-container .pause-icon>div>div {
      padding: 6px;
      font-size: 14px;
   }

   .video-container .play-icon>div>div i, .video-container .pause-icon>div>div i {
      font-size: 22px;
   }

   .why-us-section .child:nth-child(odd) {
      padding-top: 0;
   }

   .why-us-section .child {
      padding-top: 20px;
   }

   footer .bottom-nav ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
   }

   .profile {
      padding: 20px 0px 40px;
   }

   .profile .edit-profile-btn {
      right: 50%;
      top: 12rem;
      transform: translateX(50%);
   }

   .my-insurance .item {
      flex-direction: column;
   }

   .my-insurance .item>div {
      flex-direction: column;
   }

   .my-insurance .item>div>img {
      margin: 1rem auto;
   }

   .my-insurance .item ul {
      display: flex;
      flex-direction: column;
   }

   .my-insurance .item li {
      margin: 0rem 0rem 1rem 0;
      text-align: center;
   }

   .my-insurance .item .padge {
      margin: 1rem auto;
   }

   .my-insurance .item a {
      margin: 1rem 0
   }

   .toggle-side-outher-blogs {
      display: block;
   }

   section.contact-us h6 {
      width: 100%;
   }

   .steps-container {
      width: 100%;
      margin: 0 auto 30px;
      border-top: 1px solid var(--light);
      display: flex;
      justify-content: space-around;
      text-align: center;
   }

   #wizard .step {
      font-size: 10px;
   }

   #wizard .step .icon {
      width: 50px;
      height: 50px;
      font-size: 20px;
   }

   #wizard {
      padding: 15px;
   }

   #wizard .step::after {
      content: none;
   }

   .form-label {
      font-size: 13px;
   }

   #wizard .nav-pills .nav-link {
      font-size: 12px;
   }

   #wizard .card .card-img-top img {
      width: 30%;
      margin-right: 0.5rem;
   }

   #wizard .card .card-img-top h6 {
      font-size: 13px;
   }

   #wizard .card .card-img-top span {
      font-size: 10px;
   }

   #wizard .card .card-body>ul>li span:first-child {
      font-size: 12px;
   }

   #wizard .card .card-body>ul>li span:last-child {
      font-size: 13px;
   }

   #wizard .card .card-body>ul li:last-child {
      margin: 0rem 0;
   }

   #wizard .sorted-by .item {
      padding: 0.3rem;
   }

   #wizard2 .step2, #wizard2 .step2:disabled {
      font-size: 15px;
   }

   #wizard2 .step2:nth-child(1):after {
      content: none;
   }

   #wizard2 .step2:nth-child(2):after {
      content: none;
   }

   #wizard .card .card-img-top {
      padding: 1rem 1rem;
   }

   .sign-in-up-modal .modal-body {
      padding: 2rem 1rem;
   }
}

@media (max-width: 576px) {
   .nice-select {
      font-size: 14px;
      padding: 0 10px 0px;
      height: 40px;
   }

   .form-control {
      font-size: 14px;
      padding: 7px 15px;
   }

   .form-label {
      font-size: 13px;
      margin-bottom: 0rem;
   }

   .mb-5 {
      margin-bottom: 1.5rem !important;
   }

   nav {
      padding: 10px 0;
   }

   nav .logo {
      width: 150px;
   }

   header {
      position: relative;
      margin-bottom: 60px;
   }

   header .header-content .content {
      width: 90%;
      margin-bottom: 20px;
   }

   header .header-content .content h2 {
      font-size: 22px;
      color: var(--white);
      margin-bottom: 10px;
      font-weight: 500;
   }

   header .header-content .content p {
      font-size: 14px;
   }

   header .owl-carousel .owl-dots .owl-dot {
      width: 7px;
      height: 7px;
      margin: 3px;
   }

   header .owl-carousel .owl-dots .owl-dot.active {
      width: 25px;
   }
   .why-section .item img {
        width: 65px;
   }

   .custom-btn {
      font-size: 18px;
      padding: 5px 40px;
      height: 35px;
      width: 110px;
   }

   .custom-btn span {
      font-size: 14px;
   }

   nav .custom-btn {
      height: 40px;
      width: 90px;
   }

   nav .custom-btn span {
      font-size: 14px;
   }

   header .owl-carousel .owl-dots {
      width: 200px;
      position: absolute;
      left: 130px;
      top: 97%;
   }

   section {
      margin-bottom: 70px;
   }

   footer .bottom-nav ul>li>a {
      font-size: 15px;
   }

   footer .bottom-nav ul>li {
      margin-left: 7px;
      margin-right: 7px;
   }

   #scroll-top {
      bottom: 30px;
      right: 30px;
   }

   .notifications .item {
      padding: 1rem;
   }

   .notifications .item img {
      width: 40px;
      height: 40px;
      margin-right: 1rem;
      border-radius: 10px;
   }

   .notifications .item h6 {
      font-size: 16px;
      margin: 0 0 0.4rem 0;
   }

   .notifications .item p {
      font-size: 12px;
      color: var(--mid-dark);
   }

   footer h5 {
      margin-bottom: 20px;
   }

   footer .bottom-nav .logo {
      padding: 10px 10px;
   }

   #wizard2 .step2::after {
      content: none;
      font-size: 18px;
      width: 40%;
      top: 4px;
      left: 60%;
      padding: 0.2rem 0;
   }
    footer .copyrights>div {
      flex-direction: column;
   }
   footer .copyrights h6{
       font-size: 12px;
   }
   footer .copyrights img{
      margin-top: 5px;
   }
}