/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

#additional_text{
        padding-top: 25px;
        font-weight: bold;
        max-width: 700px;
        margin: auto;
}
p#checkbox-massage {
    text-align: left;
    background-color:#4a4a4a;
    border-radius: 8px;
    padding: 4px;
    font-size:13px;
}
.bg-color {
    background-color: #ebeced;
}
.section h2 {
	color: #1c3556;
}
.parWd {
	font-size: 18px;
	max-width: 700px;
	margin: -14px auto 20px !important;
}
.hig-txt {	
	color: #e53946 !important;
	font-family: 'Gotham';
}
.buttons button {
    border-radius: 50px;
    background-color: #e53946;
    color: #fff;
    border: none;
    width: 120px;
    max-width: 100%;
}
#optionalExtras .buttons button {
    gap: 5px;
}
.backBtn:hover, .nextBtn:hover {
	color: #fff !important;
}
.nextBtn {
    background: #457b9d !important;
}
.nextBtn:hover {
    background: #e53946 !important;
}

.ct_mg2 {
    position: absolute;
    top: 0;
    z-index: -1;
    transition: 0.8s ease-in-out;
}
.dul_mghr:hover .ct_mg2 {
    z-index: 0;
}
.fan-sec h3 {
	color: #fff !important;
}
.fan-sec p {
	color: #fff !important;
}
#inner-wrap {
	background: #ebeced;
}
.our_promise ul li {
	color: #fff !important;
}

.width_500, .your-pcode {
    width: 100% !important;
    margin: auto !important;
}
.hide{
    display: none;
}
.our_promise h3 {
	background: #e53946;
	padding: 10px !important;
	color: #fff;
	margin-bottom: 0 !important;
}
.our_promise ul {
	border: 2px solid #e53946;
	padding: 10px;
}
.all-option {
    background-color: #f7f7f7 !important;
    cursor: pointer;
    box-shadow: none;
    border-radius: 10px;
    transition: 0.2s;
    width: 400px !important;
    max-width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 15px !important;
    justify-content: space-between;
    margin: 0px !important;
}

.all-option img {
    width: 150px !important;
}
.nwe_syle {
    flex-direction: column;
    align-content: center;
    gap: 10px;
}
.your-pcode .input,
.your-pcode select {
    width: 400px !important;
    max-width: 100%;
    padding: 8px 10px;
}

.your-pcode .button {
    width: 400px !important;
    max-width: 100%;
    background: #e53946;
    color: #fff;
    border: none;
}
.your-pcode .button:hover {
    background: #457b9d;
}
textarea#DescriptionOfWorkTextArea {
    padding: 9px;
}
.field.your-pcode {
    max-width: 550px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
.adns_btn_styl {
    display: flex;
    align-items: center;
    margin: 0 !important;
}
.adns_btn_styl .button {
    border-radius: 50px !important;
    padding: 6px 9px;
    font-size: 12px;
    background: #1c3556;
    color: #fff;
    border: none;
    line-height: 1;
}
.adns_btn_styl .button:hover {
    background: #e53946;
}
.adns_btn_styl .qty {
    font-size: 18px;
    background: transparent;
    border: none;
    max-width: 30px;
    padding: 0 !important;
    height: auto;
}
.inp_nwsy input {
    margin-top: 10px;
}

#sizeOfStoragePlatform .field {
    padding: 20px;
}
#sizeOfStoragePlatform .field button {
    background: #457b9d;
    color: #fff;
    border: none;
    width: 420px;
    border-radius: 50px;
}
#sizeOfStoragePlatform .field button:hover {
    background: #e53946;
}
#sizeOfStoragePlatform .field .control {
    width: 420px;
    max-width: 100%;
    margin: 0 !important;
}
#optionalExtras .nwe_syle {
    flex-direction: row;
}
#optionalExtras .all-option {
    width: 450px !important;
    max-width: 100%;
}
.optional-extra:nth-child(5),
.optional-extra:nth-child(6),
.optional-extra:nth-child(7),
.optional-extra:nth-child(8) {
    text-align: left;
}
.optional-extra:nth-child(5) p,
.optional-extra:nth-child(6) p,
.optional-extra:nth-child(7) p,
.optional-extra:nth-child(8) p {
    width: 62%;
    max-width: 100%;
}
.qty-input {
	margin-top: 0 !important;
	font-size: 16px !important;
	padding: 2px 5px !important;
	height: auto;
	width: 60px !important;
}
.optional-extra:nth-child(9),
.optional-extra:nth-child(10) {
    flex-direction: column;
    gap: 10px;
}
.optional-extra:nth-child(9) p,
.optional-extra:nth-child(10) p {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.optional-extra strong {
    font-size: 16px;
}
.meter-based input {
	width: 150px;
	padding: 5px !important;
    height: auto;
}






#sizeOfCommercial .field {
    padding: 20px;
    margin-top: 20px;
}
#sizeOfCommercial .field button {
    background: #457b9d;
    color: #fff;
    border: none;
    width: 420px;
    border-radius: 50px;
}
#sizeOfCommercial .field button:hover {
    background: #e53946;
}
#sizeOfCommercial .field .control {
    width: 420px;
    max-width: 100%;
    margin: 0 !important;
}



