@import "../includes/rev-slider/css/settings.css";
@import "../includes/rev-slider/css/layers.css";
@import "../includes/rev-slider/css/navigation.css";
@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;300;400;500;600;700;800&display=swap");

:root {
    --primary-color: #e9204f;
    --secondary-color: #38a6c5;
    --first-color: #111;
    --second-color: #0060A5;
    --third-color: #007647;
    --text-color: #666;
    --border-color: #eee;
    --lite-white-color: #f9f9f9;
    --white-color: #fff;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
}

body {
    font-family: "Archivo", sans-serif;
    font-size: 15px;
    color: var(--first-color);
    overflow-x: hidden;
}


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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--tran-03);
}

a:hover {
    color: inherit;
}

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

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.block-link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.primary-btn {
    color: var(--white-color);
    padding: 10px 24px;
    font-size: 16px;
    display: inline-block;
    border: 1px solid transparent;
    background-color: var(--primary-color);
    border-radius: 50px;
    letter-spacing: 1px;
    transition: var(--tran-05);
}

.primary-btn:hover {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.primary-btn-two {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--second-color);
    color: var(--white-color);
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    transition: var(--tran-03);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.primary-btn-two:hover {
    color: var(--primary-color);
    box-shadow: 5px 5px var(--primary-color);
}

.primary-btn-two::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    z-index: -1;
    background-color: var(--lite-white-color);
    transition: var(--tran-03);
}

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

.desc {
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.3px;
    color: var(--text-color);
}
/*****************************

*	News Scrolling Start
******************************/
a {

  text-decoration: none;

}
.ticker-wrapper-h{
	display: flex;
	position: relative;
	overflow: hidden;
	border: 1px solid #1c6547;
}

.ticker-wrapper-h .heading{
	background-color: #1c6547;
	color: #fff;
	padding: 5px 10px;
	flex: 0 0 auto;
	z-index: 1000;
}
.ticker-wrapper-h .heading:after{
	content: "";
	position: absolute;
	top: 0;
	border-left: 20px solid #1c6547;
	border-top: 17px solid transparent;
	border-bottom: 15px solid transparent;
}


.news-ticker-h{
	display: flex;
	margin:0;
	padding: 0;
	padding-left: 90%;
	z-index: 999;

	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: tic-h;
	animation-duration: 30s;

}
.news-ticker-h:hover {
	animation-play-state: paused;
}

.news-ticker-h li{
	display: flex;
	width: 100%;
	align-items: center;
	white-space: nowrap;
	padding-left: 20px;
}

.news-ticker-h li a{
	color: #212529;
	font-weight: bold;
}

@keyframes tic-h {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}
	100% {
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

/* PRELOADER */

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

/* LOGO SPIN */
.logo-loader img{
    width:110px;
    animation: spinLogo 2s linear infinite;
}

/* SPIN ANIMATION */
@keyframes spinLogo{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

/* END PRELOADER */

/* Overlay */
#popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  display: none; /* hidden initially */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 15px;
}

/* Popup box */
.popup-box {
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: 90vh; /* prevent overflow on mobile */
  overflow: hidden;
  margin: auto;
  border-radius: 12px;
}

/* Image responsive */
#popup img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 0 25px #000;
  margin: 0 auto;
}

/* Close Button floating outside */
.close-btn {
  position: fixed; /* stays in top-right corner */
  top: 20px;
  right: 20px;
  background: #ff0000;
  color: #fff;
  border: none;
  font-size: 22px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000; /* above the popup */
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .popup-box {
    max-width: 95%;
  }
  .close-btn {
    width: 34px;
    height: 34px;
    font-size: 18px;
    top: 15px;
    right: 15px;
  }
}


/* Pop-up Closed */

.section-padding {
    padding: 55px 0;
}

.section-title {
    font-size: 40px;
    text-transform: capitalize;
    position: relative;
    display: inline-block;
    z-index: 1;
    font-weight: 800;
    color: var(--first-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.interior .section-title {
    font-family: "DM Serif Text", serif;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.interior .subtitle {
    font-family: "DM Serif Text", serif;
    margin-bottom: 20px;
    font-size: 20px;
    color: var(--first-color);
}

.interior .section-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 3px;
    background-color: var(--primary-color);
}

.interior .section-title::after {
    content: attr(data-title);
    position: absolute;
    color: rgba(210, 210, 210, 0.3);
    font-weight: 900;
    font-size: 90px;
    text-transform: uppercase;
    top: -40px;
    white-space: nowrap;
    letter-spacing: 3px;
    left: 0;
    z-index: -1;
}

.interior .section-title.text-center::before {
    left: 50%;
    transform: translateX(-50%);
}

.interior .section-title.text-center::after {
    left: 50%;
    transform: translateX(-50%);
}

.section-title span {
    position: absolute;
    right: -30px;
    bottom: -5px;
    z-index: -1;
    color: rgb(0 0 0 / 7%);
}

.section-title.text-center {
    display: block;
}

.section-title.text-center span {
    left: 50%;
    transform: translateX(-50%);
}

.bg-dot.primary {
    background-image: radial-gradient(var(--primary-color) 2px,
            transparent 2.5px);
    background-size: 0.75rem 0.75rem;
    opacity: 0.4;
}

.bg-line.primary {
    background: repeating-linear-gradient(-55deg,
            rgba(255, 255, 255, 0) 0.8px,
            var(--primary-color) 1.6px,
            var(--primary-color) 3px,
            rgba(255, 255, 255, 0) 3.8px,
            rgba(255, 255, 255, 0) 10px);
    opacity: 0.8;
}

.bg-lite {
    background-color: var(--lite-white-color);
}

.limit-width {
    max-width: 800px;
    width: 100%;
}

.limit-width.text-center {
    margin-left: auto;
    margin-right: auto;
}

.scrollTop {
    position: fixed;
    right: 0;
    bottom: 0;
    border: none;
    background-color: var(--first-color);
    color: var(--white-color);
    padding: 15px;
    width: 60px;
    padding-top: 20px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.scrollTop::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: auto;
    top: 0;
    width: 100%;
    height: 0;
    background-color: var(--primary-color);
    transition: var(--tran-04);
    z-index: -1;
}

.scrollTop:hover::after {
    height: 100%;
    bottom: 0;
    top: auto;
}

.scrollTop span {
    transform: rotate(90deg);
    display: inline-block;
    white-space: nowrap;
    letter-spacing: 2px;
    font-weight: 300;
    font-size: 16px;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: scale(0.8);
}

.modal.show .modal-dialog {
    transform: none;
}

.modal.show .modal-content {
    border: none;
}

.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 3px;
    background-color: var(--primary-color);
}

.modal-header {
    display: block;
    position: relative;
    text-align: center;
}

.modal-title {}

h5#exampleModalLabel {}

.designation {
    margin-bottom: 15px;
}

.modal-header .btn-close {
    position: absolute;
    right: 10px;
    top: 10px;
    background-image: none;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    opacity: 1;
}

.modal-header .btn-close i {
    display: flex;
}

.modal-body {}

.modal-body figure {
    position: relative;
    margin: 0;
    margin-right: 30px;
    z-index: 1;
    aspect-ratio: 1/1;
    max-width: 250px;
}

.modal-body figure::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 15px;
    width: calc(100% - 4px);
    height: calc(100% + 2px);
    background-color: var(--primary-color);
    z-index: -1;
    border-radius: 50%;
}

.modal-body figure::after {
    content: "";
    position: absolute;
    left: -2px;
    top: -2px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    background-color: var(--white-color);
    z-index: -1;
    border-radius: 50%;
}

.modal-body figure img {
    border-radius: 50%;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    max-width: 220px;
}

.modal-body .desc {}

.modal-body .social {
    display: flex;
    align-items: center;
}

.modal-body .social li {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9204f;
    color: var(--white-color);
    transition: var(--tran-04);
}

.modal-body .social li:nth-child(2n) {
    background-color: #ef3964;
}

.modal-body .social li:nth-child(3n) {
    background-color: #eb5477;
}

.modal-body .social li:nth-child(4n) {
    background-color: #ef6887;
}

.modal-body .social li:hover {
    background-color: #ef6887;
}

.modal-body .social li:nth-child(2n):hover {
    background-color: #eb5477;
}

.modal-body .social li:nth-child(3n):hover {
    background-color: #ef3964;
}

.modal-body .social li:nth-child(4n):hover {
    background-color: #e9204f;
}

.modal-body .social li a {
    display: flex;
}

.modal-body .social li:hover a {}

