/*
Theme Name: HITTIN HAUS
Theme URI: https://apexbloggers.com/designs/hittenhaus/
Author: innosoftworks
Author URI: https://innosoftworks.com/
Description: Wordpress theme designed for HITTIN HAUS with Project Integration.
Version: 1.0.17
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: utemountain
Tags: one-column, two-columns, custom-menu, featured-images, left-sidebar, right-sidebar
*/


*{margin: 0;padding: 0;box-sizing: border-box;}
:root{
--primary:#FFFCF4;
--secondary:#8F48FB;
--text:#031D46;
--white:#ffffff;
--font1:"Roboto", sans-serif;
}



body{font-family: var(--font1);overflow-x: hidden;background-color: var(--primary);}
ul, ol{padding: 0;list-style: none;margin: 0;}
li{padding: 0;margin: 0;}
a{text-decoration: none;color: var(--black);}
img{max-width: 100%;object-fit: cover;}
h1{font-size: 46px;line-height:65px;font-weight:500;}
h2 {font-size:40px;line-height:50px;font-weight:500;}
h3{font-size: 34px;line-height: 40px;}
h4{font-size: 30px;line-height: 40px;font-weight: 500;}
h5{font-size: 20px;line-height: 30px;font-weight: 500;}
h6{font-size: 22px;line-height: 22px;font-weight: 500;}
section{padding:55px 0;overflow: hidden;}
h1, h2, h3, h4, h5, h6 {color: var(--text);font-family: var(--font1);}
p{font-family: var(--font1);color: var(--text);font-weight:500;font-size: 16px;line-height: 24px;}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{color: var(--secondary);}

.scrollTop{scroll-margin-top: 150px;}
.btn-primary{color: var(--white) ;font-size:16px; background-color: var(--text);border-color: var(--text);border-radius:0px;padding:14px 20px;font-weight:500;width: fit-content;transition: .2s linear;min-width: 200px;}
.btn-primary:hover{background-color: var(--secondary);border-color: var(--secondary);color: var(--white);}

.btn-secondary{color: var(--white) ;font-size:16px; background-color: var(--secondary);border-color: var(--secondary);border-radius:0px;padding:14px 20px;font-weight:500;width: fit-content;transition: .2s linear;min-width: 200px;}
.btn-secondary:hover{background-color: transparent;border-color: var(--secondary);color: var(--secondary);}

.btn-primary-outline{color: var(--text) ;font-size: 16px; background-color:transparent;border-color: var(--text);border-radius:0px;padding:14px 20px;font-weight: 500;width: fit-content;transition: .2s linear;min-width: 200px;}
.btn-primary-outline:hover{color: var(--white) ;background-color: var(--text);}

