@charset "utf-8";

/*..............embedded fonts..............*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Outfit:wght@100..900&display=swap');


:root{
    --dm-sans: "DM Serif Display", serif;
    --outfit: "Outfit", sans-serif;
    --common-transition: all 0.3s ease 0s;
    --white:#fff; 
    --black: #000;
    --body-color:#FFF9EF;
    --deep-red: #A52823;
    --yellow:#ED9A10;
    --section-bg: #FEF1DF;
    --deep-gray: #222222;

}
/*..............common styles..............*/

html, body { margin: 0; padding: 0; font-size:16px; font-weight: 400; color:#626262; font-family: 'Montserrat', sans-serif; line-height: 27px;}
h1, h2, h3, h4, h5, h6 { margin:0 0 20px; padding:0; font-family: 'Montserrat', sans-serif; color:#0a2a37;}
h1{ font-size:36px;}
h2{ font-size:36px;}
h3{ font-size:24px;}
/*h4{ font-size:28px;}
h5{ font-size:20px;}
h6{ font-size:16px;}*/

p{ font-size:16px; margin:0 0 20px; padding:0; font-weight: 400;}

img{ max-width: 100%;}

a, img{ border:0; text-decoration: none; outline: none;}
a, a:link, a:visited, a:focus, a:hover { color:#ce9463; outline: none; text-decoration: none; transition:all 0.3s ease 0s;}
a:hover{ text-decoration:none; color: #000;}

.container-fluid{padding:0 30px;}

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

input, textarea, select{ font-weight: 400; font-size: 17px; outline: none;}
input[type="submit"]{ font-weight: 600; font-size: 17px; transition:all 0.3s ease 0s; outline: none;}

/* --- for placeholder color --- */
/* .form-control::-moz-placeholder{color:#505873;opacity:1;}
.form-control:-ms-input-placeholder{color:#505873;}
.form-control::-webkit-input-placeholder{color:#505873;} */
/* --- for placeholder color --- */

/* --- only use for wordpress (Image alignment) --- */
.alignleft , .alignnone{float:left; margin:0 15px 10px 0;}
.alignright{float:right; margin:0 0 10px 15px;}
.aligncenter{margin:10px auto; display:block;}
/* --- only use for wordpress (Image alignment) --- */


/* --- Button Styles --- */

.btn, a.btn {position: relative; border: 2px solid transparent; background: #a82924; color: #fff; padding: 10px 20px; font-size: 16px; border-radius: 3px; font-weight: 500; overflow: hidden; display: inline-block; transition:all 0.3s ease 0s; min-width: 150px}
.btn:hover, .btn:focus, .btn:hover, a.btn:focus{color: #7e7c8c; box-shadow:0 -58px 0 #fff inset; border-radius: 3px; border: 2px solid #a82924!important;}

.btn.border, a.btn.border {border: 2px solid #83807f!important; }
.btn.border:hover, a.btn.border:hover {border: 2px solid #e1b5b4!important;}

.btn.rounded { border-radius: 40px!important;}

/* a.btn:focus{outline: none; border: 0;}*/

.large-size{padding: 10px 55px;}
.medium-size{padding: 10px 35px;}
.small-size{padding: 7px 25px;}

.whte-btn{background: #fff!important; color: #7e7c8c!important;}
.whte-btn:hover{color: #fff!important; box-shadow:0 -56px 0 #e1b5b4 inset!important; border: 2px solid #e1b5b4!important;}
/* --- Button Styles --- */


/*row with equal height column*/
.row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
/*row with equal height column*/

/* --- checkbox and radio button Styles --- */
.builder_radiobox ul li label{ font-weight: normal;}
.builder_radiobox ul li input[type="radio"]{ opacity: 0;}
.builder_radiobox ul li input[type="radio"]:empty ~ label{ position:relative; float:left; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; padding: 0 0 0 22px;}
.builder_radiobox ul li input[type="radio"]:empty ~ label:before{ position:absolute; display:block; top:2px; bottom:0; left:0; content:""; width:16px; height:16px; background:url(../images/radiobutton.png) left top no-repeat;}
.builder_radiobox ul li input[type="radio"]:checked ~ label:before{ background:url(../images/radiobutton.png) left bottom no-repeat;}
/* --- checkbox and radio button Styles --- */

/*..............common styles..............*/
.click, .closebtn {display:none; color: #fff; font-size: 30px; cursor: pointer;}

/*for header css*/
.home_page{/*background: rgba(243,238,235,.9);*/ padding:10px 0; position: absolute; width: 100%; z-index: 2;}
.hdr-top{display: flex; align-items:center; /*justify-content: space-between;*/ justify-content: center;}
.hdr-logo{width:87px;}
.hdr-logo img{width:100%;}

.hdr_fix {background: rgba(243,238,235,.9); padding:10px 0; left: 0; position: fixed; top: 0; width:100%; z-index: 999; box-shadow:0 0 12px rgba(0, 0, 0, 0.4); transition: all 0.5s; -ms-transition: all 0.5s; -webkit-transition: all 0.5s; animation: slide-down 0.7s; -ms-animation: slide-down 0.7s; -webkit-animation: slide-down 0.7s;}

@keyframes slide-down { 

0% {transform: translateY(-100%); 
-moz-transform: translateY(-100%); 
-webkit-transform: translateY(-100%); 
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%); } 
100% { 
transform: translateY(0); 
-moz-transform: translateY(0); 
-webkit-transform: translateY(0); 
-o-transform: translateY(0); 
-ms-transform: translateY(0); } 
}


.banner-sec{position: relative; /*height:100vh;*/}
.banner-sec img{width:100%; height:100%; object-fit: cover;}
.banner-txt{width:100%; position: absolute; top:50%; transform: translateY(-50%); left:0;}


.scroll-downs {position: absolute; bottom: 30px; left: 0; width: 100%; }
.scroll-downs a{text-align: center; margin:0;}
.mousey {display: inline-block; width: 3px; padding: 1px 8px; height: 30px; border: 2px solid #fff; border-radius: 15px; opacity: 0.75; box-sizing: content-box;}
.scroller {width: 3px; height: 8px; border-radius: 100%; background-color: #fff; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}
.scroll-downs p{margin:0; color:#fff; font-size:12px;}

@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}

.banner-sec:before { background: rgba(0, 0, 0, 0.5); position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0;}
.image_gallery { padding: 50px 0;}
.image_block {
    border: 3px solid #f9f2de;
    margin-bottom: 30px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 11px 3px rgba(0, 0, 0, 0.3);
    position: relative;
    padding: 50% 0;
}
.image_block img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.banner-txt span.text label { color: #fff234;}
.banner-sec .banner-txt h3 { color: #fff;}
#invoice{
    padding: 30px;
}

.invoice {
    position: relative;
    background-color: #FFF;
    min-height: 680px;
    padding: 15px
}

.invoice header {
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #3989c6
}

.invoice .company-details {
    text-align: right
}

.invoice .company-details .name {
    margin-top: 0;
    margin-bottom: 0
}

.invoice .contacts {
    margin-bottom: 20px
}

.invoice .invoice-to {
    text-align: left
}

.invoice .invoice-to .to {
    margin-top: 0;
    margin-bottom: 0
}

.invoice .invoice-details {
    text-align: right
}

.invoice .invoice-details .invoice-id {
    margin-top: 0;
    color: #3989c6
	font-family: "Montserrat";
}

.invoice main {
    padding-bottom: 50px
}

.invoice main .thanks {
    margin-top: -100px;
    font-size: 2em;
    margin-bottom: 50px
}

.invoice main .notices {
    padding-left: 6px;
    border-left: 6px solid #3989c6
}

.invoice main .notices .notice {
    font-size: 1.2em
}

.invoice table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px
}

.invoice table td,.invoice table th {
    padding: 15px;
    background: #eee;
    border-bottom: 1px solid #fff
}

.invoice table th {
    white-space: nowrap;
    font-weight: 400;
    font-size: 16px
}

.invoice table td h3 {
    margin: 0;
    font-weight: 400;
    color: #3989c6;
    font-size: 1.2em
}

.invoice table .qty,.invoice table .total,.invoice table .unit {
    text-align: right;
    font-size: 1.2em
}

.invoice table .no {
    color: #fff;
    font-size: 1.6em;
    background: #3989c6
}

.invoice table .unit {
    background: #ddd
}

.invoice table .total {
    background: #3989c6;
    color: #fff
}

.invoice table tbody tr:last-child td {
    border: none
}

.invoice table tfoot td {
    background: 0 0;
    border-bottom: none;
    white-space: nowrap;
    text-align: right;
    padding: 10px 20px;
    font-size: 1.2em;
    border-top: 1px solid #aaa
}

.invoice table tfoot tr:first-child td {
    border-top: none
}

.invoice table tfoot tr:last-child td {
    color: #3989c6;
    font-size: 1.4em;
    border-top: 1px solid #3989c6
}

.invoice table tfoot tr td:first-child {
    border: none
}

.invoice footer {
    width: 100%;
    text-align: center;
    color: #777;
    border-top: 1px solid #aaa;
    padding: 8px 0
}

@media print {
    .invoice {
        font-size: 11px!important;
        overflow: hidden!important
    }

    .invoice footer {
        position: absolute;
        bottom: 10px;
        page-break-after: always
    }

    .invoice>div:last-child {
        page-break-before: always
    }
}

/*-- New_css(30-12-2019) --*/

.bann-left h2, .bann-left h6{color: #fff; margin-bottom: 6px;}
.bann-left p, .bann-right p, .bann-left h2, .bann-left h6{color: #fff; margin-bottom: 6px; line-height: 1.4}
.foot-top{ padding: 30px 0; background: #e8e8e8; text-align: center; font-size: 12px;}
.foot-top p{margin-bottom: 0; font-size: 12px;}
.foot-bottom{ padding: 20px 0; background: #e8e8e8; text-align: center;}
.bann-center p{ line-height: 1.2; font-size: 10px;}
.foot-bottom p{margin-bottom: 0;}
.bann-right .btn { margin-bottom: 10px;}
.moreless-button{display: none;}
.bann-left h2, .bann-left h6 { color: #ef9b11;}
.content-row{padding: 0 0 20px;}
.banner-sec.inner-banner{height: 38vh; overflow: hidden;}
.banner-sec.inner-banner img { height: auto;}

.form_content > p.moretext a { font-weight: 600; color: #e79b11;}


@media (max-width: 1199px){
.bann-left p, .bann-right p{ line-height: 1.2; font-size: 14px;}

}
@media (max-width: 1024px){
.bann-left h2 { font-size: 28px;}
.bann-left h2, .bann-left h6 { margin-bottom: 2px;}
.bann-left p, .bann-right p{margin-bottom: 2px;}
.bann-right .form-group { margin-bottom: 0.3rem;}
.bann-right label { margin-bottom: .2rem;}
.home_page { padding: 5px 0;}
.banner-sec.inner-banner { height: 30vh;}

}
@media (max-width: 991px){
    .banner-txt { position: static; transform: inherit; top: 0; padding: 15px 0;}
    .bann-right .btn { padding: 8px 20px; font-size: 16px; min-width:auto; margin-top: 10px;}
    .scroll-downs { position: relative; bottom: 0px;}
    .bann-left { margin-bottom: 15px;}
    .banner-sec.inner-banner { height: 25vh;}

}
@media (max-width: 767px){
    .image_block img { position: relative; top: 0; left: 0; transform: inherit;}
    .image_block { padding: 0% 0;}
    .foot-top { padding: 10px 0;}
    .image_gallery { padding: 30px 0;}
    .banner-sec img { height: 25vh;}
    a.moreless-button { font-weight: 600; color: #000;}
    .moreless-button{display: block;}
    .moretext { display: none;}
    .form_content{padding-top: 10px;}
    

}
@media (max-width: 575px){
    .banner-sec img { height: 21vh;}
}
@media (max-width: 480px){
    .bann-left h2 { font-size: 24px;}
    
}

.flex-container {
    display: flex;
    }

.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

.flex-child:first-child {
    margin-right: 20px;
}