.mean-container a.meanmenu-reveal {
    width: 30px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 12px;
    padding-bottom: 16px;
}

.mean-container a.meanmenu-reveal span {
    background-color: var(--secondary-color);
    width: 100%;
    height: 2px;
    position: relative;
    transition: var(--tran-03);
}

.mean-container a.meanmenu-reveal span::after {
    content: "";
    position: absolute;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: var(--secondary-color);
    transition: var(--tran-03);
    top: 10px;
}

.mean-container a.meanmenu-reveal span::before {
    content: "";
    position: absolute;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: var(--secondary-color);
    transition: var(--tran-03);
    top: -10px;
}

.mean-container a.meanmenu-reveal.meanclose span {
    background-color: transparent;
}

.mean-container a.meanmenu-reveal.meanclose span::after {
    transform: rotate(-45deg);
    top: 0;
    width: calc(100% - 4px);
}

.mean-container a.meanmenu-reveal.meanclose span::before {
    transform: rotate(45deg);
    top: 0;
    width: calc(100% - 4px);
}

.mean-container .mean-bar {
    position: absolute;
    right: 12px;
    max-width: 300px;
    float: none;
    height: 100%;
    padding: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: fit-content;
}

.mean-container {
    position: relative;
}

.mean-container .mean-nav {
    float: none;
    background: var(--first-color);
    margin-top: 0;
    position: absolute;
    top: calc(100% - 1px);
    border-radius: 0 0 15px 15px;
    box-shadow: 0 20px 15px -20px rgb(0 0 0 / 7%);
    font-size: 14px;
    width: 300px;
}

.mean-container .mean-nav ul li a {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 14px 8%;
}

.mean-container .mean-nav ul li a.mean-expand {
    background: transparent;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid transparent !important;
    padding: 10px !important;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
    background: transparent;
}

.mean-expand::after {
    content: "\F4FE";
    font-size: 18px;
    font-family: "Bootstrap-icons";
}

.mean-expand.mean-clicked::after {
    content: "\F2EA";
}

/*=============== Header Css Start ===============*/
.header-section {
    position: relative;
    z-index: 9;
}

.header-section .top {
    color: var(--white-color);
    font-weight: 300;
    background-color: #0060A5;
}


.header-section .top .top-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-section .top .top-wrapper>* {}

.top-wrapper .left {}

.top-wrapper .left ul {
    display: flex;
    align-items: center;
}

.top-wrapper .left ul li {
    height: 35px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    transition: var(--tran-03);
}

.top-wrapper .left ul li:hover {
    color: var(--white-color);
    background-color: rgb(255 255 255 / 10%);
}

.top-wrapper .left ul li:hover a {
    color: var(--white-color);
}

.top-wrapper .left ul li:not(:first-child) {
    border-left: 1px solid rgb(255 255 255 / 15%);
}


.top-wrapper .left ul li a {
    display: inline-flex;
    column-gap: 8px;
    align-items: center;
}

.top-wrapper .left ul li a i {
    font-size: 18px;
}


.top-wrapper .middle ul {}

.top-wrapper .middle ul li {
    height: 35px;
    display: flex;
    align-items: center;
    border-left: 1px solid rgb(255 255 255 / 15%);
    border-right: 1px solid rgb(255 255 255 / 15%);
    padding: 0 10px;
    transition: var(--tran-03);
    column-gap: 8px;
}


.top-wrapper .middle ul li:hover {
    color: var(--white-color);
    background-color: rgb(255 255 255 / 10%);
}


.top-wrapper .right {}

.modal ul.social,
.top-wrapper .right ul {
    display: flex;
    align-items: center;
}

.modal ul.social {
    display: inline-flex;
    background-color: var(--primary-color);
    border-radius: 20px;
    overflow: hidden;
}

.modal ul.social li,
.top-wrapper .right ul li {
    padding-left: 10px;
    transition: var(--tran-03);
    padding-right: 10px;
}

.modal ul.social li {
    padding-left: 0;
    padding-right: 0;
}

.modal ul.social li:hover a {
    background-color: rgb(255 255 255 / 10%);
}

.modal ul.social li:hover,
.top-wrapper .right ul li:hover {
    color: var(--white-color);
    background-color: rgb(255 255 255 / 10%);
}

.modal ul.social li:hover a,
.top-wrapper .right ul li:hover a {
    color: var(--white-color);
}

.top-wrapper .right ul li:not(:last-child) {
    border-right: 1px solid rgb(255 255 255 / 15%);
    padding-right: 10px;
}


.modal ul.social li a,
.top-wrapper .right ul li a {
    display: flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
}


.modal ul.social li .icon,
.top-wrapper .right ul li .icon {
    width: 26px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal ul.social li .icon i,
.top-wrapper .right ul li .icon i {}

.modal ul.social li .label,
.top-wrapper .right ul li .label {
    white-space: nowrap;
    display: none;
}

.modal ul.social li i {
    padding-left: 5px;
    display: inline-flex;
}

.modal ul.social li a {
    color: var(--white-color);
    background-color: var(--primary-color);
    padding: 10px 15px;
}

.header-section .bottom {
    background-color: var(--white-color);
}

.header-section .bottom .bottom-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bottom-wrapper .logo {
    padding: 4px 15px;
    flex: 0 0 auto;
    max-width: 153px;
    position: relative;
    z-index: 1;
}

.bottom-wrapper .logo::before {
    content: "";
    position: absolute;
    right: -30px;
    top: 0;
    height: 100%;
    width: 2000px;
    background-color: var(--white-color);
    z-index: -1;
    background-color: transparent;
}

.bottom-wrapper .logo::after {
    content: "";
    position: absolute;
    background-image: url(../images/icons/heading_bg.png);
    width: 160px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    bottom: 5px;
    right: -20px;
    z-index: -1;
    visibility: hidden;
}

.bottom-wrapper .logo img {
    /* padding: 10px;
    padding-top: 6px; */
}

.bottom-wrapper #main-menu {}

.bottom-wrapper #main-menu ul {
    display: flex;
    align-items: center;
}

.bottom-wrapper #main-menu ul li {
    position: relative;
    transition: var(--tran-03);
    color: var(--white-color);
}

.bottom-wrapper #main-menu ul li.has-sub::after {
    content: "\F4FE";
    font-family: "Bootstrap-icons";
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 500;
    transition: var(--tran-04);
    color: var(--first-color);
}

.bottom-wrapper #main-menu ul li.has-sub:hover::after {
    color: var(--primary-color);
    content: "\F2EA";
}

.bottom-wrapper #main-menu ul li a {
    display: inline-block;
    padding: 26px 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;
    position: relative;
    color: var(--first-color);
}

.bottom-wrapper #main-menu>ul>li>a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: auto;
    width: 0;
    bottom: 20px;
    height: 1px;
    background-color: var(--primary-color);
    transition: var(--tran-05);
}

.bottom-wrapper #main-menu>ul>li:hover>a::after {
    left: auto;
    right: 15px;
    width: calc(100% - 30px);
}

.bottom-wrapper #main-menu>ul>li:hover>a {
    color: var(--primary-color);
}

.bottom-wrapper #main-menu ul li ul {
    display: block;
    position: absolute;
    top: 100%;
    background-color: var(--white-color);
    box-shadow: 6px 6px 25px rgb(0 0 0 / 5%);
    width: fit-content;
    min-width: 230px;

    transform: scaleY(0);
    transform-origin: top;
    transition: var(--tran-04);
    z-index: 9;
    visibility: hidden;
    opacity: 0;
}

.bottom-wrapper #main-menu>ul>li>ul::after {
    content: "";
    position: absolute;
    left: 30px;
    top: -7px;
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    background-color: var(--white-color);
    transition: var(--tran-02);
    visibility: hidden;
    opacity: 0;
    z-index: -1;
}

.bottom-wrapper #main-menu>ul>li:hover>ul::after {
    visibility: visible;
    opacity: 1;
}

.bottom-wrapper #main-menu ul li:hover ul {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
}

.bottom-wrapper #main-menu ul li ul li:hover {
    border-color: var(--secondary-color) !important;
}

.bottom-wrapper #main-menu ul li ul li:not(:last-child) {
    border-bottom: 1px solid #eee;
}

.bottom-wrapper #main-menu ul li ul li a {
    display: block;
    padding: 13px 25px;
    color: var(--text-color);
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
}

.bottom-wrapper #main-menu>ul>li>ul>li:hover>a {
    color: var(--white-color);
    background-color: var(--second-color);
    padding-left: 20px;
}