#section-form .brand-color {
    color: #afd805 !important;
}


#section-form .pro_bar {
    width: 20% !important;
    margin: 0 auto;
    height: 5px !important;
    background-color: #afd805;
}

#section-form .header {
    display: none;
    text-align: left;
    color: #fff;
    margin-left: 6px;
   font-size: 13px;
   padding: 5px;
}


#section-form input[type="radio"] {
    accent-color: #000;
}

#section-form .ans_box {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px !important;
    transition: 0.2s;
    padding-left: 10px;
    min-height: 218px;
}

#section-form .ans_box img {
    width: 120px;
    margin: 0 auto 10px;
}

#section-form .ans_box:hover {
    border-bottom: 5px solid #afd805 !important;
}

#section-form .ans_box2 {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px !important;
    background: #afd805;
}

#section-form .ans_box2 .radio {
    width: 100% !important;
}

#section-form .ans_box2 input {
    float: left;
}

#section-form .ans_box2 p {
    color: #000;
}

.title.is-2{
    color: black;
}

#section-form .fan-sec {
    width: 600px !important;
    margin: auto !important;
    border-radius: 20px;
    /* background: url("./images/woodBack.jpg"); */
    background-color:#1c3557;  
    background-size: cover;
    border: 2px solid #444;
}
.buttons.mt-5 {
	justify-content: center;
}

#commercialOtherMaterialBox, #FlatRoofOtherMaterialBox {
	width: 500px;
	max-width: 100%;
	margin: 0 auto;
}
.field {
    background-color:#1c3557;  
    border-radius: 8px;
}

#section-form .input {
    border-color: white !important;
    color: #000000 !important;
}

#section-form .input:hover {
    border-color: white !important;
}
#section-form .fnl-svy p a {
    color: #fff !important;
}
#section-form .fnl-svy p a:hover {
	color: #e53946 !important;
}

#section-form .btn-color {
    background-color:#E53946 !important;
    transition: 0.3s;
    color: white;
}
#section-form .btn-color:hover {
    background-color: #457b9d !important;
    color: #fff !important;
}
#TypeOfGardenRoomDescription, #sizeOfGardenDescription, #typeOfRoofDescription, #AlreadyHaveStructureDescription {
	max-width: 700px;
	border-radius: 10px;
	background-color: #f7f7f7;
}
textarea:focus{
color: #000 !important;
}

.pitchedRoofMaterial .all-option:first-child img {
    padding: 25px;
}

.flatRoofMaterials .all-option:not(:last-child) img {
    padding: 25px;
}

.RoofTypeSelection .nwe_syle, .pitchedRoofBuildingType .nwe_syle, #RoofMaterialSection .nwe_syle, #roofPitchedTile .nwe_syle, #FlatroofSection .nwe_syle, #flatroofnewconvering .nwe_syle,#selectresidential .nwe_syle {
	flex-direction: row;
}
.icn_bxe {
    flex-direction: column;
    width: 270px !important;
}
#FlatroofSection .icn_bxe, #flatroofnewconvering .icn_bxe {
    padding: 0 !important;
    background: #f2f6ff !important;
    width: 220px !important;
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.2));
    justify-content: flex-start;
}
#FlatroofSection .icn_bxe p, #flatroofnewconvering .icn_bxe p{
    padding: 10px 0 !important;
}
#FlatroofSection .icn_bxe img, #flatroofnewconvering .icn_bxe img {
    width: 100% !important;
    border-radius: 10px 10px 0 0;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
#flatroofnewconvering .icn_bxe p {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}
#flatroofnewconvering .icn_bxe p span {
    font-size: 14px;
}

.all-option p {
	font-weight: 600;
    font-size: 18px;
}

#RoofMaterialSection .icn_bxe, #roofPitchedTile .icn_bxe {
    padding: 0 !important;
    background: #f2f6ff !important;
    width: 270px !important;
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.2));
    justify-content: flex-start;
}

#RoofMaterialSection .icn_bxe p, #roofPitchedTile .icn_bxe p {
    padding: 10px 0 !important;
}

#RoofMaterialSection .icn_bxe img, #roofPitchedTile .icn_bxe img {
    width: 100% !important;
    border-radius: 10px 10px 0 0;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

#RoofMaterialSection .icn_bxe p {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

#RoofMaterialSection .icn_bxe p span {
    font-size: 14px;
}
.pitchedRoofBuildingType .icn_bxe {
    width: 250px !important;
}
#roofsizefiledbox button {
    width: 420px;
    font-size: 1.125rem;
}
#roofsizetext {
    font-size: 20px;
}