header {position: relative;background-color: #FFFFFF2B;z-index: 999;top: 0;right: 0;left: 0;}
#menu > ul {list-style: none;display: flex;align-items: center;justify-content: center;margin: 0;}
#menu ul li a {display: block;text-decoration: none;position: relative;-webkit-transition: all .3s linear;font-size: 16px;transition: all .2s ease-in;padding: 5px 0px;color: var(--text);font-weight:500;}
#menu ul li a img{margin-left: 10px;}
 #menu ul li {display: inline-block;position: relative;margin-left: 20px;}
 #menu ul li a { color: var(--text-dark); display: block; text-decoration: none; position: relative; -webkit-transition: all .3s linear; font-size: 14px;font-weight: 500; transition: all .3s linear;}
 #menu li>a:after {content: '\F282';font-family: 'Bootstrap-icons';margin-left: 5px;}
 #menu li>a:only-child:after {margin-left: 0;content: '';}
 #menu ul li a:hover,#menu ul li.active a,
#menu ul li.current_page_item>a,#menu ul li.current-menu-ancestor>a,#menu ul li.current-menu-item>a,#menu ul li.current-menu-parent>a {color: var(--bg-color);}
#menu li.active ul li a {color: var(--text);background: #000}
 #menu li.active ul li a:hover {color: #fff;background: #333}
 
 #menu li>ul li { background: var(--bg-color); display: block; position: relative; margin: 0; text-align: left; padding: 10px 20px;width: 100%; }
 #menu li>ul li a{color:#333;font-size:13px; padding: 0px !important;  border-right:0;transition: none;}
 #menu li>ul li a:hover {color: var(--text-dark);text-decoration: none;}
 #menu li ul li.current_page_item,#menu li ul li.current-menu-ancestor,#menu li ul li.current-menu-item,#menu li ul li.current-menu-parent { background: var(--text-white); color:var(--text-dark)}
#menu li>ul>li>ul { position: absolute; left: 100%; top: 20px; transition: all linear .2s 0s; -webkit-transition: all linear .2s 0s; visibility: hidden; opacity: 0}
 #menu li>ul>li:hover>ul {visibility: visible;opacity: 1;display: block}
 #menu li>ul {transition: all linear .2s 0s;-webkit-transition: all linear .2s 0s;visibility: hidden;opacity: 0}
 #menu li:hover>ul {visibility: visible;opacity: 1}
#menu li>ul li a {padding: 0 23px;transition: all linear .2s 0s;-webkit-transition: all linear .2s 0s}
 #menu li:hover>ul li a {padding: 10px 15px}
 #menu li>ul li:hover a {color: #fff !important;}
@keyframes menu_sticky {
    0% {margin-top: -240px;}
    50% {margin-top: -90px;}
    100% {margin-top: 0;}
}
#menu li>ul{position:absolute;left:0;top: 4px;z-index:999;white-space:nowrap;padding-left: 0;}
#menu li>ul li{background:var(--white);display:block;position:relative; margin:0; text-align:left;}
#menu li>ul li:hover{background:var(--secondary);border-bottom:1px solid rgba(0,0,0,0.09);}
#menu li>ul li a:hover{color:var(--text);text-decoration:none;}
#menu li ul li.current_page_item>a,#menu li ul li.current-menu-ancestor>a,#menu li ul li.current-menu-item>a,#menu li ul li.current-menu-parent>a{background: #333;color:#fff}
 
header.sticky {margin: 0;position: fixed;top: 0;left: 0;width: 100%;z-index: 99999;animation-name: menu_sticky;animation-duration: 0.60s;animation-timing-function: ease-out;background: var(--white);}
header.sticky .logo{transform: none;background: transparent;}
header.sticky #menu>ul {margin-top: 15px;margin-bottom: 15px;}
/* #menu>ul>li {padding: 0 23px;line-height: 1;display: flex;align-items: center;gap: 10px;} */
header .logo { width: fit-content;width: fit-content;transform: scale(1.2) translateY(6px);background-color: transparent;background-color: var(--primary);padding: 0 10px;}
header .logo img{max-width: 80px;width: 100%;}
.topbar ul li {display: inline-block;color: var(--white);position: relative; padding:4px 10px;border-right: 1px solid var(--white);font-weight: 400;line-height: 16px;}
.botom-bar ul li img{padding-right: 10px;}
.topbar ul li:first-child {padding-left: 0;}
.topbar ul li:last-child {border: 0;padding-right:0;  }
.topbar ul li a{font-size: 18px;}
.topbar ul {display: flex;margin-bottom: 0;justify-content: end;padding: 5px 0;}
.topbar .social a:first-child {border-right: 1px solid var(--white);}
.topbar .social a {display: inline-block;margin-bottom: 0;}
.topbar{padding: 3px 0;border-bottom:1px solid #031D4638;}
#menu{position:relative;}
#menu ul{list-style:none;margin:0px 0; display: flex;align-items: center;justify-content: center;border-radius: 55px;padding: 4px 6px;width: fit-content;margin-inline: auto;}
#menu ul li{position:relative;}
#menu ul li a{display:block;text-decoration:none;position:relative; -webkit-transition:all .3s linear;font-size: 16px;transition:all .3s ease-in;color: var(--text);    }
#menu li > a:only-child::after { margin-left: 0; content: ''; }
#menu ul li:hover,#menu ul li.active,#menu ul li.current_page_item,#menu ul li.current-menu-ancestor>a,#menu ul li.current-menu-item>a,#menu ul li.current-menu-parent>a{color: var(--text);}
#menu ul li.active a::after{background-color: var(--white);z-index: -1;}
#menu ul li.active a{color: var(--black);}
 
#menu li>ul>li>ul{position:absolute;left:100%;top:-12px;transition:all linear .2s 0s;-webkit-transition:all linear .2s 0s;visibility:hidden;opacity:0}
#menu li>ul{transition:all linear .2s 0s;-webkit-transition:all linear .2s 0s;visibility:hidden;opacity:0;width: 100%;display: block;flex-direction: column;margin: 0;background: transparent;padding-top: 30px;}
#menu li ul li:hover ul li a {color:#000 !important;}
#menu li ul li:hover ul li:hover a {color:var(--white) !important;}
 
.lang-switcher {position: relative;display: inline-block;font-family: var(--font1);}
.lang-switcher span{color: var(--text) !important;}
.lang-trigger {display: flex;align-items: center;flex-direction: row-reverse;gap: 8px;padding: 6px 10px;cursor: pointer;}
.lang-caret { font-size: 14px; }
.lang-menu {position: absolute;top: calc(100% + 5px);left: 0;width: 100%;display: none; z-index: 999;}
.lang-item {display: flex;align-items: center;gap: 8px;cursor: pointer;}
.lang-item:hover { background: #f0f0f0; }
span#langTriggerLabel{font-size: 16px;color: var(--text);}
 
.hero-banner .banner-img {position: relative;width: 100%;}
.hero-banner .banner-img img {width: 100%;object-fit: cover;mask-image: url(images/boxes/banner-mask.png);mask-size: 97% auto;mask-position: center;mask-repeat: no-repeat;    aspect-ratio: 1/1;position: relative;z-index: 2;}
.hero-banner .banner-img::before {content: "";position: absolute;inset: 0;background: url(images/boxes/banner-mask.png) center/97% auto no-repeat;filter: drop-shadow(0px 4px 20px #00000040);z-index: 1;}
.hero-banner .banner-img::after{content: ""; width: 100%;height: 100%;position: absolute;top: 0;right: -33px;background: url(images/boxes/mask-effect.svg);background-size: contain;background-repeat: no-repeat;}
.hero-banner h1{text-transform: uppercase;}
.hero-banner .inner-btn{display: flex;gap: 20px;margin-top: 15px;}

.about-sec{position: relative;}
.about-sec .about-content h2{color: var(--white);}
.about-sec .about-content p{color: var(--white);}
.about-sec .about-image{min-height: 700px;}
.about-sec .about-image img{width: calc(50vw - 50px);position: absolute;left: 0;top: 0;height: 100%;}

.experience-sec .heading{text-align: center;margin-bottom: 10px;}
.experience-sec .row{row-gap: 30px;}
.experience-box{border: 1px solid #031D4694;padding: 20px;position: relative;overflow: hidden;height: 100%;}
.experience-box::after{content: '';position: absolute;top: 0;right: -70px;background: var(--secondary);width: 300px;height: 20px;transform: rotate(45deg);}
.experience-box .icon{margin-bottom: 20px;}


.summry-sec{padding: 0;}
.summry-sec .text-box *{color: var(--white);}
.summry-sec .text-box h2{margin-bottom: 20px;}
.summry-sec .text-box{margin: 20px 0;}
.summry-sec .image{position: relative;overflow: hidden;}
.summry-sec .overly-img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.summry-sec .ply-btn{position: absolute;left: 0;right: 0;margin: auto;top: 0;bottom: 0;border-radius: 50%;background: transparent;border: none;}

.key-sec .row{row-gap: 30px;}
.key-sec .heading{margin-bottom: 20px;}
.key-sec .map iframe{width: 100%;aspect-ratio: 16/5;}

.details-sec {position: relative;}
.details-sec::after {content: "";position: absolute;inset: 0;background: #00000054;z-index: 9;}
.details-sec .container{position: relative;z-index: 9999;}
.details-sec .project{padding: 0 40px;height: 100%;position: relative;z-index: 99999;}
.details-sec .project h2{color: var(--white);text-transform: uppercase;}
.details-sec .project p{color: var(--white);}
.details-sec .project::before{content: "";position: absolute;background-color:#FFFFFF36;backdrop-filter: blur(58px);height:calc(100% + 600px);top: -50%;z-index: -1;left:0;width: 100%;}
.details-sec .places .place{min-height: 300px;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;}
.details-sec .places .place .title{background-color: #031D4694;backdrop-filter: blur(22px);width:calc(100% + 100px);padding:15px 0;text-align: center;color: var(--white);font-size:18px;transform: rotate(-5deg);position: absolute;transition: 0.5s linear;}
.details-sec .places .place:hover .title{transform: none}
.details-sec .places .row{row-gap: 30px;}

table.custom-table{width: 100%;}
table.custom-table th{background: var(--text);color: var(--white);}
table.custom-table th,table.custom-table td{padding: 15px;border-right: 1px solid var(--text);}
table.custom-table th:nth-last-child(1),table.custom-table td:nth-last-child(1){border-right:none;}
table.custom-table th{border-color:var(--white);}
table.custom-table td{background: var(--white);}
table.custom-table tr:nth-child(even) td{background: #F5F5F5;}

.units-sec .heading{margin-bottom: 10px;text-align: center;}
.units-sec .img-box{text-align: center;background: var(--white);border: 1px solid #031D4659;max-width: 95%;margin-inline: auto;padding: 20px;}
.units-sec .img-box img{width: 50%;}
.units-sec .row{row-gap: 30px;}
.unit-box{border: 1px solid #031D465E;padding: 25px;position: relative;min-height: 450px;transition: .2s linear;}
.unit-box .text{position: relative;z-index: 3;transition: .2s linear;}
.unit-box .text h4{transition: .2s linear;}
.unit-box .text ul li{border-bottom: 1px solid var(--text);padding: 10px 0;transition: .2s linear;}
.unit-box .img-over{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: .2s linear;}
.unit-box::after{content: ""; position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: .2s linear;background: #00000057;z-index: 2;}
.unit-box:hover .img-over,.unit-box:hover::after{opacity: 1;}

.unit-flex .unit-item:nth-child(even) .unit-box,.unit-box:hover{background: var(--text);color: var(--white);}
.unit-flex .unit-item:nth-child(even) .unit-box .text ul li,.unit-box:hover .text ul li{border-color: var(--white);}
.unit-flex .unit-item:nth-child(even) .unit-box h4,.unit-box:hover h4{color: var(--white);}
.unit-sec .heading{margin-bottom: 30px;}

footer{padding: 55px 0 30px 0;}
footer .footer-content .logo{margin-bottom: 20px;}
footer .footer-content .logo img{max-width: 70px;width: 100%;}
footer .footer-content p{color: #CCCCCC;}
footer .footer-content .social{margin-top: 30px;}
footer .footer-content .social ul{display: flex;gap: 20px;align-content: center;}
footer .footer-content .social ul li a{min-width:35px;min-height:35px;background-color: var(--white);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
footer .footer-content .social ul li img{max-width: 20px;}
footer .footer-content .social ul li i{font-size: 20px;line-height: 0;}
footer .nav-links h5{color: var(--white);}
footer .nav-links ul{margin-top: 30px;}
footer .nav-links ul li{color: #CCCCCC;transition: 0.3s linear;margin-bottom: 30px;font-size: 16px;}
footer .nav-links ul li:hover{color: var(--white);}
footer .copyright{margin-top: 40px;border-top:2px solid #FFFFFF36;padding-top: 30px;}
footer .copyright p{color: #CCCCCC;font-size: 12px;}
.modal{z-index: 999999999999999999999999999999999999999999999999999999999999; background-color: rgba(0, 0, 0, 0.3);  backdrop-filter: blur(5px);}
.modal .modal-backdrop{z-index:9999999;}
.modal form .wpcf7-spinner{display: none !important;}
.modal .modal-header .btn-close:focus{box-shadow: none;border: 0;outline: none;}
.modal .modal-header .btn-close:active{box-shadow: none;border: 0;outline: none;}
.modal .modal-header{background-color: var(--text);padding:20px 30px 20px 10px}
.modal .modal-title{color: var(--white);font-size: 22px;}
.modal .modal-header .btn-close{background-color: var(--white);width:20px;height: 20px;border-radius: 50%;opacity: 1;}
.modal .btn{width: 100%;}
.about-content .logo{width: 100%;margin-bottom: 20px;}


.whatsapp_btn {
    position: fixed;
    right: 15px;
    bottom: 50px;
    transform: translateY(-35%);
    z-index: 9;
    animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    -moz-animation: bounce 2s infinite;
    -o-animation: bounce 2s infinite
}

.whatsapp_btn img {
    max-width: 70px;
    object-fit: contain
}

@-webkit-keyframes bounce {
    0%,20%,50%,80%,100% {
        -webkit-transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-20px)
    }

    60% {
        -webkit-transform: translateY(-10px)
    }
}