.header-section .bottom.sticky {
    box-shadow: 0 5px 15px rgba(0 0 0 / 0.1);
    -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
    position: fixed !important;
    left: 0;
    top: 0;
    width: 100%;
    transition: var(--tran-03);
    z-index: 99 !important;
    padding: 5px 0;
    background-color: var(--white-color) !important;
}

/*=============== Header Css End ===============*/

/*=============== Slider Section Css Start ===============*/
.single-slide {
    position: relative;
}

.slide-overlay {
    background: rgba(0, 0, 0, 0.35); /* semi-transparent dark overlay */
    padding: 20px 30px;
    border-radius: 8px;
    max-width: 500px;
}
.product-title {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    font-size: 1.1rem;
}

.slide-overlay h2 {
    font-weight: 700;
    font-size: 2rem;
}

.slide-overlay p {
    font-size: 1.2rem;
}

.arshigroup-slider .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 40px;
}

.arshigroup-slider .owl-dots .owl-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: var(--white-color);
    transition: var(--tran-04);
}

.arshigroup-slider .owl-dots .owl-dot.active {
    background-color: var(--second-color);
}

.arshigroup-slider .single-slide {
    height: 600px;
    position: relative;
}

.arshigroup-slider .single-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.arshigroup-slider .single-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 15s ease;
}

.arshigroup-slider .owl-item.active img {
    transform: scale(1.5);
}

.arshigroup-slider .owl-nav button {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    border: none !important;
    background-color: rgb(0 0 0 / 30%) !important;
    color: var(--white-color) !important;
    width: 35px;
    height: 35px;
    font-size: 18px !important;
    z-index: 99;
}

.arshigroup-slider .owl-nav button.owl-next {
    left: auto;
    right: 30px;
}

/*=============== Slider Section Css End ===============*/

/*=============== About Section Css Start ===============*/
.about-section {
    padding-top: 80px;
    padding-bottom: 100px;
    overflow: hidden;
}

.about-section .about-img {
    position: relative;
    z-index: 1;
    margin-left: 50px;
    display: inline-block;
}

.about-section .about-img .bg-dot {
    width: 145px;
    height: 145px;
    position: absolute;
    right: -60px;
    bottom: -70px;
    z-index: -1;
}

.about-section .about-img .wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg,
            #18253e 1%,
            rgba(255, 255, 255, 0) 93%);
    z-index: 2;
}

.about-section .about-img img {
    border-radius: 15px;
    display: block;
    object-fit: cover;
}

.about-section .about-img .wrapper {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    transform: translate(-40px, 40px);
}

.about-section .about-img .video-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.about-section .about-img .video-btn i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 65px;
    color: var(--white-color);
    border: 2px solid var(--white-color);
    height: 80px;
    width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 3;
    padding-left: 8px;
    transition: var(--tran-04);
}

.about-section .about-img .video-btn:hover i {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/*=============== About Section Css End ===============*/


.pa-10{
    padding: 10px;
}

@keyframes scale {
    0% {
        transform: scaleX(0) translateX(-50%);
    }

    50% {
        transform: scaleX(1) translateX(-50%);
    }

    100% {
        transform: scaleX(0) translateX(-50%);
        transform-origin: right;
    }
}

.concern-carousel .single-item .single-concern .item-title::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 2px;
    background-color: var(--primary-color);
    left: 50%;
    transform-origin: left;
    bottom: 2px;
    border-radius: 5px;
    transform: translateX(-50%);
    animation: scale 4s infinite;
}

.concern-carousel .owl-item:nth-child(2n) .single-item .single-concern .item-title::after {
    animation-delay: 2s;
}

.concern-carousel .owl-item:nth-child(3n) .single-item .single-concern .item-title::after {
    animation-delay: 4s;
}

.concern-carousel .single-item .single-concern .exerp {
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 15px;
    margin-bottom: 12px;
}

.concern-carousel .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
}

.concern-carousel .owl-dots .owl-dot {
    width: 20px;
    height: 5px;
    background-color: var(--white-color);
    border-radius: 10px;
    transition: var(--tran-04);
}

.concern-carousel .owl-dots .owl-dot.active {
    background-color: var(--primary-color);
    width: 45px;
}

.concern-carousel .owl-nav {}

.concern-carousel .owl-nav button {}

.concern-carousel .owl-nav button.owl-next {}

/*=============== Sister Concern Section Css End ===============*/

/*=============== Works Section Css Start ===============*/
.works-section {}

.works-section .controls {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.works-section .controls .control {
    border: none;
    background-color: var(--first-color);
    color: var(--white-color);
    padding: 8px 16px;
    font-size: 16px;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-family: sans-serif;
    transition: var(--tran-03);
    margin: 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.masonry {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    orphans: 1;
    widows: 1;
}

.masonry>* {
    display: inline-block;
    width: 100%;
    margin-bottom: .75rem;
}

.masonry>* img {
    aspect-ratio: auto !important;
}

.works-section .controls .control:hover,
.works-section .controls .control.mixitup-control-active {
    background-color: var(--primary-color);
}

.works-section .mix-filter {}

.works-section .mix-filter .mix {}

.works-section .mix-filter .gal-item {}

.works-section .mix-filter .gal-item a {
    position: relative;
    display: block;
    border-radius: 6px;
    overflow: hidden;
}

.works-section .mix-filter .gal-item a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #18253e 1%, rgba(255, 255, 255, 0) 93%);
    background-size: auto 150%;
    background-position: top;
    transition: var(--tran-04);
}

.works-section .mix-filter .gal-item:hover a::after {
    background-position: bottom;
}

.works-section .mix-filter .gal-item img {
    width: 100%;
    aspect-ratio: 1/0.66;
    object-fit: cover;
    border-radius: 6px;
}

/*=============== Works Section Css End ===============*/

/*=============== Client Feedback Section Css Start ===============*/
..client-feedback-section {}

.team-carousel {}

.team-carousel .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.team-carousel .owl-dots .owl-dot {
    width: 12px;
    height: 12px;
    background-color: var(--white-color);
    border-radius: 50%;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    transition: var(--tran-04);
}

.team-carousel .owl-dots .owl-dot.active {
    background-color: var(--primary-color);
}

.team-carousel .single-item {
    margin: 10px;
    position: relative;
    padding-top: 60px;
}

.team-carousel .single-team {
    position: relative;
    background-color: var(--white-color);
    padding: 20px;
    padding-top: 60px;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
    border-radius: 15px;
    text-align: center;
}

.team-carousel .single-team figure {
    margin: 0;
    overflow: hidden;
    width: 120px;
    position: absolute;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 3px solid var(--white-color);
}

.team-carousel .single-team figure img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: var(--tran-05);
    transform-origin: top;
}

.team-carousel .single-team:hover figure img {
    transform: scale(1.2);
}

.team-carousel .single-team figure .social {
    position: absolute;
    right: -30px;
    top: 0;
    transition: var(--tran-04);
}

.team-carousel .single-team:hover figure .social {
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.team-carousel .single-team figure .social li {
    color: var(--white-color);
    transition: var(--tran-04);
    width: 30px;
    height: 31px;
}

.team-carousel .single-team figure .social li:hover {
    width: fit-content;
}

.team-carousel .single-team figure .social li:hover a {
    background-color: var(--first-color);
    border-color: var(--first-color);
}

.team-carousel .single-team figure .social li a {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 6px;
    justify-content: flex-end;
    height: 30px;
    background-color: rgb(255 255 255 / 30%);
    background-color: var(--primary-color);
    transition: var(--tran-05);
}

.team-carousel .single-team figure .social li .label {
    display: none;
    white-space: nowrap;
    padding-left: 6px;
    text-transform: capitalize;
}

.team-carousel .single-team figure .social li i {
    padding-left: 8px;
}

.team-carousel .single-team .item-title {
    font-size: 18px;
    padding: 10px 15px;
    margin-bottom: 0;
    padding-bottom: 0;
    transition: var(--tran-04);
}

.team-carousel .single-team:hover .item-title a {
    color: var(--primary-color);
}

.team-carousel .single-team .designation {
    margin-bottom: 0;
    padding: 10px 15px;
    padding-top: 0;
    font-size: 14px;
}

.team-carousel .single-team .desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 15px;
}

.team-carousel .single-team .view-btn {
    color: var(--white-color);
    background-color: var(--primary-color);
    padding: 7px 15px;
    border-radius: 20px;
    font-size: 14px;
    transition: var(--tran-04);
}

.team-carousel .single-team .view-btn:hover {
    background-color: var(--second-color);
}

.client-feedback-section .clients-carousel {
    padding-top: 8px;
}

