html,body { width:100%; height: auto; margin:0; padding:0; overflow-x: hidden; scroll-behavior: smooth; } body { position: relative; font-size:14px; line-height:24px; color: #000; font-family: 'Open Sans', sans-serif; //font-family: 'Montserrat', sans-serif; } @max767: ~"(max-width: 767px)"; @min768: ~"(min-width: 767px)"; @max991: ~"(max-width: 991px)"; @max1200: ~"(max-width: 1200px)"; #colors() { primary: #946227; secondary: #6b4c41; red: #fe0009; gold: #c8a553; white: #ffffff; black: #000000; g-black: #202032; grey: #e6e6e6; } .primary{ color:#colors[primary]; } .secondary-bg{ background-color:#colors[secondary]; } .gold{ color:#colors[gold]; } .red{ color:#colors[red] !important; } .primary-bg{ background-color:#colors[primary]; } .bg-black{ background-color:#colors[black]; } .bg-white{ background-color:#colors[white]; } .bg-g-black{ background-color:#colors[g-black]; } .bg-g-grey{ background-color:#colors[grey]; } .dash{ border: 3px solid #colors[primary]; width: 15%; } .dash-m{ border: 3px solid #colors[primary]; width: 8%; } a{ cursor: pointer; } .font-s12{ font-size: 11px; } h2{ color: #colors[primary]; font-weight: 700; } h4{ color: #colors[secondary]; font-weight: 600; } /****************************** navbar ****************************************/ nav{ background: #colors[white]!important; } .navbar-light .navbar-nav .nav-link { color: #colors[black]!important; font-weight: 600; } .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link { color: rgba(0,0,0,.9); border-bottom: 2px solid #colors[black]; } .fixed-top { height: 115px; border-bottom: 1px solid #colors[gold]; @media @max767 { height: 128px; } } /****************************** Slider ****************************************/ .carousel-fade .carousel-item { opacity: 0; transition-duration: .6s; transition-property: opacity; } .carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right { opacity: 1; } .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right { opacity: 0; } .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active, .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev { transform: translateX(0); transform: translate3d(0, 0, 0); } .carousel-indicators{ @media @max767 { display: none; } } /****************************** sideform / callback ****************************************/ .head_callbackcss li { display: table-cell; list-style: none; margin: 0px; padding: 0px; @media @max767 { font-size: 13px; } } input.callback_input1 { padding:1px 5px; border: 1px solid #colors[primary]; } button.callback_btn1 { background: #colors[primary]; color: #fff; border: 1px solid #colors[primary]; padding: 2px 5px; @media @max767 { padding: 3px 6px 0; font-size: 11px; } } .fixed_contact{ position: fixed; right: 0px; background:#colors[primary]!important; text-align:center; z-index:9999; color:#fff!important; top:50%; cursor:pointer; height:35px; display:inline-flex; right:-57px; border-top-left-radius:0px; border-bottom-left-radius:0px; transform:rotate(-90deg); @media @max767 { top:40%; } p{ color: #colors[white]!important; font-size: 15px; } } .w3-button:hover { color: #colors[black]!important; background-color: #946227 !important; } .fixed_contact_scroll{ width:200px; right:0px; overflow: hidden; position: fixed; background:#f2f2f2; top:50%; margin-top: -200px; z-index:9999999; padding:20px; border:5px solid #colors[black]; border-right: 0px; } #close{ position: absolute; top:20px; right:20px; font-size: 20px; color: #colors[black]; border: none; background: none; } .side_form_btn{ width:100%; background: #colors[primary]; border: 0px; color: #fff; margin-top:-15px; padding:5px; } .w3-sidebar { height: auto; top: 20%; width: 200px; background-color: #ffffff; position: fixed!important; z-index: 9999; overflow: auto; border: 1px solid #000000; padding: 5px 15px; @media @max767 { top: 10%; } } .w3-button{ padding: 0px 0px!important; } .blink { background-color: #946227; border: none; color: #fff; cursor: pointer; display: inline-block; padding: 5px 25px; text-align: left; text-decoration: none; -webkit-animation: glowing 1000ms infinite; -moz-animation: glowing 1000ms infinite; -o-animation: glowing 1000ms infinite; animation: glowing 1000ms infinite; margin-bottom: 0px; letter-spacing: 0.5px; } @-webkit-keyframes glowing { 0% { background-color: #fe0009; -webkit-box-shadow: 0 0 3px #fe0009; } 25% { background-color: #c6a250; -webkit-box-shadow: 0 0 4px #c6a250; } 50% { background-color: #fe0009; -webkit-box-shadow: 0 0 4px #fe0009; } 100% { background-color: #202032; -webkit-box-shadow: 0 0 3px #202032; } } @-moz-keyframes glowing { 0% { background-color: #c6a250; -moz-box-shadow: 0 0 3px #c6a250; } 50% { background-color: #fe0009; -moz-box-shadow: 0 0 4px #fe0009; } 100% { background-color: #202032; -moz-box-shadow: 0 0 3px #202032; } } @-o-keyframes glowing { 0% { background-color: #c6a250; box-shadow: 0 0 3px #c6a250; } 50% { background-color: #fe0009; box-shadow: 0 0 4px #fe0009; } 100% { background-color: #202032; box-shadow: 0 0 3px #202032; } } @keyframes glowing { 0% { background-color: #c6a250; box-shadow: 0 0 3px #c6a250; } 50% { background-color: #fe0009; box-shadow: 0 0 4px #fe0009; } 100% { background-color: #202032; box-shadow: 0 0 3px #202032; } } /****************************** home ****************************************/ #home{ padding-top: 7%; @media @max767 { padding-top: 30%; } } .arrow p:before { font-family: "FontAwesome"; content: "\f105"; display: inline-block; padding-right: 3px; vertical-align: middle; font-weight: bold; padding-right: 15px; font-size: 22px; color: #946227; } #about-us { .aboutConfig ul li { display: inline-block; padding: 30px 20px; position: relative; @media @max767 { padding: 10px 10px; margin-bottom: 20px; width: 49%; &:nth-child(even)::after { content: " "; display: none; } } &::after { position: absolute; content: ""; right: 0; top: 0; height: 100%; width: 1px; background: #colors[black]; transform: rotate(20deg); } &:last-child::after { content: " "; display: none; } .value { font-size: 24px; line-height: 40px; font-weight: bold; color: #colors[black]; @media @max767 { font-size: 18px; line-height: 20px; } span { font-size: 12px; font-weight: 400; } } .text { font-family: "source_sans_proregular"; text-transform: uppercase; color: #colors[black]; @media @max767 { margin-top: 5px; } } } } .amenities{ ul li{ list-style-position: inside; padding: 5px 0px; } } .border-right{ border-right: 1px solid #946227 !important; @media @max767{ border-right: 1px solid transparent !important; } } .location{ width: 70%; @media @max767 { width: 100%; } } .futuristic{ p{ display: flex; } } hr { border: 0; border-top: 1px solid #A9A9A9; margin: 20px 0; } #specification{ color: #colors[white]; span{ font-weight: bold; font-size: 16px; color: #colors[primary]; } } .completed-projects{ h2{ font-weight: 700; //font-family: 'Playfair Display', serif; font-family: 'Inria Serif', serif; color: #colors[red]; } p{ font-weight: bold; } } .price{ border: 1px solid #000; padding: 10px; margin: 10px 0px; //text-align: center; p{ color: #000!important; font-weight:bold; font-size:20px; } } /****************************** Mobile ****************************************/ @media @max767 { .pt15{ padding-top: 15px; } } // .border{ // border-radius: 50px; // }