/*=========================== fonts =============================*/

/* Noto sans */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');


/* SF Pro */
@font-face {
    font-family: "SF Pro";
    src: url("../font/SF-Pro.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* Proxima Nova */
@font-face {
    font-family: 'Proxima-Nova';
    src: url('../font/ProximaNova-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima-Nova';
    src: url('../font/ProximaNova-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



/*========================== Basic css ============================*/


html {
    /* 1rem = 10px */
    font-size: 0.52vw;
}

:root {
    scroll-behavior: unset;

    /* fonts */
    --primery-font: 'SF Pro';
    --sec-font: 'Proxima-Nova';
    --notoSans-font: "Noto Sans", sans-serif;

    /* color */
    --primery-color: #FFFFFF;
    --sec-color: #F6A021;
    --body-color: #2F2F2F;

}

html,
body,
header,
footer,
main,
nav,
section,
div,
menu,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
strong,
i,
ol,
ul,
li,
form,
label,
button {
    margin: 0;
    padding: 0;
}

ol,
ul {
    list-style: none;
}

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    transition: 0.2s all ease;
    -webkit-transition: 0.2s all ease;
    -moz-transition: 0.2s all ease;
}

a:visited,
a:hover,
a:active {
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* body */
body {
    font-family: var(--primery-font);
    font-size: 4rem;
    font-weight: 400;
    background: var(--body-color);
    color: var(--primery-color);
    line-height: 1.358;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--primery-font);
}

/* title */
.title_xxl {
    font-size: 8.1rem;
    font-weight: 700;
    line-height: 1.32;
    color: var(--primery-color);
}

/* text */
.text_xxl {
    font-size: 4.5rem;
    font-weight: 400;
    line-height: 1.33;
    color: var(--primery-color);
}

.text_base {
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.32;
    color: var(--primery-color);
}


/* button */
.button {
    font-family: var(--primery-font);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.34;
    color: var(--primery-color);
    background: var(--sec-color);
    display: inline-block;
    padding: 3.2rem 3.8rem;
    border-radius: 5rem;
}

.button:hover {
    background: rgb(246, 160, 33, 0.9);
    color: var(--primery-color);
}

/*====================== header section ========================*/
.header_section {
    width: 100%;
    display: block;
    padding-top: 14.3rem;
    position: absolute;
    z-index: 1024;
}

.logo {
    display: inline-block;
    width: 16.3rem;
}

.menu {
    width: 63.3rem;
    margin-left: auto;
    background: var(--sec-color);
    padding: 4rem;
    border-radius: 11rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu li {
    line-height: 0.4;
}

.menu li a {
    font-size: 2.2rem;
    line-height: 1.36;
    font-weight: 700;
}

.menu li a:hover {
    text-decoration: underline;
}

.hamburger {
    border: none;
    background: transparent;
    width: 4rem;
    margin-left: auto;
}


/*================= hero section ===================*/
.hero_section {
    background-image: url('../img/hero-img-1.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 31rem 0 15.5rem;
    position: relative;
}

.hero_section::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: transparent linear-gradient(to left, #FFFFFF00 0%, #09090980 48%, #000000 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    inset: 0;
}

.hero_section .container {
    position: relative;
    z-index: 9;
}

.hero_wrapper h1 {
    padding-bottom: 3.8rem;
}

.hero_section .btn_group {
    display: flex;
    gap: 6rem;
}

/*================= Innovator section ===================*/
.who_we_are_section {
    padding: 9rem 0 5.4rem;
}

.who_we_are_content {
    text-align: center;
}

.who_we_are_content h3 {
    padding-bottom: 8rem;
}

.who_we_are_content p {
    max-width: 143rem;
    margin: 0 auto;
}

/*================= hero section ===================*/
.service_section {
    padding-bottom: 24rem;
}

.service_section h3 {
    padding-bottom: 7rem;
    text-align: center;
}

.service_section .row {
    --bs-gutter-x: 11.6rem;
    --bs-gutter-y: 6.4rem;
}

.service_box {
    text-align: center;
}

.box_img {
    overflow: hidden;
    border-radius: 8.2rem;
}

.service_box .box_img img {
    width: 100%;
    border-radius: 8.2rem;
    transition: 0.2s all ease;
}

.box_img:hover img {
    transform: scale(1.15);
}

.service_box .box_text {
    padding-top: 1.5rem;
}

/*================= About section ===================*/
.about_section {
    padding-bottom: 19rem;
}



.about_section h3 {
    padding-bottom: 10rem;
    text-align: center;
}

.about_content p {
    max-width: 107rem;
    padding-bottom: 3.5rem;
}

.about_img img {
    width: 100%;
}

/*================= footer section ===================*/
.footer_section {
    position: relative;
    padding: 18.3rem 0 20rem;
}

.footer_section::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: 20rem;
    background: transparent linear-gradient(180deg, #00000000 0%, #09090980 48%, #000000 100%) 0% 0% no-repeat padding-box;
    opacity: 0.2;
}

.footer_wrapper {
    max-width: 128.5rem;
    margin: 0 auto;
}

.footer_wrapper h4 {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.27;
    padding-bottom: 4.4rem;
    font-family: var(--sec-font);
}


.footer_info p,
.footer_info a,
.footer_list a {
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.36;
    color: var(--primery-color);
    font-family: var(--notoSans-font);
}

.footer_list li {
    line-height: 0.6;
}


.footer_logo img {
    width: 22rem;
}

.footer_list {
    text-align: right;
}

/*================ innovator page codes ===================*/

/*============ innovator header section ===============*/
.who_we_are_header {
    background-image: url('../img/who-we-are-header.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 19rem;
    position: relative;
}

.who_we_are_header::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: transparent linear-gradient(to top, #00000000 0%, #09090980 48%, #000000 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    inset: 0;
}

.who_we_are_header .container {
    position: relative;
    z-index: 9;
}   

/*============== who_we_are section =================*/
.who_we_are_section {
    padding: 10rem 0 17rem;
}

.who_we_are_texts h3 {
    padding: 0;
    padding-bottom: 5rem;
}

.who_we_are_texts p:not(:last-child) {
    padding-bottom: 4rem;
}

/*================ service page codes ===================*/

/*============== service header section =================*/
.service_header {
    background-image: url('../img/services-header-img.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 19rem;
    position: relative;
}

.service_header::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: transparent linear-gradient(to top, #00000000 0%, #09090980 48%, #000000 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    inset: 0;
}

.service_header .container {
    position: relative;
    z-index: 9;
}


/*============== our service section =================*/
.our_service_section {
    padding: 10rem 0;
}

.our_service_content {
    text-align: center;
}

.our_service_content h3 {
    padding-bottom: 5rem;
}

.our_service_content p {
    max-width: 142rem;
    margin: 0 auto;
}

/*================ internal Renovation page codes ===================*/

/*============== internal header section =================*/
.internal_header {
    background-image: url('../img/internal-renovation-header-img.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 19rem;
    position: relative;
}

.internal_header::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: transparent linear-gradient(to top, #00000000 0%, #09090980 48%, #000000 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    inset: 0;
}

.internal_header .container {
    position: relative;
    z-index: 9;
}

/*============== internal section =================*/
.internal_section {
    padding: 0;
    padding: 10rem 0;
}

.internal_section h3 {
    padding: 0;
    padding-bottom: 8rem;
}


/*============== Revamp section =================*/
.revamp_content {
    text-align: center;
}

.revamp_content h3 {
    padding-bottom: 5rem;
}

.revamp_content p {
    max-width: 142rem;
    margin: 0 auto;
}

/*================ External Renovation page codes ===================*/

/*============== External header section =================*/
.external_header {
    background-image: url('../img/external-renovation-header-img.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 19rem;
    position: relative;
}

.external_header::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: transparent linear-gradient(to top, #00000000 0%, #09090980 48%, #000000 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    inset: 0;
}

.external_header .container {
    position: relative;
    z-index: 9;
}

/*============== Revamp section =================*/
.revamp_section {
    padding: 10rem 0 25rem;
}

.revamp_content {
    text-align: center;
}

.revamp_content P:not(:last-child) {
    padding-bottom: 4rem;
}

/*============== Choose Us section =================*/
.choose_us_section {
    padding-bottom: 27.4rem;
}

.choose_us_content {
    text-align: center;
}

.choose_us_content h3 {
    padding-bottom: 5rem;
}

.choose_us_content p {
    max-width: 144rem;
    margin: 0 auto;
}

/*================ Kitchen Renovation page codes ===================*/

/*============== kitchen hero section =================*/
.kitchen_hero {
    background-image: url('../img/kitchen-renovation-hero-img.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    padding: 45.7rem 0 10.6rem;
}

.kitchen_hero::after {
    background: transparent linear-gradient(to top, #00000000 0%, #09090980 48%, #000000 100%) 0% 0% no-repeat padding-box;
}

/*============== kitchen Renovation section =================*/
.kitchen_renovation_section {
    padding: 9rem 0 12rem;
}

.kitchen_renovation_content {
    text-align: center;
}

.kitchen_renovation_content h3 {
    padding-bottom: 5rem;
}

.kitchen_renovation_content p {
    max-width: 142rem;
    margin: 0 auto;
    padding-bottom: 4.2rem;
}

/*============== for kitchen section =================*/
.for_kitchen_section {
    padding-bottom: 21.2rem;
}

.for_kitchen_section h2 {
    padding-bottom: 7rem;
    text-align: center;
}

.for_kitchen_item:not(:last-child) {
    padding-bottom: 9rem;
}

.for_kitchen_item .item_img img {
    width: 34.3rem;
}

.for_kitchen_item .item_content p {
    max-width: 109rem;
}

/*================ Bathroom Renovation page codes ===================*/

/*============== Bathroom hero section =================*/
.bathroom_hero {
    background-image: url('../img/bathroom-renovation-hero-img.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 45.7rem 0 10.6rem;
}

.bathroom_hero::after {
    background: transparent linear-gradient(to top, #00000000 0%, #09090980 48%, #000000 100%) 0% 0% no-repeat padding-box!important;
}


/*============== Bathroom Renovation section =================*/
.bathroom_renovation_section {
    padding: 9rem 0 6rem;
}

.bathroom_renovation_content {
    text-align: center;
}

.bathroom_renovation_content h3 {
    padding-bottom: 5rem;
}

.bathroom_renovation_content p {
    max-width: 139rem;
    margin: 0 auto;
}

.bathroom_renovation_content p:not(:last-child) {
    padding-bottom: 4.2rem;
}

/*============== for Bathroom section =================*/
.for_bathroom_section {
    padding: 0;
    padding-bottom: 22.7rem;
}

.for_bathroom_section h2 {
    padding-bottom: 7rem;
    text-align: center;
}

.for_bathroom_item .item_content p {
    max-width: 111rem;
}


/*================ Room Renovation page codes ===================*/

/*============== room header section =================*/
.room_header {
    background-image: url('../img/room-renovation-header-img.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    padding: 45.7rem 0 10rem;
}

.room_header::after,
.bed_room_hero::after,
.construction_hero::after,
.roops_hero::after,
.desings_hero::after,
.contact_hero::after {
    background: transparent linear-gradient(to top, #00000000 0%, #09090980 48%, #000000 100%) 0% 0% no-repeat padding-box;
}

/*============== room renovation section =================*/
.room_renovation_section {
    padding: 9rem 0 6rem;
}

.room_renovation_content {
    text-align: center;
}

.room_renovation_content h3 {
    padding-bottom: 5rem;
}

.room_renovation_content p {
    max-width: 142rem;
    margin: 0 auto;
}

.room_renovation_content p:not(:last-child) {
    padding-bottom: 4.2rem;
}

/*============== for room  section =================*/
.for_room_section {
    padding-bottom: 22rem;
}

.for_room_section h2 {
    text-align: center;
    padding-bottom: 6rem;
}

/*================ Room Renovation page codes ===================*/

/*============== Bathroom hero section =================*/
.bed_room_hero {
    background-image: url('../img/bedroom-renovation-hero-img.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 45.7rem 0 10rem;
}

/*============== for Bathroom section =================*/
.for_bedroom_item .item_content p {
    max-width: 111rem;
}

/*================ construction page codes ===================*/

/*============== construction hero section =================*/
.construction_hero {
    background-image: url('../img/constructions-hero-img.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 45.7rem 0 10rem;
}

/*============== construction  section =================*/
.construction_section {
    padding: 9rem 0 20.4rem;
}

/*================ Roops page codes ===================*/

/*============== Roops hero section =================*/
.roops_hero {
    background-image: url('../img/roofs-hero-img.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 45.7rem 0 10rem;
}


/*================ construction page codes ===================*/
.desings_hero {
    background-image: url('../img/designs-hero-img.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 45.7rem 0 22.9rem;
}

.desings_section P {
    max-width: 141rem;
    margin: 0 auto;
}

/*================ contact page codes ===================*/

/*============== contact hero section =================*/
.contact_hero {
    background-image: url('../img/contact-hero-img.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 45.7rem 0 10rem;
}

/*============== contact hero section =================*/
.contact_section {
    padding: 7rem 0 20.5rem;
}

.contact_section h3 {
    text-align: center;
    padding-bottom: 9rem;
}

.contact_form {
    max-width: 121.6rem;
    margin: 0 auto;
}

.contact_form .row {
    --bs-gutter-x: 1.2rem;
    --bs-gutter-y: 2.2rem;
}

.contact_form input,
.contact_form textarea {
    width: 100%;
    font-size: 4.5rem;
    font-weight: 400;
    line-height: 1.33;
    color: var(--primery-color);
    background: transparent;
    border: 0.3rem solid var(--primery-color);
    border-radius: 3rem;
}

.contact_form input {
    padding: 3.1rem 4.8rem;
    text-transform: capitalize;
}

.contact_form .readonly_box input {
    text-align: center;
}

.contact_form textarea {
    height: 45.3rem;
    padding: 2.8rem 3.6rem;
}

.contact_button {
    width: 100%;
    font-size: 6.4rem;
    font-weight: 700;
    line-height: 1.32;
    background: var(--sec-color);
    color: var(--primery-color);
    border: none;
    outline: none;
    border-radius: 3rem;
    padding: 2.4rem 4rem;
    cursor: pointer;
}

.btn_text {
    display: inline-block;
    transition: transform 0.3s ease;
    transition: font-size 0.3s ease;
}

.contact_button:hover {
    background: rgb(246, 160, 33, 0.65);
    color: var(--primery-color);
}

.contact_button:hover .btn_text {
    font-size: 5.6rem;
}



/* alert */

.alert {
    border-radius: 2.4rem;
    font-size: 4rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
}

.spinner-border {
    width: 4rem;
    height: 4rem;
}




/* ================ Drawing Board Page ==================== */

.drawing_board_hero {
    padding: 32rem 0 9rem;
}




/* work cards section */

.work_cards_section {
    padding: 17rem 0 11rem;
    background: #2F2F2F;
}

.work_cards_section .row {
    --bs-gutter-x: 15rem;
    --bs-gutter-y: 14rem;
}

.work_image_card {
    display: block;
    border-radius: 7rem;
    overflow: hidden;
    position: relative;
}

.work_image_card img.w-100 {
    border-radius: 7rem;
    height: 54rem;
    transition: 0.2s all ease;
}

.work_image_card:hover img.w-100 {
    transform: scale(1.15);
}

.work_image_card .title_xl {
    position: absolute;
    bottom: 5.4rem;
    right: 5rem;
    color: #fff;
    font-size: 5.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3rem;
}

.work_image_card .title_xl img {
    width: 6.2rem;
    transition: 0.2s all ease;
}



/* work images section */

.work_images_section {
    padding: 13rem 0 11rem;
}

.work_images_section .row {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 0;
}

.work_images_section .work_image {
    margin-top: 2rem;
}

.work_images_section .grid1 {
    display: grid;
    grid-template-columns: 36.08% 38.84% 22.74%;
    gap: 0rem 2rem;
}

.work_images_section .grid2 {
    display: grid;
    grid-template-columns:  22.74% 38.84%  36.08% ;
    gap: 0rem 2rem;
}

.work_images_section .grid3 {
    display: grid;
    grid-template-columns:  59.96% 38.84%;
    gap: 0rem 2rem;
}

.work_images_section .grid4 {
    display: grid;
    grid-template-columns: 38.84% 59.96%;
    gap: 0rem 2rem;
}

.work_images_section .grid5 {
    display: grid;
    grid-template-columns: 38.84% 36.08% 22.74%;
    gap: 0rem 2rem;
}

.work_images_section .grid6 {
    display: grid;
    grid-template-columns: 62.75% 36.08%;
    gap: 0rem 2rem;
}

.work_images_section .grid7 {
    display: grid;
    grid-template-columns: 36.08% 62.75%;
    gap: 0rem 2rem;
}