.client-feedback-section .clients-carousel .single-item {
    padding: 0 3px;
    cursor: pointer;
}

.client-feedback-section .clients-carousel .single-client {
    background-color: var(--white-color);
}

.client-feedback-section .clients-carousel .single-item img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    transition: var(--tran-04);
    max-width: 160px;
    margin: auto;
    width: 100%;
    padding: 12px 0;
}

.client-feedback-section .clients-carousel .single-item img:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

.client-feedback-section .clients-carousel .slick-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    margin-top: 15px;
}

.client-feedback-section .clients-carousel .slick-dots li button {
    border: none;
    background-color: var(--white-color);
    color: var(--primary-color);
    width: 24px;
    height: 24px;
    font-size: 12px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    transition: var(--tran-04);
}

.client-feedback-section .clients-carousel .slick-dots li.slick-active button {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.client-feedback-carousel {}

.client-feedback-carousel .owl-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.client-feedback-carousel .owl-dots .owl-dot {
    border: none;
    background-color: var(--white-color);
    color: var(--primary-color);
    width: 22px;
    height: 5px;
    font-size: 12px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    transition: var(--tran-04);
}

.client-feedback-carousel .owl-dots .owl-dot:hover,
.client-feedback-carousel .owl-dots .owl-dot.active {
    background-color: var(--primary-color);
    color: var(--white-color);
    width: 40px;
}

.client-feedback-carousel .single-item {
    padding: 10px;
}

.client-feedback-carousel .testimonial-card {
    padding: 20px 25px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background-color: var(--white-color);
    box-shadow: 0 20px 15px -20px rgb(0 0 0 / 7%);
    transition: var(--tran-04);
    position: relative;
}

.client-feedback-carousel .testimonial-card::before {
    content: "";
    position: absolute;
    right: 4px;
    top: 4px;
    width: 30px;
    height: 30px;
    border: 4px solid var(--first-color);
    border-bottom: none;
    border-left: none;
    border-radius: 0 13px 0 0;
    opacity: 0.05;
}

.client-feedback-carousel .testimonial-card::after {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 4px;
    width: 30px;
    height: 30px;
    border: 4px solid var(--first-color);
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 13px;
    opacity: 0.05;
}

.client-feedback-carousel .testimonial-card:hover {
    transform: translateY(-5px);
}

.client-feedback-carousel .testimonial-card .paragraph-text {}

.client-feedback-carousel .testimonial-card .paragraph-text .desc {
    font-size: 15px;
    margin-bottom: 15px;
}

.client-feedback-carousel .testimonial-card .testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.client-feedback-carousel .testimonial-card .testimonial-author .testimonial-image {
    margin: 0;
}

.client-feedback-carousel .testimonial-card .testimonial-author .testimonial-image img {
    width: 60px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border: 1px solid var(--border-color);
    border-radius: 50%;
}

.client-feedback-carousel .testimonial-card .testimonial-author .testimonial-text {}

.client-feedback-carousel .testimonial-card .testimonial-author .testimonial-text .testimonial-name {
    font-size: 18px;
    text-transform: capitalize;
    margin-bottom: 0;
}

.client-feedback-carousel .testimonial-card .testimonial-author .testimonial-text .testimonial-bio {
    font-size: 14px;
}

/*=============== Client Feedback Section Css End ===============*/

/*=============== Footer Section Css Start ===============*/
.footer-section {}

.footer-section .footer-top {
    padding: 60px 0 10px;
    background-color: #21262c;
    color: var(--white-color);
}

.footer-section .footer-top .footer-widget {
    margin-bottom: 30px;
}

.footer-section .footer-top .footer-widget .primary-btn {
    padding: 8px 16px;
    background-color: #21262c;
    border-color: var(--white-color);
    color: var(--white-color);
    font-size: 14px;
}

.footer-section .footer-top .footer-widget .primary-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}


.footer-section .footer-top .footer-widget .footer-logo {
    margin-bottom: 20px;
}

.footer-section .footer-top .footer-widget .footer-logo img {
    max-width: 130px;
    height: 80px;
    /* filter: brightness(0) invert(1); */
}

.footer-section .footer-top .footer-widget .footer-desc {
    font-size: 16px;
    font-weight: 300;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    margin-bottom: 15px;
}


.footer-address ul li {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    font-weight: 300;
}

.footer-address ul li i {
    transition: var(--tran-03);
}

.footer-address ul li:hover {
    color: var(--secondary-color);
}

.footer-address ul li .footer-address-icon {
    font-size: 18px;
}

.footer-address ul li .footer-address-icon i {}

.footer-address ul li .footer-address-info {
    padding-top: 2px;
}

.footer-address ul li .footer-address-info p {
    margin-bottom: 0;
    font-size: 16px;
    word-break: break-word;
}

.footer-address ul li .footer-address-info p a {}

.footer-top .footer-widget .footer-title {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
}

.footer-top .footer-widget .footer-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--primary-color);
}

.footer-top .footer-widget .links {}

.footer-top .footer-widget .links li {
    padding: 5px 0;
}

.footer-top .footer-widget .links li a {
    display: inline-flex;
    font-weight: 300;
    font-size: 16px;
}

.footer-top .footer-widget .links li:hover a {
    color: var(--secondary-color);
}

.footer-top .footer-widget .links li a::before {
    content: "+";
    display: inline-flex;
    width: 0;
    overflow: hidden;
    padding-right: 0;
    transform-origin: left;
    opacity: 0;
    visibility: hidden;
    transition: var(--tran-04);
}

.footer-top .footer-widget .links li:hover a::before {
    width: 15px;
    padding-right: 5px;
    visibility: visible;
    opacity: 1;
    color: var(--secondary-color);
}

.footer-top .footer-widget .gallery {
    display: flex;
    flex-wrap: wrap;
    padding-top: 4px;
}

.footer-top .footer-widget .gallery li {
    flex: 0 0 auto;
    max-width: 100px;
    width: 100%;
    padding: 2px;
}

.footer-top .footer-widget .gallery li img {
    width: 100%;
    aspect-ratio: 1/0.66;
    object-fit: cover;
}

.footer-bottom {
    padding: 10px 0;
    color: var(--white-color);
    background-color: #282b38;
}

.footer-bottom p {
    font-weight: 300;
    font-size: 16px;
}

.footer-bottom a:hover {
    color: var(--primary-color);
}

/*=============== Footer Section Css End ===============*/


/*=============== Interior Service Section Css Start ===============*/
.interior .service-section {}

.single-service-two {
    background-color: var(--white-color);
    padding: 35px 25px 30px;
    display: flex;
    gap: 20px;
    position: relative;
    box-shadow: 5px 10px 15px rgb(0 0 0 / 5%);
    z-index: 1;
}

.single-service-two::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    left: 0;
    background-color: var(--second-color);
    transition: var(--tran-05);
    z-index: -1;
}

.single-service-two:hover::after {
    width: 100%;
}

.single-service-two .icon {
    flex: 0 0 auto;
    width: 60px;
}

.single-service-two .icon img {
    transition: var(--tran-03);
}

.single-service-two:hover .icon img {
    filter: brightness(0) invert(1);
}

.single-service-two .content {}

.single-service-two .title {}

.single-service-two .title h3 {
    font-family: "DM Serif Text", serif;
    font-size: 22px;
}

.single-service-two:hover .title h3 a {
    color: var(--white-color);
}

.single-service-two .description {}

.single-service-two .description p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 10px;
    transition: var(--tran-03);
    font-size: 14px;
}

.single-service-two:hover .description p {
    color: var(--white-color);
}

.single-service-two .button {}

.single-service-two .button a {
    font-size: 16px;
    letter-spacing: 0.5px;
    font-weight: 500;
    position: relative;
    display: inline-block;
    padding: 2px 0;
}

.single-service-two:hover .button a {
    color: var(--white-color);
}

.single-service-two .button a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background-color: var(--white-color);
    transition: var(--tran-05);
}

.single-service-two .button a:hover::after {
    width: 100%;
}

/*=============== Interior Service Section Css End ===============*/

/*=============== Interior Works Section Css Start ===============*/
.interior .works-section {}

.works-section .controls-style-two {}

.works-section .controls-style-two .control {
    border-radius: 0;
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    padding: 8px 20px 11px;
    position: relative;
    z-index: 1;
}

.works-section .controls-style-two .control.mixitup-control-active,
.works-section .controls-style-two .control:hover {
    background-color: var(--first-color);
}

.works-section .controls-style-two .control::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background-color: var(--primary-color);
    transition: var(--tran-03);
    z-index: -1;
}