#needourremovalmodal table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
 margin-bottom: 0;
}

#needourremovalmodal th,
#needourremovalmodal td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

#needourremovalmodal th {
  background-color: #f4f4f4;
  font-weight: bold;
}
#flatroofabsetor {
    margin-top: 30px;
}
#roofsizefiledbox {
    padding: 20px;
}
#roofsizefiledbox .buttons {
    max-width: 100%;
    margin: 0 !important;
}


/* Media Queries */
@media only screen and (min-width: 1216px) {

    #section-form .width_800 {
        width: 800px;
        margin: auto !important;
    }
    #section-form  .width_600 {
        width: 600px;
        margin: auto !important;
    }
    #section-form .width_700 {
        width: 700px;
        margin: auto !important;
    }

}

@media only screen and (min-width: 768px) {
.all-option:hover {
    /* background-color: #1c3556 !important;
    transform: scale(1.06);
    box-shadow: 2px 2px 10px #8080801c; */
    outline: 1px solid #e53946;
}
.all-option:hover img {
    /* filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%); */
}
.all-option:hover p {
    /* color: #fff !important; */
}

.pitchedRoofMaterial .all-option:hover img {
    filter: none;
}
.flatRoofMaterials .all-option:not(:last-child):hover img {
    filter: none;
}
.commercialRoofMaterial .all-option:not(:last-child):hover img {
    filter: none;
}



}


@media only screen and (max-width: 768px) {
    .section h2 {
        margin-bottom: 1.25rem !important;
    }

    .all-option {
        /* min-width: 100% !important;
        flex-direction: row; */
    }

    .all-option img {
        width: 60px !important;
    }
    #section-form .mob_box {
        display: flex !important;
        align-items: center;
        padding: 0.5rem !important;
        min-height: auto;
    }
    #section-form .mob_box img {
        height: 50px !important;
        margin: 0 20px 0 10px !important;
        width: 50px !important;
    }
    #section-form .mob_box p {
        padding: 0 !important;
        margin: 0 !important;
        text-align: left;
    }
    #section-form  .mob_box2 {
        display: flex !important;
        align-items: center;
        padding: 0.5rem !important;
    }
    #section-form  .width_800 .box-column {
        padding: 0.25rem !important;
    }
    #section-form   .ctn-width .box-column {
        padding: 0.25rem !important;
    }
    #section-form  .width_700 .box-column {
        padding: 0.25rem !important;
    }
    #section-form  .ans_box:hover {
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    #section-form  .width_700 {
        width: 450px !important;
        margin: auto !important;
    }
    #section-form  .fan-sec {
        width: 100% !important;
    }
    #section-form .h22 {
        padding: 0 !important;
    }
#optionalExtras .optional-extra {
    /* min-height: auto !important;
    flex-direction: column;
    margin: 5px !important; */
}
.pitchedRoofMaterial .all-option:first-child img {
    padding: 7px;
}

.flatRoofMaterials .all-option:not(:last-child) img {
    padding: 7px;
}

.icn_bxe {
	flex-direction: row;
	width: 400px !important;
	justify-content: flex-start;
	gap: 10px;
	padding: 10px !important;
}
.parRgt {
	text-align: left;
}
.all-option p {
	text-align: left;
}
#RoofMaterialSection .icn_bxe,
#roofPitchedTile .icn_bxe {
    width: 400px !important;
}
#RoofMaterialSection .icn_bxe img,
#roofPitchedTile .icn_bxe img {
    width: 70px !important;
    border-radius: 10px 0 0 10px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
#RoofMaterialSection .icn_bxe p,
#roofPitchedTile .icn_bxe p {
    padding: 0px 0 !important;
}
#FlatroofSection .icn_bxe,
#flatroofnewconvering .icn_bxe {
    width: 400px !important;
}

#FlatroofSection .icn_bxe p,
#flatroofnewconvering .icn_bxe p {
    padding: 0 0 !important;
}

#FlatroofSection .icn_bxe img,
#flatroofnewconvering .icn_bxe img {
    width: 70px !important;
    border-radius: 10px 0 0 10px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.pitchedRoofBuildingType .icn_bxe {
    width: 400px !important;
}



}

@media only screen and (max-width: 480px) {
.our_promise h3 {
/* 	padding: 12px 0 !important; */
}
#section-form .btn-color {
	font-size: 16px;
}
#section-form {
	padding: 30px 15px !important;
}
.fnl-svy p {
	text-align: left;
}
.our_promise ul li {
	font-size: 16px !important;
}
#section-form .fan-sec {
	padding: 30px 15px;
}
.fan-sec p {
	font-size: 17px;
}
#roofsizetext {
    font-size: 20px !important;
}
.qty-input {
	width: 45px !important;
}

}



@media only screen and (max-width: 385px) {
.optional-extra strong {
    font-size: 14px;
}
.optional-extra p {
    font-size: 14px;
}


}