.works-section .controls-style-two .control:hover::after,
.works-section .controls-style-two .control.mixitup-control-active::after {
    width: 100%;
}

.mix-filter-style-two {}

.mix-filter-style-two .mix {}

.mix-filter-style-two .mix .gal-item {
    position: relative;
    z-index: 1;
}

.mix-filter-style-two .mix .gal-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: rgba(0, 0, 0, 0.65);
    transition: var(--tran-05);
}

.mix-filter-style-two .mix .gal-item:hover::after {
    width: 100%;
}

.mix-filter-style-two .mix .gal-item .overlay-content {
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
    color: var(--white-color);
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: var(--tran-03);
    transition-delay: 0.2s;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    grid-row-gap: 10px;
    column-gap: 10px;
    width: 100%;
}

.mix-filter-style-two .mix .gal-item:hover .overlay-content {
    visibility: visible;
    opacity: 1;
    top: 50%;
}

.mix-filter-style-two .mix .gal-item .overlay-content .title {
    position: relative;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3em;
    font-family: "DM Serif Text", serif;
    margin-bottom: 0;
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    color: var(--white-color);
}

.mix-filter-style-two .mix .gal-item .overlay-content a {
    display: inline-flex;
    color: var(--white-color);
    width: 35px;
    height: 35px;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.mix-filter-style-two .mix .gal-item .overlay-content a i.bi-link-45deg {
    font-size: 20px;
}

.mix-filter-style-two .mix .gal-item .overlay-content a::after {
    display: none;
}

.mix-filter-style-two .mix .gal-item .overlay-content a:hover {}

.mix-filter-style-two .mix .gal-item img {
    border-radius: 0;
}

/*=============== Interior Works Section Css End ===============*/

/*=============== Interior Clients Feedback Section Css Start ===============*/
.interior .clients-feedback-section {}

.interior .clients-feedback-section .clients-carousel {}

.interior .clients-feedback-section .clients-carousel .single-item {
    padding: 0 3px;
}

.interior .clients-feedback-section .clients-carousel .single-item .single-client {
    padding: 5px 10px;
    background-color: var(--white-color);
    position: relative;
}

.interior .clients-feedback-section .clients-carousel .single-item img {}

.interior .clients-feedback-section .clients-carousel .single-item:hover img {}

.interior .clients-feedback-section .clients-carousel .single-item .hover-title {
    font-family: "DM Serif Text", serif;
    font-size: 16px;
    margin-bottom: 2px;
    position: absolute;
    right: 0;
    left: auto;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    visibility: hidden;
    color: var(--white-color);
    opacity: 0;
    width: 0;
    transition: var(--tran-04);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    white-space: nowrap;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 10%);
    cursor: pointer;
}

.interior .clients-feedback-section .clients-carousel .single-item:hover .hover-title {
    visibility: visible;
    opacity: 1;
    width: 100%;
    left: 0;
    right: auto;
}

.interior .clients-feedback-section .clients-carousel .slick-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.interior .clients-feedback-section .clients-carousel .slick-dots li {}

.interior .clients-feedback-section .clients-carousel .slick-dots li button {
    width: 25px;
    height: 5px;
    font-size: 0;
    border: none;
    background-color: var(--first-color);
    border-radius: 5px;
    transition: var(--tran-03);
}

.interior .clients-feedback-section .clients-carousel .slick-dots li.slick-active button {
    width: 50px;
    background-color: var(--primary-color);
}

.interior-feedback-carousel .single-item {
    padding: 10px;
}

.interior-feedback-carousel .testimonial-card {
    background-color: var(--white-color);
    box-shadow: 0px 0px 5px rgb(0 0 0 / 10%);
    padding: 25px 20px 25px;
    position: relative;
    z-index: 1;
}

.interior-feedback-carousel .testimonial-card::before {
    content: "";
    position: absolute;
    left: auto;
    top: 0;
    bottom: 0;
    right: 0;
    width: 0;
    background-color: var(--second-color);
    transition: var(--tran-05);
    z-index: -1;
}

.interior-feedback-carousel .testimonial-card::after {
    content: "";
}

.interior-feedback-carousel .testimonial-card:hover::before {
    width: 100%;
    left: 0;
    right: auto;
}

.interior-feedback-carousel .testimonial-card:hover::after {}

.interior-feedback-carousel .testimonial-card .paragraph-text {}

.interior-feedback-carousel .testimonial-card .paragraph-text .desc {
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 12px;
    transition: var(--tran-03);
}

.interior-feedback-carousel .testimonial-card .testimonial-author {
    display: flex;
    gap: 18px;
    align-items: center;
}

.interior-feedback-carousel .testimonial-card .testimonial-author .testimonial-image {
    margin: 0;
}

.interior-feedback-carousel .testimonial-card .testimonial-author .testimonial-image img {
    width: 60px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--first-color);
    border-left-color: var(--primary-color);
    border-top-color: var(--primary-color);
    transition: var(--tran-03);
}

.interior-feedback-carousel .testimonial-card:hover .testimonial-author .testimonial-image img {
    border-left-color: var(--white-color);
    border-top-color: var(--white-color);
}

.interior-feedback-carousel .testimonial-card .testimonial-author .testimonial-text {}

.interior-feedback-carousel .testimonial-card .testimonial-author .testimonial-text .testimonial-name {
    font-family: "DM Serif Text", serif;
    font-size: 18px;
    margin-bottom: 2px;
    transition: var(--tran-03);
    color: var(--first-color);
}

.interior-feedback-carousel .testimonial-card .testimonial-author .testimonial-text .testimonial-bio {
    font-size: 14px;
    color: var(--text-color);
    transition: var(--tran-03);
}

.interior-feedback-carousel .owl-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.interior-feedback-carousel .owl-dots .owl-dot {
    width: 25px;
    height: 5px;
    border-radius: 5px;
    background-color: var(--first-color);
    transition: var(--tran-04);
}

.interior-feedback-carousel .owl-dots .owl-dot.active {
    background-color: var(--primary-color);
    width: 50px;
}

.interior-feedback-carousel .testimonial-card:hover .testimonial-author .testimonial-text .testimonial-bio,
.interior-feedback-carousel .testimonial-card:hover .testimonial-author .testimonial-text .testimonial-name,
.interior-feedback-carousel .testimonial-card:hover .paragraph-text .desc {
    color: var(--white-color);
}

/*=============== Interior Clients Feedback Section Css End ===============*/

/*=============== Iterior Video Gallery Section Css Start ===============*/
.interior .video-gallery-section {}

.interior .video-gallery-section .video-gallery-carousel {}

.interior .video-gallery-section .video-gallery-carousel .slick-dots {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    margin-top: 10px;
}

.interior .video-gallery-section .video-gallery-carousel .slick-dots li {}

.interior .video-gallery-section .video-gallery-carousel .slick-dots li button {
    font-size: 0;
    width: 25px;
    height: 5px;
    border: none;
    background-color: var(--first-color);
    border-radius: 5px;
    transition: var(--tran-05);
}

.interior .video-gallery-section .video-gallery-carousel .slick-dots li.slick-active button {
    width: 50px;
    background-color: var(--primary-color);
}

.interior .video-gallery-carousel .single-item {
    padding: 0 3px;
}

.interior .video-gallery-carousel .single-item .video-wrapper {
    position: relative;
    z-index: 1;
}

.interior .video-gallery-carousel .single-item .video-wrapper .img {}

.interior .video-gallery-carousel .single-item .video-wrapper img {
    width: 100%;
    aspect-ratio: 1/0.65;
    object-fit: cover;
}

.interior .video-gallery-carousel .single-item .video-wrapper .contents {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px 15px;
    z-index: 2;
    transform: translateY(20px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: var(--tran-05);
}

.interior .video-gallery-carousel .single-item .video-wrapper .contents .title {
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: 400;
    font-family: "DM Serif Text", serif;
    color: var(--white-color);
}

.interior .video-gallery-carousel .single-item .video-wrapper .contents .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.interior .video-gallery-carousel .single-item .video-wrapper .contents .icon i {
    font-size: 55px;
    color: var(--white-color);
    border: 1px solid var(--white-color);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    padding-left: 3px;
}

.interior .video-gallery-carousel .single-item:hover .video-wrapper .contents {
    transform: none;
    visibility: visible;
    opacity: 1;
}

.interior .video-gallery-carousel .single-item .video-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: rgb(0 0 0 / 50%);
    z-index: 1;
    transition: var(--tran-05);
    pointer-events: none;
}

.interior .video-gallery-carousel .single-item .video-wrapper:hover::after {
    width: 100%;
}

/* Socail Media */

.floating-contact-wrapper {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column-reverse; /* নিচ থেকে উপরে expand */
    align-items: flex-end;
    gap: 10px;
    z-index: 9999;
}

/* Main button with label */
.floating-contact-main {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #033152; /* Label + button color */
    padding: 10px 15px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    z-index: 10; /* Social buttons এর উপরে থাকুক hover আগে */
}

.floating-contact-main .label {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}

.floating-contact-main .icon {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-contact-main .icon img {
    width: 30px;
    height: 30px;
}

/* Social Media Options hidden by default */
.floating-contact-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* Each button */
.floating-contact-options a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}

.floating-contact-options a img {
    width: 40px;
    height: 40px;
}

.whatsapp { background: #29A71A; }
.messenger { background: #0084FF; }
.call { background: #2196F3; }

/* Hover effect: show social buttons + hide main button */
.floating-contact-wrapper:hover .floating-contact-options {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.floating-contact-wrapper:hover .floating-contact-main {
    opacity: 0; /* hide main button */
    transform: scale(0.8);
}

.floating-contact-options a:hover {
    transform: scale(1.1);
}
/* Socail Media */



/* Chat BOX */
#chatToggle {
    position: fixed;
    left: 20px;
    bottom: 20px;
    background: #007bff;
    color: #fff;
    padding: 14px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    z-index: 9999;
}

#chatBox {
    position: fixed;
    left: 20px;
    bottom: 80px;
    width: 300px;
    height: 420px;
    background: #fff;
    border-radius: 12px;
    display: none;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

/* Animation */
@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Header */
.chat-header {
    background: #007bff;
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

/* Quick Questions */
.quick-questions {
    padding: 10px;
}

.quick-questions button {
    width: 100%;
    margin-bottom: 6px;
    padding: 8px;
    border: none;
    background: #f1f1f1;
    border-radius: 6px;
    cursor: pointer;
}

/* Chat Body */
#chatToggle {
    position: fixed;
    left: 20px;
    bottom: 20px;
    background: #0060A5;
    color: #fff;
    padding: 14px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
}

/* Chat Box */

/* Toggle */
#msChatToggle {
    position: fixed;
    left: 20px;
    bottom: 20px;
    background: #0060A5;
    color: #fff;
    padding: 14px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 999999;
}

/* Box */
#msChatBox {
    position: fixed;
    left: 20px;
    bottom: 80px;
    width: 320px;
    height: 450px;
    background: #fff;
    border-radius: 15px;
    display: none;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
    z-index: 999999;
}

/* Header */
.ms-header {
    background: #0060A5;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ms-user {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ms-user img {
    width: 60px;
    border-radius: 50%;
}

/* Body */
#msBody {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    background: #f0f2f5;
}

/* Messages */
.ms-msg {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 15px;
    margin: 5px 0;
    font-size: 13px;
}

.ms-user-msg {
    background: #0060A5;
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 5px;
}

.ms-admin-msg {
    background: #e4e6eb;
    color: #000;
    margin-right: auto;
    border-bottom-left-radius: 5px;
}

/* Footer */
.ms-footer {
    display: flex;
    border-top: 1px solid #ddd;
}

.ms-footer input {
    flex: 1;
    border: none;
    padding: 8px;
}

.ms-footer button {
    background: #0060A5;
    color: white;
    border: none;
    padding: 8px 12px;
}

/* Typing */
#msTyping {
    font-size: 12px;
    padding: 5px 10px;
    color: gray;
}

/* Chat BOX */



/*=============== Iterior Video Gallery Section Css End ===============*/

.about-section .about-right-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}


.about-section .about-right-bottom .about-bottom-img {
    position: relative;
}

.about-section .about-right-bottom .about-bottom-img::before {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/gallery/pattern.png);
    content: "";
    background-size: cover;
    background-position: center;
}

/*=============== Rev Slider Section Css End ===============*/

/*=============== Event About Section Css Start ===============*/
@-webkit-keyframes ripple {
    70% {
        -webkit-box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes ripple {
    70% {
        -webkit-box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.about-section {}

.about-section img {
    /* width: 100%; */
}

.custom-margin-left {
    margin-left: -80px;
}

.custom-margin-right {
    margin-right: 80px;
}

.about-section .about-img {
    position: relative;
}


.about-section .about-img .animate-btn:after,
.about-section .about-img .animate-btn:before {
    width: 175px;
    height: 175px;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    content: "";
    position: absolute;
    -webkit-box-shadow: 0 0 0 0 var(--secondary-color);
    box-shadow: 0 0 0 0 var(--secondary-color);
    -webkit-animation: ripple 3s infinite;
    animation: ripple 3s infinite;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.about-section .about-img .animate-btn:after {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.about-section .about-img .animate-btn a {
    position: absolute;
    display: inline-block;
    width: 155px;
    height: 155px;
    line-height: 155px;
    text-align: center;
    border-radius: 50%;
    font-size: 36px;
    color: var(--white-color);
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.about-section .about-img .animate-btn a:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    right: 0px;
    border-radius: 50%;
    opacity: 0.85;
    z-index: -1;
    background: var(--secondary-color);
}

.about-section .about-img .animate-btn a {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}

.content-box {
    height: 100%;
    display: flex;
    align-items: center;
    background-color: var(--secondary-color);
    padding: 30px;
}

.content-box .icon {}

.content-box .icon img {
    width: 40px;
}

.content-box .content-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--white-color);
    margin: 30px 0;
}

.content-box .divider {
    height: 2px;
    background-color: var(--white-color);
    width: 45px;
}

.content-box.bg-transparent .content-title {
    color: var(--first-color);
    margin: 10px 0;
}

.content-box.bg-transparent .content {
    color: var(--text-color);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.content-box.bg-transparent a {
    color: var(--white-color);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    column-gap: 3px;
    text-transform: capitalize;
    padding: 3px 10px;
    background-color: var(--secondary-color);
    border-radius: 30px;
    letter-spacing: 0.5px;
}

.content-box.bg-transparent a i {
    font-size: 12px;
    line-height: 1;
}

.sub-title {}

.title {
    font-size: 50px;
    font-weight: 800;

    text-transform: capitalize;
    font-family: "Great Vibes", cursive;
    color: var(--first-color);
}

.line {
    margin-bottom: 20px;
}

.line img {
    width: 100%;
    max-width: 200px;
}

.bg-dark .title {
    color: var(--white-color);
}

.text-lite-dark {
    font-size: 15px;
    color: var(--text-color);
}


.simple-list {}

.simple-list li {
    display: flex;
    column-gap: 5px;
    font-size: 15px;
    text-transform: capitalize;
    color: var(--lite-white-color);
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 5px;
}

.simple-list li i {
    color: var(--secondary-color);
}

.simple-list li span {}

/*=============== Event About Section Css End ===============*/

/*=============== Event Service Section Css Start ===============*/
.event .service-section.bg-white {
    background-image: url(../images/icons/design3.png);
    background-attachment: fixed;
}

.event .service-section {
    background-attachment: fixed;
    position: relative;
    z-index: 1;
}

.event .service-section::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.event .services-wrapper>*:nth-child(1) .single-service {
    background-color: #fcb41e;
}

.event .services-wrapper>*:nth-child(2) .single-service {
    background-color: #76c1d1;
}

.event .services-wrapper>*:nth-child(3) .single-service {
    background-color: #ff635c;
}

.event .services-wrapper>*:nth-child(4) .single-service {
    background-color: #5d5167;
}

.event .services-wrapper>*:nth-child(5) .single-service {
    background-color: #5d5167;
}

.event .services-wrapper>*:nth-child(6) .single-service {
    background-color: #ff635c;
}

.event .services-wrapper>*:nth-child(7) .single-service {
    background-color: #76c1d1;
}

.event .services-wrapper>*:nth-child(8) .single-service {
    background-color: #fcb41e;
}

.event .single-service {
    padding: 20px;
    border-radius: 30px;
    text-align: center;
    position: relative;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    max-height: 300px;
    margin: auto;
}

.event .single-service:hover {
    background-color: var(--white-color) !important;
    box-shadow: 0 0px 15px rgb(0 0 0 / 4%);
}

.event .single-service .icon {
    display: block;
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
}

.event .single-service .icon img {
    width: 100%;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1);
}

.event .single-service:hover .icon img {
    filter: inherit;
}

.single-service .service-item-title {
    font-size: 22px;
    text-transform: capitalize;
    font-family: "Playfair Display", serif;
    letter-spacing: 1px;
    color: var(--white-color);
    transition: all 0.3s ease;
}

.event .single-service:hover .service-item-title {
    color: var(--secondary-color);
}

.event .single-service .view-btn {
    position: absolute;
    bottom: -15px;
    background-color: var(--secondary-color);
    color: var(--white-color);
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 600;
}

.primary-btn-fill {
    font-weight: 600;
    font-size: 16px;
    color: var(--white-color);
    background: var(--secondary-color);
    border-radius: 3px;
    outline: 2px solid var(--secondary-color);
    display: inline-block;
    padding: 8px 30px;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    text-transform: capitalize;
    letter-spacing: 2px;
}

.primary-btn-fill:hover {
    background: 0 0;
    color: var(--secondary-color);
}

/*=============== Event Service Section Css End ===============*/


/*=============== Blog Section Css Start Now ===============*/
.blog-post {
    background-color: var(--white-color);
    box-shadow: 0 5px 15px rgb(0 0 0 / 5%);
}

.blog-post img {
    width: 100%;
    aspect-ratio: 1/0.8;
    object-fit: cover;
}

.blog-post .post-content {
    padding: 15px 20px;
}

.blog-post .post-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--first-color);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    height: 50px;
    margin-bottom: 10px;
}

.blog-post .post-content p {
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 10px;
}

.blog-post .post-content .read-more {
    display: inline-flex;
    column-gap: 6px;
    line-height: 1;
    font-size: 14px;
    font-weight: 600;
}

.blog-post .post-content .read-more:hover {
    color: var(--second-color);
}

/*=============== Blog Section Css End ===============*/

/*=============== Page Header Section Css Start ===============*/
.page-header h1 {
    display: inline-block;
    font-size: 40px;
    line-height: 1;
    margin: 8px 0;

    font-weight: 700;
    position: relative;
    top: 1px;
}

.page-header .sub-title {
    display: block;
    font-size: 16px;
    font-weight: 300;
    margin: 0;
    opacity: 0.8;
}

.breadcrumb {
    background: 0 0;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.breadcrumb>li {
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    text-shadow: none;
    color: var(--text-color);
}

.breadcrumb>li+li:before {
    color: inherit;
    opacity: 0.5;
    font-family: "Bootstrap-icons";
    font-weight: 900;
    content: "\F285";
    padding: 0 7px 0 5px;
    font-size: 11px;
}

.breadcrumb>li a {
    color: var(--secondary-color);
}

/*=============== Page Header Section Css End ===============*/

/*=============== Career Section Css Start ===============*/
.text-theme {
    color: var(--second-color) !important;
}

.career-form-wrapper {
    max-width: 700px;
    width: 100%;



    padding: 30px;
    border: 2px solid #e4e4e4;
    border-radius: 25px;

    margin: 15px auto;
}

.career-form-wrapper .career-form {}

.career-form .form-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: capitalize;
    color: #333;
}

.career-form .input-group {
    margin-bottom: 1rem;
    flex-direction: column;
}

.career-form .input-group label {
    display: block;
    width: 100%;
    font-size: 18px;
    text-transform: capitalize;
    color: #777;
    margin-bottom: 6px;
}

.career-form .input-group input {
    border: 2px solid #e4e4e4;
    padding: 8px 12px;
    color: #666;
    border-radius: 8px !important;
    outline: 0;
    width: 100%;
    font-weight: 500;
    font-size: 15px;
    border-bottom-left-radius: 10px !important;
    border-top-left-radius: 10px !important;
}

.career-form .input-group textarea {
    width: 100%;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    outline: 0;
    border: 2px solid #e4e4e4;
    padding: 8px 12px;
    border-radius: 10px;
    height: 150px;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.career-form .input-group .submit {
    background-color: var(--second-color);
    color: var(--white-color);
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 600;
    transition: var(--tran-03);
}

.career-form .input-group .submit:hover {
    background-color: var(--third-color);
}

.career-form input::placeholder {
    color: #999;
    font-size: 15px;
    font-weight: 400;
}

.career-form textarea::placeholder {
    color: #999;
    font-size: 15px;
    font-weight: 400;
}

.career-form .input-group input:focus,
.career-form .input-group textarea:focus {
    border-color: #07a8e0;
}

.career-form .modal-content {
    border-radius: 20px;
}

/*=============== Career Section Css End ===============*/

/*=============== Partners Section Css Start ===============*/
.partners-section {
    background-color: var(--primary-color);
}



/*=============== Partners Section Css End ===============*/

/*=============== Product Section Css Start ===============*/
.product-section {}

.single-product {}

.single-product figure {
    position: relative;
    margin-bottom: 0;
}

.single-product figure::before {
    content: "";
    position: absolute;
    background-color: var(--secondary-color);
    right: -10px;
    top: 10px;
    width: 1px;
    height: 0;
    transition: var(--tran-04);
}

.single-product figure::after {
    content: "";
    position: absolute;
    background-color: var(--third-color);
    bottom: -10px;
    left: 10px;
    height: 1px;
    width: 0;
    transition: var(--tran-04);
}

.single-product:hover figure::before {
    height: calc(100% + 10px);
}

.single-product:hover figure::after {
    width: calc(100% + 10px);
}

.single-product figure img {
    width: 100%;
    aspect-ratio: 1/.75;
    object-fit: cover;
}

.single-product figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 15px;
    background-color: rgb(0 0 0 / 50%);
    opacity: 0;
    visibility: hidden;
    transition: var(--tran-04);
}

.single-product:hover figure figcaption {
    visibility: visible;
    opacity: 1;
}

.single-product figure figcaption * {
    color: var(--white-color);
}

.single-product figure figcaption .item-title {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;

    margin-bottom: 6px;
}

.single-product figure figcaption .item-exerp {
    font-size: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 10px;
    font-weight: 300;
}

.single-product figure figcaption .item-link {
    text-transform: capitalize;
}

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #006c04;
  color: white;
  border: 1px solid #4CAF50;
}


/* Extre page blog-details */
.gray-bg {
    background-color: #f5f5f5;
}
/* Blog
---------------------*/
.blog-grid {
  box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
  border-radius: 5px;
  overflow: hidden;
  background: #ffffff;
  margin-top: 15px;
  margin-bottom: 15px;
}
.blog-grid .blog-img {
  position: relative;
}
.blog-grid .blog-img .date {
  position: absolute;
  background: #fc5356;
  color: #ffffff;
  padding: 8px 15px;
  left: 10px;
  top: 10px;
  border-radius: 4px;
}
.blog-grid .blog-img .date span {
  font-size: 22px;
  display: block;
  line-height: 22px;
  font-weight: 700;
}
.blog-grid .blog-img .date label {
  font-size: 14px;
  margin: 0;
}
.blog-grid .blog-info {
  padding: 20px;
}
.blog-grid .blog-info h5 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px;
}
.blog-grid .blog-info h5 a {
  color: #20247b;
}
.blog-grid .blog-info p {
  margin: 0;
}
.blog-grid .blog-info .btn-bar {
  margin-top: 20px;
}


/* Blog Sidebar
-------------------*/
.blog-aside .widget {
  box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
  border-radius: 5px;
  overflow: hidden;
  background: #ffffff;
  margin-top: 15px;
  margin-bottom: 15px;
  width: 100%;
  display: inline-block;
  vertical-align: top;
}
.blog-aside .widget-body {
  padding: 15px;
}
.blog-aside .widget-title {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.blog-aside .widget-title h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fc5356;
  margin: 0;
}
.blog-aside .widget-author .media {
  margin-bottom: 15px;
}
.blog-aside .widget-author p {
  font-size: 16px;
  margin: 0;
}
.blog-aside .widget-author .avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
}
.blog-aside .widget-author h6 {
  font-weight: 600;
  color: #20247b;
  font-size: 22px;
  margin: 0;
  padding-left: 20px;
}
.blog-aside .post-aside {
  margin-bottom: 15px;
}
.blog-aside .post-aside .post-aside-title h5 {
  margin: 0;
}
.blog-aside .post-aside .post-aside-title a {
  font-size: 18px;
  color: #20247b;
  font-weight: 600;
}
.blog-aside .post-aside .post-aside-meta {
  padding-bottom: 10px;
}
.blog-aside .post-aside .post-aside-meta a {
  color: #6F8BA4;
  font-size: 12px;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 10px;
}
.blog-aside .latest-post-aside + .latest-post-aside {
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 15px;
}
.blog-aside .latest-post-aside .lpa-right {
  width: 90px;
}
.blog-aside .latest-post-aside .lpa-right img {
  border-radius: 3px;
}
.blog-aside .latest-post-aside .lpa-left {
  padding-right: 15px;
}
.blog-aside .latest-post-aside .lpa-title h5 {
  margin: 0;
  font-size: 15px;
}
.blog-aside .latest-post-aside .lpa-title a {
  color: #20247b;
  font-weight: 600;
}
.blog-aside .latest-post-aside .lpa-meta a {
  color: #6F8BA4;
  font-size: 12px;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 10px;
}

.tag-cloud a {
  padding: 4px 15px;
  font-size: 13px;
  color: #ffffff;
  background: #20247b;
  border-radius: 3px;
  margin-right: 4px;
  margin-bottom: 4px;
}
.tag-cloud a:hover {
  background: #fc5356;
}

.blog-single {
  padding-top: 30px;
  padding-bottom: 30px;
}

.article {
  box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
  border-radius: 5px;
  overflow: hidden;
  background: #ffffff;
  padding: 15px;
  margin: 15px 0 30px;
}
.article .article-title {
  padding: 15px 0 20px;
}
.article .article-title h6 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
}
.article .article-title h6 a {
  text-transform: uppercase;
  color: #fc5356;
  border-bottom: 1px solid #fc5356;
}
.article .article-title h2 {
  color: #20247b;
  font-weight: 600;
}
.article .article-title .media {
  padding-top: 15px;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 20px;
}
.article .article-title .media .avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
}
.article .article-title .media .media-body {
  padding-left: 8px;
}
.article .article-title .media .media-body label {
  font-weight: 600;
  color: #fc5356;
  margin: 0;
}
.article .article-title .media .media-body span {
  display: block;
  font-size: 12px;
}
.article .article-content h1,
.article .article-content h2,
.article .article-content h3,
.article .article-content h4,
.article .article-content h5,
.article .article-content h6 {
  color: #20247b;
  font-weight: 600;
  margin-bottom: 15px;
}
.article .article-content blockquote {
  max-width: 600px;
  padding: 15px 0 30px 0;
  margin: 0;
}
.article .article-content blockquote p {
  font-size: 20px;
  font-weight: 500;
  color: #fc5356;
  margin: 0;
}
.article .article-content blockquote .blockquote-footer {
  color: #20247b;
  font-size: 16px;
}
.article .article-content blockquote .blockquote-footer cite {
  font-weight: 600;
}
.article .tag-cloud {
  padding-top: 10px;
}

.article-comment {
  box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
  border-radius: 5px;
  overflow: hidden;
  background: #ffffff;
  padding: 20px;
}
.article-comment h4 {
  color: #20247b;
  font-weight: 700;
  margin-bottom: 25px;
  font-size: 22px;
}
img {
    max-width: 100%;
}
img {
    vertical-align: middle;
    border-style: none;
}

/* Contact Us
---------------------*/
.contact-name {
  margin-bottom: 30px;
}
.contact-name h5 {
  font-size: 22px;
  color: #20247b;
  margin-bottom: 5px;
  font-weight: 600;
}
.contact-name p {
  font-size: 18px;
  margin: 0;
}

.social-share a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
  margin-right: 10px;
}
.social-share .dribbble {
  box-shadow: 0 8px 30px -4px rgba(234, 76, 137, 0.5);
  background-color: #ea4c89;
}
.social-share .behance {
  box-shadow: 0 8px 30px -4px rgba(0, 103, 255, 0.5);
  background-color: #0067ff;
}
.social-share .linkedin {
  box-shadow: 0 8px 30px -4px rgba(1, 119, 172, 0.5);
  background-color: #0177ac;
}

/* .contact-form .form-control {
  border: none;
  border-bottom: 1px solid #20247b;
  background: transparent;
  border-radius: 0;
  padding-left: 0;
  box-shadow: none !important;
} */
.contact-form .form-control:focus {
  border-bottom: 1px solid #f3f0f0;
}
.contact-form .form-control.invalid {
  border-bottom: 1px solid #f8f7f7;
}
.contact-form .send {
  margin-top: 20px;
}
@media (max-width: 767px) {
  .contact-form .send {
    margin-bottom: 20px;
  }
}

/* start notice section */
.card {
    background-color: #fff;
    border-radius: 10px;
    border: none;
    position: relative;
    margin-bottom: 30px;
    box-shadow: 0 0.46875rem 2.1875rem rgba(90,97,105,0.1), 0 0.9375rem 1.40625rem rgba(90,97,105,0.1), 0 0.25rem 0.53125rem rgba(90,97,105,0.12), 0 0.125rem 0.1875rem rgba(90,97,105,0.1);
}

.card .card-header {
    border-bottom-color: #f9f9f9;
    line-height: 30px;
    -ms-grid-row-align: center;
    align-self: center;
    width: 100%;
    padding: 10px 25px;
    display: flex;
    align-items: center;
}

.card .card-header, .card .card-body, .card .card-footer {
    background-color: transparent;
    padding: 20px 25px;
}
.card-header:first-child {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.rounded-circle {
    border-radius: 50% !important;
}


.avatar.avatar-sm {
    font-size: 12px;
    height: 30px;
    width: 30px;
}
.avatar {
    background: #6777ef;
    border-radius: 50%;
    color: #e3eaef;
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
    margin: 0;
    position: relative;
    vertical-align: middle;
    line-height: 1.28;
    height: 45px;
    width: 45px;
}

.table .order-list li .badge {
    background: rgba(228,222,222,0.8);
    color: #6b6f82;
    margin-bottom: 6px;
}

.badge {
    vertical-align: middle;
    padding: 7px 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 30px;
    font-size: 12px;
}

.progress-bar {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #007bff;
    -webkit-transition: width .6s ease;
    transition: width .6s ease;
}

.bg-success {
    background-color: #54ca68 !important;
}

.bg-purple {
    background-color: #9c27b0 !important;
    color: #fff;
}

.bg-cyan {
    background-color: #10cfbd !important;
    color: #fff;
}

.bg-red {
    background-color: #f44336 !important;
    color: #fff;
}

.progress {
    -webkit-box-shadow: 0 0.4rem 0.6rem rgba(0,0,0,0.15);
    box-shadow: 0 0.4rem 0.6rem rgba(0,0,0,0.15);
}

.btn-action {
    color: #fff !important;
    line-height: 25px;
    font-size: 12px;
    min-width: 35px;
    min-height: 35px;
}
/* End notice section  */

.form-floating>.form-control {
    padding: 1rem .75rem;
}
.form-floating>.form-control, .form-floating>.form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
}
.contact-form .form-select, .contact-form input {
    width: 100%;
    padding: 15px 25px;
    text-align: left;
    font-weight: 600;
    border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    box-sizing: border-box;
    border: 1px solid var(--bs-light);
    background-color: var(--lite-white-color);
    margin-bottom: 15px;
    outline: 0;
}
element.style {
    height: 150px;
    position: relative;
    background: none !important;
    line-height: 20px;
}
.contact-form textarea {
    width: 100%;
    padding: 15px 25px;
    text-align: left;
    font-weight: 600;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    box-sizing: border-box;
    border-color: var(--bs-light);
    background-color: var(--lite-white-color);
    height: 10em;
    margin-bottom: 10px;
    resize: none;
    outline: 0;
}
.contact-section-2 .contact-info {
    padding: 60px;
    height: 100%;
    display: flex;
    align-items: center;
}

.contact-section-2 .contact-info i {
    font-size: 26px;
    color: var(--third-color);
}

.maps-wrapper {}

.maps-wrapper iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 1/.7;
    min-height: 300px;
    margin-bottom: -5px;
}
.text-admission {
    border: 3px solid #ffffff;
    border-radius: 39px;
}
.comming {
    text-align: center !important;
}

.pagination a:hover:not(.active) {background-color: #ddd;}



@-webkit-keyframes btnArrowEffect1 {
    0% {
        transform: translateX(0);
    }

    51% {
        transform: translateX(20px);
        opacity: 1;
    }

    52% {
        opacity: 0;
        transform: translateX(-20px);
    }

    53% {
        opacity: 0;
    }

    54% {
        opacity: 1;
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes btnArrowEffect1 {
    0% {
        transform: translateX(0);
    }

    51% {
        transform: translateX(20px);
        opacity: 1;
    }

    52% {
        opacity: 0;
        transform: translateX(-20px);
    }

    53% {
        opacity: 0;
    }

    54% {
        opacity: 1;
    }

    100% {
        transform: translateX(0);
    }
}