* {
    box-sizing: border-box;
    margin: 0
}

.mainHeadingContainer {
    padding: 20px 0 0 !important;
    margin-top: 0;
    background: #f7f7f7
}

.mainHeadingContainer .headingContainer {
    background-image: url(../img/aboutus/about.png);
    background-size: 160px 100%;
    background-position: right;
    background-repeat: no-repeat;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    max-width: 1400px;
    margin: 0 auto
}

.mainHeadingContainer .headingContainer h1 {
    color: #000;
    font-size: 55px;
    font-weight: 500;
    line-height: 70px;
    text-align: center;
    text-transform: capitalize;
    font-family: var(--din_2014) !important;
    position: relative;
    top: -15px
}

.title_terms {
    font-size: 42px;
    text-align: center;
    font-weight: 500;
    padding: 180px 0 0
}

.CostToBuildMainContainer {
    max-width: 1018px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px
}

.costToBuildCalc {
    padding: 100px 0 58px
}

.costToBuildCalc h2 {
    color: #000;
    font-size: 47px;
    font-weight: 500;
    line-height: 60px;
    letter-spacing: -1.32px;
    margin: 0 0 48px;
    text-align: center;
    text-transform: capitalize;
    font-family: var(--din_2014) !important
}

.costToBuildCalc .whatYouGet h4,
.startBuildContInner h4 {
    font-family: var(--asap) !important;
    color: #000;
    font-size: 26px;
    font-weight: 600;
    line-height: 33px;
    margin: 0 0 24px
}

.whatYouGet .whatYouGetCards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 49px
}

.whatYouGet .whatYouGetCard {
    max-width: 415px;
    width: 100%;
    display: flex;
    align-items: center
}

.whatYouGet .whatYouGetCard:nth-child(2) {
    max-width: 452px;
    width: 100%;
    display: flex;
    align-items: center
}

.whatYouGet .whatYouGetCard span {
    background: #e3e7ef;
    width: 57px;
    height: 57px;
    border-radius: 50%;
    display: felx;
    justify-content: center;
    align-items: center;
    margin-right: 16px
}

.whatYouGet .whatYouGetCard span img {
    width: 29px;
    height: 29px
}

.whatYouGet .whatYouGetCard p {
    flex: 1;
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500
}

.whatYouGet .getStartedCard {
    display: flex;
    align-items: center
}

.whatYouGet .getStartedCard span {
    background: #e3e7ef;
    width: 57px;
    height: 57px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px
}

.whatYouGet .getStartedCard span img {
    width: 29px;
    height: 29px
}

.whatYouGet .getStartedCard p {
    flex: 1;
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500
}

.addToCart {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 100px
}

.addToCart .cartForm {
    padding: 28px 30px;
    width: 48%;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 15px
}

.addToCart .cartForm .inputBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 36px
}

.addToCart .cartForm .inputBox label {
    color: #000;
    font-family: var(--opensans) !important;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px
}

.addToCart .cartForm .inputBox input,
.addToCart .cartForm .inputBox select {
    width: 100%;
    height: 46px;
    border-radius: 11px;
    border: 1px solid rgba(0, 0, 0, .1);
    background-color: #fff;
    outline: none;
    padding: 10px 18px
}

.inputBox select option:first-child {
    color: #8d8d8d
}

.addToCart .cartForm p {
    max-width: 340px;
    width: 100%;
    color: #858585;
    font-family: var(--opensans) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 22px
}

.inputBox select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(../img/plans/select-arrow.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 18px) center;
    background-size: 10px
}

.addToCart .cartForm .addToCart {
    width: 100%;
    height: 53px;
    border-radius: 11px;
    background-color: #19437a;
    border: none;
    color: #fff;
    font-family: var(--opensans) !important;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important
}

.addToCart .cartInfo {
    padding: 22px 28px 5px;
    width: 48%;
    border-radius: 15px;
    background-color: #e3e7ef
}

.cartInfo .startBuildLogo {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 10px
}

.cartInfo .startBuildLogo img {
    max-width: 188px;
    width: 100%;
    height: 100%
}

.cartInfo h4 {
    color: #19437a;
    font-family: var(--asap) !important;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 8px
}

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

.cartInfo ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 0;
    border-bottom: 1px solid #ccd0d7
}

.cartInfo ul li:last-child {
    border-bottom: none !important
}

.cartInfo ul li span {
    color: #000;
    font-family: open sans;
    font-size: 16px;
    font-weight: 600;
    font-style: normal
}

.StartBuildCont {
    padding: 60px 0 0;
    background: #fafafc
}

.startBuildContInner {
    max-width: 1018px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px
}

.StartBuildCont .headingPara {
    width: 100%;
    font-family: var(--opensans) !important;
    color: #404040;
    font-size: 16px;
    font-weight: 500;
    line-height: 29px;
    margin: 0 0 50px
}

.StartBuildCards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline
}

.StartBuildCards .StartBuildCard {
    width: 33%;
    margin-bottom: 60px
}

.StartBuildCards .StartBuildCardContent {
    max-width: 259px;
    width: 100%;
    margin: 0 0 0 auto
}

.StartBuildCards .StartBuildCard:nth-child(1) .StartBuildCardContent {
    max-width: 305px;
    width: 100%
}

.StartBuildCard img {
    margin-bottom: 18px
}

.StartBuildCard h6 {
    font-family: var(--asap) !important;
    max-width: 214px;
    width: 100%;
    color: #010101;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    margin: 0 0 10px
}

.StartBuildCard p {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px
}

.viewVideos {
    display: flex;
    align-items: flex-start;
    padding: 11px 0 60px;
    max-width: 100%;
    width: 100%;
    margin: auto !important
}

.viewVideos .videoBox {
    max-width: 100%;
    width: 100%;
    padding: 15px
}

.viewVideos .videoBox iframe {
    max-width: 100%;
    width: 100%;
    height: 22vw;
    border-radius: 10px
}

.viewVideos .videoBox h4 {
    color: #404040;
    font-size: 19px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    margin-bottom: 16px;
    font-family: var(--opensans)
}

.viewVideos .videoBox span {
    display: inline-block;
    color: #636363;
    font-family: var(--opensans) !important;
    font-size: 15px;
    font-weight: 500;
    margin-top: 10px
}

.viewVideos .videoBox span a {
    color: #19437a
}

.viewVideos img {
    width: 100%;
    cursor: pointer
}

.publishSec {
    padding: 0
}

.publishSec .content_head {
    background: url(../img/header-banner.png);
    background-size: cover;
    background-position: right;
    padding: 80px 0 54px
}

.publishSec h1 {
    font-size: 55px;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    color: #000;
    text-transform: capitalize
}

.businessWithUs {
    padding: 30px 0
}

.businessWithUs .head {
    text-align: center;
    max-width: 960px;
    margin: 0 auto
}

.businessWithUs .head h2 {
    font-size: 48px;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    color: #000;
    margin-bottom: 24px;
    line-height: 60px;
    text-transform: none;
    padding: 0 30px;
    font-family: var(--din_2014) !important
}

.businessWithUs .head p {
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    color: #565656;
    line-height: 30px
}

.businessWithUs .content-class {
    padding-top: 103px;
    max-width: 1142px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
}

.businessWithUs .content-class .part1 {
    max-width: 537px
}

.businessWithUs .content-class .part1 img {
    width: 100%
}

.businessWithUs .content-class .part2 {
    max-width: 546px
}

.businessWithUs .content-class .part2 h3 {
    font-size: 30px;
    font-weight: 500;
    font-style: normal;
    line-height: 36px;
    color: #000;
    margin-bottom: 28px;
    font-family: var(--din_2014) !important
}

.businessWithUs .content-class .part2 ul {
    padding: 0;
    list-style: none;
    max-width: 520px;
    width: 100%;
    font-family: var(--opensans) !important
}

.businessWithUs .content-class .part2 ul li span {
    max-width: 26px;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #19437a;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 14px
}

.businessWithUs .content-class .part2 ul li {
    font-size: 16px;
    font-weight: 600 !important;
    font-style: normal;
    line-height: 27px;
    color: #404040;
    display: flex;
    align-items: top;
    margin-bottom: 6px;
    flex: 1
}

.contactMainWrapper {
    padding-top: 0
}

.contactWrapper {
    background: url(../img/contact-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    height: 554px;
    padding: 55px 0 130px
}

.contactWrapper .contactHeading {
    max-width: 1050px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0 35px
}

.contactWrapper .contactHeading h1 {
    font-size: 54px;
    font-weight: 500;
    margin-bottom: 12px;
    font-family: var(--din_2014) !important;
    text-transform: none;
    color: #000
}

.contactWrapper .contactHeading p {
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 29px;
    color: #404040
}

.contactFormWrapper {
    height: 600px;
    position: relative
}

.contactInnerWrapper {
    max-width: 948px;
    width: 100%;
    margin: 0 auto;
    border-radius: 15px;
    height: 800px;
    background: #e3cc6f;
    box-shadow: rgb(99 99 99/9%) 0 2px 8px 0;
    padding: 15px;
    position: absolute;
    top: -290px;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start
}

.contactContent {
    max-width: 326px;
    width: 100%;
    height: 100%;
    background: url(../img/blueBg.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    border-radius: 15px;
    padding: 34px 20px 34px 32px
}

.contactContent h2 {
    font-size: 21px;
    font-weight: 500;
    margin: 0 0 6px;
    color: #fff;
    text-transform: none
}

.contactContent .listText {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.contactContent .listText span {
    display: flex;
    align-items: center
}

.contactContent span.listText span a {
    margin-left: 5px !important
}

.contactContent p {
    font-family: var(--opensans) !important;
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 35px;
    color: #fff
}

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

.contactContent ul li,
.contactContent ul li a {
    font-family: var(--opensans) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    margin: 0 0 42px;
    color: #fff;
    display: flex;
    align-items: center
}

.contactContent ul li a {
    text-decoration: none;
    margin: 0 !important
}

.contactContent ul li a:hover {
    color: #fff !important;
    text-decoration: underline
}

.contactContent ul li .listIcon {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 15px;
    background: 0 0
}

.contactContent ul li .listIcon img {
    width: 100%;
    height: 100%
}

.contactContent ul li span:nth-child(2) {
    flex: 1
}

.formWrapper {
    width: 100%;
    padding: 20px 38px
}

.formWrapper h2 {
    font-size: 21px;
    font-weight: 500;
    margin: 0 0 6px;
    color: #000;
    text-transform: none
}

.formWrapper p {
    font-family: var(--opensans) !important;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 35px;
    color: #000
}

.formWrapper .inputGroup {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px
}

.favouritePlansSection .fovMainContent .fovMainContentHead .inputGroup h6 {
    min-width: 60px;
    font-size: 14px;
    margin: 10px;
    text-align: right
}

.formWrapper .inputBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.formWrapper .col6 {
    width: 48%
}

.formWrapper .col12 {
    width: 100%
}

.formWrapper .inputBox label {
    font-family: var(--opensans) !important;
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 6px;
    color: #000;
    font-weight: 600
}

.formWrapper .inputBox input,
.formWrapper .inputBox textarea {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 12px 20px;
    border-radius: 11px;
    outline: none;
    font-family: var(--opensans) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    margin: 0 0 6px;
    color: #000
}

.formWrapper .inputBox textarea {
    resize: none;
    height: 112px
}

.formWrapper .sendBtn {
    width: 100%;
    background: #19437a;
    border: none;
    padding: 17px;
    border-radius: 11px;
    font-family: var(--opensans) !important;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer
}

.estimatingCostSec {
    padding: 0 0
}

.estimatingCostMainContainer {
    max-width: 1018px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px
}

.costToBuild {
    padding: 60px 0;
    position: relative
}

.costToBuild .costToBuildInner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between
}

.costToBuild .costToBuildContent {
    max-width: 470px;
    width: 100%
}

.costToBuild .costToBuildContent h2 {
    max-width: 640px;
    width: 100%;
    color: #000;
    font-size: 48px;
    font-weight: 500;
    line-height: 60px;
    letter-spacing: -1.32px;
    margin: 0 0 20px;
    text-transform: none;
    font-family: var(--din_2014)
}

.costToBuild .costToBuildContent h3 {
    max-width: 640px;
    width: 100%;
    color: #000;
    font-size: 35px;
    font-weight: 500;
    line-height: 60px;
    letter-spacing: -1.32px;
    margin: 0 0 20px;
    text-transform: none;
    font-family: var(--din_2014)
}

.costToBuild .costToBuildContent p {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 25px;
    word-break: normal
}

.costToBuildContent .smScreen {
    display: none
}

.costToBuild .lgScreen {
    max-width: 935px;
    width: 100%;
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 25px
}

.costToBuild .costToBuildImg {
    max-width: 516px;
    width: 100%;
    height: 577px;
    position: absolute;
    top: 60px;
    right: -120px;
    padding-right: 35px
}

.costToBuild .costToBuildImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px
}

.featuresCont {
    padding: 30px 0 0
}

.featuresCont h2 {
    max-width: 920px;
    width: 100%;
    color: #000;
    font-family: var(--opensans) !important;
    font-size: 26px;
    font-weight: 600;
    line-height: 36px;
    margin: 0 0 40px;
    text-transform: none
}

.featuresCards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline
}

.featuresCards .featureCard {
    width: 33%;
    margin-bottom: 60px
}

.featuresCards .featureCardContent {
    max-width: 268px;
    width: 100%
}

.featuresCards .featureCard:nth-child(3) .featureCardContent {
    max-width: 276px;
    width: 100%
}

.featuresCards .featureCard:nth-child(8) .featureCardContent {
    max-width: 266px;
    width: 100%
}

.featureCard img {
    margin-bottom: 18px
}

.featureCard h6 {
    font-family: var(--asap) !important;
    max-width: 247px;
    width: 100%;
    color: #010101;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    margin: 0 0 10px
}

.featureCard p {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px
}

.reportCard {
    width: 100%;
    padding: 20px 40px;
    border-radius: 7px;
    background-color: #f6f6f7;
    border-left: 4px solid #1a447b
}

.reportCard h5 {
    font-size: 16px;
    font-family: var(--opensans) !important;
    font-weight: 600;
    line-height: 30px;
    color: #000;
    text-transform: none
}

.reportCard h5 span {
    font-weight: 700 !important
}

.optionCards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 45px 0
}

a.optCard {
    text-decoration: none !important
}

.optCard {
    max-width: 286px;
    width: 100%;
    box-shadow: 0 8px 43px rgba(5, 20, 42, .07);
    border-radius: 15px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 12px 0;
    text-decoration: none
}

.optCard.blueCard {
    border: 1px solid #19437a;
    background-color: #19437a;
    margin: 0 10px
}

.optCard .imgBox {
    padding: 22px 25px;
    border-right: 1px solid #e5e5e5;
    cursor: pointer
}

.optCard .imgBox img {
    scale: 1.4;
    width: 40px;
    height: 27px
}

.optCard.blueCard .imgBox {
    border-color: #305687 !important
}

.optCard .optContent {
    padding: 0 11px 0 25px
}

.optContent h3 {
    color: #000;
    font-size: 27px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 5px
}

.optContent p {
    color: #000;
    font-family: var(--opensans) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px
}

.optCard.blueCard h3,
.optCard.blueCard p {
    color: #fff
}

.optCard:hover {
    border: 1px solid #19437a;
    background-color: #19437a;
    text-decoration: none;
    box-shadow: 0 0 8px rgb(10 61 122/80%) !important
}

.optCard:hover .imgBox img {
    filter: brightness(0) invert(1)
}

.optCard:hover .optContent h3,
.optCard:hover .optContent p {
    color: #fff !important
}

.optCard.blueCard:hover {
    border: 1px solid #19437a;
    background-color: #000
}

.optCard.blueCard:hover .optContent h3,
.optCard.blueCard:hover .optContent p {
    color: #fff !important
}

.optCard.blueCard:hover .imgBox {
    border-color: #fff !important
}

.accountsSecCout {
    background: #f7f7f7;
    padding: 40px 57px 100px;
    max-width: 882px;
    margin: 0 auto;
    border-radius: 14px 14px 0 0
}

.accountsSecCout .head {
    margin-bottom: 42px
}

.accountsSecCout .head h2 {
    font-size: 47px;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    color: #000;
    margin-bottom: 8px;
    line-height: 50px;
    text-transform: capitalize;
    font-family: var(--din_2014) !important
}

.accountsSecCout .head p {
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    color: #565656;
    line-height: 30px;
    width: 600px;
    margin: 0 auto
}

.accountsSecCout form .input-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%
}

.accountsSecCout form .input-group .input-head {
    width: 372px
}

.accountsSecCout form .input-group label {
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    color: #565656;
    margin-bottom: 6px;
    display: block
}

.accountsSecCout form .input-group input {
    border: 1px solid #e5e5e5;
    outline: none;
    padding: 15px 18px;
    border-radius: 7px;
    width: 100%;
    background: #fff;
    margin-bottom: 16px;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    color: #666
}

.accountsSecCout input::placeholder {
    opacity: .6;
    font-family: var(--opensans) !important;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    color: #666
}

.accountsSecCout .detail h6 {
    font-family: var(--opensans) !important;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    color: #000;
    margin-bottom: 6px
}

.accountsSecCout .detail p {
    font-family: var(--opensans) !important;
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
    color: #565656
}

.accountsSecCout .btnHead {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    font-weight: 500
}

.accountsSecCout form button {
    background: #19437a;
    padding: 15px 36px;
    font-family: var(--opensans) !important;
    font-size: 15px;
    font-weight: 600;
    font-style: normal;
    color: #fff;
    border: unset;
    border-radius: 14px;
    cursor: pointer
}

.accountsSecCout form button:hover,
.formWrapper .sendBtn:hover,
.favouritePlansSection .fovCard .fovCardBtn:hover,
.searchActionBtns .runSearchBtn:hover,
.checkout_button:hover {
    background-color: #fff;
    color: #19437a;
    box-shadow: 0 0 8px rgb(10 61 122/80%) !important;
    border: 1px solid #fff
}

.searchActionBtns .dltSearchBtn:hover {
    background-color: #19437a;
    color: #fff;
    box-shadow: 0 0 8px rgb(10 61 122/80%) !important
}

.houseImgHead {
    width: 100%;
    display: flex;
    position: relative
}

.houseImgHead img {
    width: 100%;
    z-index: 0;
    position: relative;
    top: 2px
}

.houseImgHead::before {
    content: "";
    width: 882.29px;
    height: 100%;
    background: #f7f7f7;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto
}

.modificationSec {
    background: #f6f6f6;
    padding-top: 0;
    overflow: hidden;
    position: relative
}

.modificationCout {
    margin: 0 auto;
    padding: 111px 0 124px;
    width: 1174px;
    display: flex;
    justify-content: space-between;
    align-items: top
}

.modificationCout .imgHead img {
    right: 0;
    top: 0;
    bottom: 50px;
    margin: auto 0
}

.modificationCout .content-head {
    width: 515px
}

.modificationCout .content-head h1 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 55px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 50px;
    text-transform: capitalize;
    width: 800px !important
}

.modificationCout .content-head h2 {
    color: #000;
    font-family: var(--asap);
    font-size: 33px;
    font-weight: 600;
    font-style: normal;
    line-height: 60px;
    margin-bottom: 10px;
    text-transform: capitalize
}

.modificationCout .content-head>p {
    color: #404040;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 29px
}

.modificationCout .content-head .inner-services {
    display: flex;
    align-items: center;
    margin-top: 65px;
    width: fit-content !important
}

.modificationCout .content-head .inner-services p {
    font-family: var(--opensans);
    color: #000;
    font-size: 21px;
    font-weight: 600;
    font-style: italic;
    line-height: 30px;
    max-width: 420px
}

.modificationCout .content-head .inner-services span {
    width: 80px;
    height: 50px;
    margin-right: 17px;
    border-right: 1px solid #e4e4e4;
    padding-right: 19px;
    cursor: pointer
}

.modificationCout .content-head .inner-services span img {
    width: 100%;
    transform: scale(1.2);
    height: 100%
}

.modificationCout .imgHead img {
    width: 700px;
    position: absolute;
    right: -55px;
    bottom: 0
}

.processSec {
    background: #fafafc
}

.processCout {
    padding: 100px 0;
    width: 1174px;
    margin: 0 auto
}

.processCout .head {
    margin-bottom: 64px
}

.processCout .head h2 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 47px;
    font-weight: 500;
    font-style: normal;
    line-height: 60px;
    text-transform: capitalize
}

.processCout .steps-head .card-plan {
    display: flex;
    justify-content: space-between;
    align-items: top;
    border-bottom: 2px solid #e4e4e4;
    margin-bottom: 64px
}

.processCout .steps-head .card-plan:last-child {
    margin-bottom: unset !important
}

.processCout .steps-head .card-plan .titleHead {
    width: 315px;
    padding-right: 35px;
    display: flex;
    align-items: top
}

.processCout .steps-head .card-plan .titleHead span {
    width: 46px;
    height: 46px;
    background-color: #19437a;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: var(--opensans);
    font-size: 18px;
    font-weight: 700;
    border-radius: 50%;
    margin-right: 33px
}

.processCout .steps-head .card-plan .titleHead h3 {
    flex: 1;
    color: #000;
    font-family: var(--asap);
    font-size: 26px;
    font-weight: 700;
    font-style: normal;
    line-height: 33px;
    letter-spacing: -.71px
}

.processCout .steps-head .card-plan .descriptionHead {
    flex: 1;
    padding-left: 33px;
    padding-bottom: 39px;
    border-left: 2px solid #e4e4e4
}

.processCout .steps-head .card-plan .descriptionHead p {
    color: #404040;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 29px;
    margin-bottom: 21px
}

.processCout .steps-head .card-plan .descriptionHead a {
    color: #19437a;
    font-family: var(--asap);
    font-size: 17px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    padding-bottom: 1px
}

.processCout .steps-head .card-plan .descriptionHead a:hover {
    text-decoration: underline !important
}

.processCout .steps-head .card-plan .descriptionHead a img {
    width: 14px
}

.processCout .steps-head .card-plan .descriptionHead p a {
    border-bottom: unset !important
}

.processCout .steps-head .card-plan .descriptionHead .innerCard {
    background: #fff;
    padding: 26px 30px;
    border-radius: 15px;
    border-left: 4px solid #1a447b;
    margin-bottom: 20px
}

.processCout .steps-head .card-plan .descriptionHead .innerCard p {
    margin: 0 !important
}

.processCout .steps-head .card-plan .descriptionHead .innerCard p a {
    font-weight: 500 !important;
    color: #1a447b !important
}

.processCout .steps-head .card-plan .descriptionHead .innerCard p span {
    font-weight: 700 !important;
    color: #000
}

.processCout .steps-head .card-plan .iconHead {
    width: 211px;
    display: flex;
    justify-content: end
}

.processCout .steps-head .card-plan .iconHead img {
    width: 95px;
    height: 95px;
    cursor: pointer
}

.exampleModificationSec {
    padding: 30px 0 0
}

.exampleModificationCout .head h2 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 47px;
    font-weight: 600;
    font-style: normal;
    line-height: 60px;
    text-align: center;
    margin-bottom: 56px;
    text-transform: capitalize
}

.exampleModificationCout .cards {
    display: flex;
    justify-content: space-between;
    align-items: top;
    width: 948px;
    margin: 0 auto
}

.exampleModificationCout .card-plan {
    width: 456px;
    min-height: 676px;
    background: #f7f7f7;
    border-radius: 22px;
    padding: 22px
}

.exampleModificationCout .list-bullet {
    width: 656px;
    border-radius: 22px;
    padding: 22px;
    margin: 0 auto !important;
    max-width: 100%
}

.exampleModificationCout .card-plan .imgHead {
    width: 100%;
    height: 337px;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, .2);
    background: #fff;
    margin-bottom: 36px
}

.exampleModificationCout .card-plan .imgHead img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.exampleModificationCout .card-plan h4 {
    color: #1f2325;
    font-family: var(--asap);
    font-size: 29px;
    font-weight: 700;
    font-style: normal;
    line-height: 40px;
    text-transform: uppercase;
    margin-bottom: 10px
}

.exampleModificationCout .card-plan .content-services>p {
    color: #19437a;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    margin-bottom: 20px
}

.exampleModificationCout .card-plan ul {
    padding: 0;
    list-style: none
}

.exampleModificationCout .card-plan ul li {
    display: flex;
    align-items: top
}

.exampleModificationCout .card-plan ul li p,
.exampleModificationCout .list-bullet ul li {
    flex: 1;
    color: #636363;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 21px;
    margin-bottom: 8px
}

.exampleModificationCout .card-plan ul li span {
    width: 17px;
    height: 17px;
    display: inline-block;
    margin-right: 6px;
    margin-top: 4px
}

.exampleModificationCout .card-plan ul li span img {
    width: 100%;
    height: 100%
}

.testimonial-aboutus {
    transform: translate(0, 0) !important
}

.helpSec {
    padding: 100px 0 0;
    background: #f7f7f7
}

.helpCout .head {
    width: 970px !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center
}

.helpCout .head h2 {
    color: #1f2325;
    font-family: var(--din_2014);
    font-size: 47px;
    font-weight: 500;
    font-style: normal;
    line-height: 60px;
    text-align: center;
    margin-bottom: 22px;
    text-transform: capitalize
}

.helpCout .head p {
    color: #404040;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 29px;
    text-align: center;
    margin-bottom: 44px
}

.helpCout .head .inner-services {
    display: flex;
    align-items: top;
    justify-content: center
}

.helpCout .head .inner-services span {
    border-right: 1px solid #e4e4e4;
    padding-right: 26px;
    margin-right: 23px !important;
    display: flex;
    justify-content: center;
    align-items: center
}

.helpCout .head .inner-services p {
    color: #010101;
    font-family: var(--asap);
    font-size: 19px;
    font-weight: 500;
    font-style: normal;
    line-height: 29px;
    text-align: left !important;
    margin: 0 0 15px !important
}

.helpCout .head .inner-services p a {
    color: #19437a !important;
    text-decoration: none;
    font-weight: 700
}

.helpCout .imgHead {
    width: 100%;
    display: flex
}

.helpCout .imgHead img {
    width: 100%;
    background: #f7f7f7
}

.whoWeAreSec {
    padding-top: 0
}

.whoWeArecout {
    padding-top: 73px;
    max-width: 946px;
    margin: 0 auto
}

.whoWeAreSec .whoWeAreContentHead {
    display: flex;
    justify-content: space-between;
    margin-bottom: 96px
}

.whoWeAreSec .whoWeAreContent {
    max-width: 485px
}

.whoWeAreSec .whoWeAreContent h2,
.whoWeAreSec .whoWeAreContent h1 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 42px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 25px;
    text-transform: none
}

.whoWeAreSec .whoWeAreContent h1 {
    font-size: 55px
}

.whoWeAreSec .whoWeAreContent p {
    color: #565656;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 29px
}

.whoWeAreSec .whoWeAreImgHead {
    max-width: 364px;
    margin-top: 60px;
}

.whoWeAreSec .whoWeAreImgHead img {
    width: 100%;
    width: 364px
}

.whoWeAreSec .whoWeAreCards {
    display: flex;
    justify-content: space-between;
    align-items: top;
    margin-bottom: 92px
}

.whoWeAreSec .whoWeAreCards .whoWeAreCard {
    width: 297px;
    height: 129px;
    border-radius: 11px;
    background-color: #fafafc;
    padding: 28px 29px;
    display: flex;
    align-items: center
}

.whoWeAreSec .whoWeAreCards .whoWeAreCard span {
    width: 71px;
    height: 70px;
    background-color: #e3e7ef;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 20px
}

.whoWeAreSec .whoWeAreCards .whoWeAreCard h3 {
    color: #000;
    font-family: var(--asap);
    font-size: 17px;
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase;
    flex: 1
}

.cutout {
    position: relative;
    padding-bottom: 34vw
}

.whoWeAreSec .subtitleHead {
    text-align: center;
    width: 946px;
    margin: 0 auto
}

.whoWeAreSec .subtitleHead img {
    width: 67px;
    margin-bottom: 49px
}

.whoWeAreSec .subtitleHead h3 {
    color: #1f2325;
    font-family: var(--opensans);
    font-size: 36px;
    font-style: italic;
    line-height: 60px;
    text-align: center;
    font-weight: 500
}

.whoWeAreSec .whoWeImg {
    position: absolute;
    z-index: -10;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden
}

.ourVisionariesSec {
    padding: 116px 0
}

.ourVisionariesSec .ourVisionariesCards {
    max-width: 1187px;
    display: flex;
    justify-content: space-between;
    align-items: top;
    flex-wrap: wrap !important;
    margin: 0 auto
}

.ourVisionariesSec h3 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 48px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 42px
}

.ourVisionariesSec p {
    color: #565656;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 29px;
    text-align: center;
    margin-bottom: 95px
}

.ourVisionariesCard {
    width: 100%;
    height: 435px;
    margin-bottom: 43px
}

.ourVisionariesCard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px
}

.ourVisionariesSec .column1 {
    max-width: 352px
}

.ourVisionariesSec .column2 {
    max-width: 352px;
    margin-top: 150px
}

.ourVisionariesSec .column3 {
    max-width: 409px;
    text-align: center
}

.ourVisionariesSec .column3 .ourVisionariesCard {
    padding: 0 14px
}

.ourVisionariesSec .MB-ourVisionariesImagesHead {
    display: none
}

.ourStorySec {
    padding-bottom: 30px
}

.ourStoryCout {
    max-width: 1187px;
    margin: 0 auto
}

.ourStorySec .ourStoryContentHead {
    display: flex;
    align-items: flex-start
}

.ourStorySec .ourStoryImgHead {
    max-width: 582px;
    margin-right: 94px
}

.ourStorySec .ourStoryImgHead img {
    width: 100%;
    border-radius: 20px
}

.ourStorySec .ourStoryContent {
    max-width: 485px
}

.ourStorySec .ourStoryContent h3 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 48px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 15px
}

.ourStorySec .ourStoryContent p {
    color: #565656;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    line-height: 29px
}

.ourStorySec .ourStoryContent p:nth-child(2) {
    margin-bottom: 10px
}

.ourStorySec .ourStoryContent p:nth-child(3) {
    margin-bottom: 30px
}

.ourStorySec .ourStoryContent button {
    border-radius: 11px;
    border: 1px solid rgba(0, 0, 0, .15);
    background-color: #fff;
    color: #19437a;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    padding: 21px 26px;
    cursor: pointer
}

.proServicesSec {
    padding-top: 0
}

.proServicesCout {
    padding: 150px 0 !important;
    background: url(../img/ProServicesTopHead.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom
}

.proServicesSec .proServicesContent {
    max-width: 1174px !important;
    margin: 0 auto
}

.proServicesSec .proServicesContent h1 {
    color: #fff;
    font-family: var(--din_2014);
    font-size: 73px;
    font-weight: 500;
    font-style: normal;
    text-transform: none
}

.joinBuildSec {
    padding-top: 122px
}

.joinBuildCout {
    width: 100%
}

.joinBuildSec .joinBuildHead {
    text-align: center;
    max-width: 927px;
    margin: 0 auto 126px
}

.joinBuildSec .joinBuildHead h2 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 48px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 23px;
    text-transform: none
}

.joinBuildSec .joinBuildHead p {
    color: #565656;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 30px
}

.joinBuildSec .joinBuildContentHead {
    display: flex;
    align-items: center;
    max-width: 1174px !important;
    margin: 0 auto
}

.joinBuildSec .joinBuildImgHead {
    max-width: 537px;
    margin-right: 80px
}

.joinBuildSec .joinBuildImgHead img {
    width: 100%;
    border-radius: 20px
}

.joinBuildSec .joinBuildContent {
    max-width: 444px
}

.joinBuildSec .joinBuildContent h3 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 48px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 40px
}

.joinBuildSec .joinBuildContent p {
    color: #565656;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    line-height: 29px
}

.joinBuildSec .joinBuildImg {
    width: 100%
}

.joinBuildSec .joinBuildImg img {
    width: 100%;
    display: flex
}

.specialOfferSec {
    padding: 123px 0
}

.specialOfferHead {
    margin-bottom: 59px;
    max-width: 882px;
    margin: 0 auto;
    text-align: center
}

.specialOfferHead h2 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 23px;
    text-transform: none
}

.specialOfferHead p {
    color: #565656;
    font-family: var(--opensans);
    font-size: 19px;
    font-weight: 500;
    font-style: normal;
    line-height: 30px
}

.specialOfferSec .specialOfferCards {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 947px;
    margin: 44px auto 0
}

.specialOfferSec .specialOfferCard {
    width: 307px;
    min-height: 690px;
    box-shadow: 0 8px 43px rgba(5, 20, 42, .07);
    border-radius: 15px;
    background-color: #fff;
    padding: 15px !important;
    text-align: center;
    position: relative
}

.specialOfferSec .specialOfferCard .specialOfferCardImgHead {
    width: 100%;
    height: 220px;
    margin-bottom: 35px;
    overflow: hidden
}

.specialOfferSec .specialOfferCard .specialOfferCardImgHead img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover
}

.specialOfferSec .specialDetailsHead {
    padding: 0 15px
}

.specialOfferSec .specialOfferCard h4 {
    color: #000 !important;
    font-family: var(--asap);
    font-size: 30px;
    font-weight: 700;
    line-height: 33px;
    text-transform: uppercase;
    margin-bottom: 29px
}

.specialOfferSec .specialOfferCard p {
    color: #565656;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 22px
}

.specialOfferSec .specialOfferCard ul {
    padding: 0;
    list-style: none;
    margin-top: 30px
}

.specialOfferSec .specialOfferCard ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 12px
}

.specialOfferSec .specialOfferCard ul li img {
    width: 17px;
    height: 17px;
    transform: translate(-6px, 2px)
}

.specialOfferSec .specialOfferCard ul li p {
    font-size: 15px !important;
    list-style: 38px !important;
    font-weight: 500 !important
}

.specialOfferSec .specialOfferCard ul li p span {
    font-weight: 700 !important
}

.specialOfferSec .badgeHead {
    width: 70px;
    height: 69px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: url(../img/offerBadge.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 22px;
    right: 22px
}

.specialOfferSec .badgeContent {
    width: 58px;
    height: 57px;
    background-color: #225496;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.specialOfferSec .badgeContent h5 {
    color: #fff;
    font-family: var(--opensans);
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    text-transform: uppercase;
    line-height: unset !important;
    letter-spacing: -1px
}

.specialOfferSec .badgeContent p {
    color: #fff;
    font-family: var(--opensans);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 13px;
    opacity: .9
}

.supportCout {
    max-width: 947px;
    margin: 0 auto
}

.supportCout .supportContentHead {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.supportCout .supportPart1 {
    max-width: 470px
}

.supportCout .supportPart1 h2 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 28px;
    text-transform: none
}

.supportCout .supportPart1 p {
    color: #565656;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 30px
}

.supportCout .supportPart2 {
    max-width: 537px;
    margin-left: 50px
}

.supportCout .supportPart2 img {
    width: 100%
}

.supportCout .supportCards {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 59px;
    margin-bottom: 180px
}

.supportCout .supportCard {
    width: 287px;
    padding: 20px;
    box-shadow: 0 8px 43px rgba(5, 20, 42, .07);
    border-radius: 15px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    display: flex;
    align-items: center
}

.supportCout .supportCard2 {
    box-shadow: 0 8px 43px rgba(0, 76, 163, .1) !important;
    border: 1px solid #19437a !important;
    background-color: #19437a !important
}

.supportCout .supportCard2 * {
    color: #fff !important
}

.supportCout .supportCard2 h6 {
    margin: 0 !important
}

.supportCout .supportCard2 span {
    border-right: 2px solid #305687 !important
}

.supportCout .supportCard span {
    padding: 20px 20px 20px 0;
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 2px solid #e5e5e5;
    height: 100%
}

.supportCout .supportCard div {
    flex: 1
}

.supportCout .supportCard h6 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 24px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 10px;
    text-transform: uppercase
}

.supportCout .supportCard p {
    color: #000;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    line-height: 19px
}

.proTestimonialsSec {
    overflow: hidden
}

.proTestimonialsCout {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center
}

.proTestimonialsCout .testimonialsHead h2 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 47px;
    font-weight: 500;
    font-style: normal;
    line-height: 60px;
    text-align: center;
    margin-bottom: 88px
}

.proTestimonialsCout .swiper {
    margin: 0 auto;
    width: 1250px !important
}

.proTestimonialsCout .mySwiper2 {
    width: 948px !important;
    overflow: hidden;
    margin: 0 auto !important
}

.proTestimonialsCout .swiper::after {
    content: "";
    width: 1px;
    height: 100%;
    background: #e4e4e4;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1111
}

.proTestimonialsCout .swiper-slide .proTestimonialsHeadCard {
    background: #fff
}

.proTestimonialsCout .swiper-slide .proTestimonialsHeadCard h4 {
    color: #000;
    font-family: var(--asap);
    font-size: 22px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 29px
}

.proTestimonialsCout .swiper-slide .proTestimonialsHeadCard p {
    color: #565656;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 29px;
    margin-bottom: 30px
}

.proTestimonialsCout .swiper-slide .proTestimonialsHeadCard .testimonialsHeadInnerPro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%
}

.proTestimonialsCout .swiper-slide .proTestimonialsHeadCard .testimonialsHeadInnerPro h6 {
    color: #0e2043;
    font-family: var(--opensans);
    font-size: 19px;
    font-weight: 700;
    font-style: normal
}

.proTestimonialsCout .swiper-slide .proTestimonialsHeadCard .testimonialsHeadInnerPro span {
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 21px
}

.proTestimonialsCout .swiper-slide .proTestimonialsHeadCard .testimonialsHeadInnerPro .iconsHead {
    display: flex;
    align-items: center
}

.proTestimonialsCout .swiper-slide .proTestimonialsHeadCard .testimonialsHeadInnerPro .proTlCampanyLogo img {
    width: 28px;
    margin-right: 10px;
    cursor: pointer
}

.proTestimonialsCout .swiper-slide .proTestimonialsHeadCard .testimonialsHeadInnerPro .stars img {
    width: 23px;
    margin: 0 -3px;
    cursor: pointer
}

.proTestimonialsCout .swiper-button-next,
.proTestimonialsCout .swiper-button-prev {
    width: 56px !important;
    height: 55px !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    border-radius: 50% !important;
    opacity: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #fff !important
}

.proTestimonialsCout .swiper-button-next {
    background: #19437a !important
}

.proTestimonialsCout .swiper-button-next img,
.proTestimonialsCout .swiper-button-prev img {
    width: 20% !important
}

.proTestimonialsCout .swiper-button-next::after,
.proTestimonialsCout .swiper-button-prev::after {
    content: unset !important
}

.proTestimonialsSec .imgHead {
    width: 100%
}

.proTestimonialsSec .imgHead img {
    width: 100%;
    object-fit: cover;
    display: flex
}

.proServiceYP {
    padding-top: 60px
}

.aboutOurPlansSection {
    padding: 25px 0 0
}

.uniquePlansOfDesigners {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 50px 0 70px
}

.uniquePlansOfDesigners .uniquePlansOfDesignersInner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.uniquePlansOfDesigners .uniquePlansContent {
    max-width: 465px;
    width: 100%
}

.uniquePlansOfDesigners h2,
.headingContainer h2 {
    color: #000;
    font-family: var(--din_2014) !important;
    font-size: 48px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 28px;
    text-transform: none;
    line-height: 60px;
    text-align: center;
}

.uniquePlansOfDesigners h3 {
    color: #000;
    font-family: var(--din_2014) !important;
    font-size: 25px;
    font-weight: 500;
    font-style: normal;
    text-transform: none;
    line-height: 45px;
}
.planInternalDiv{
    margin: 10px 0px;
}
.WhatplansHeading h2,
.WhatplansHeading p {
    text-align: left !important;
    max-width: 100% !important
}

.uniquePlansOfDesigners p {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 30px;
    max-width: 95%;
    margin: 0 auto;
    text-align: justify!important
}

.uniquePlansOfDesigners .uniquePlansImages {
    display: flex;
    justify-content: space-between;
    max-width: 565px;
    width: 100%;
    position: relative;
    right: -50px
}

.uniquePlansOfDesigners .uniquePlansImages .planImageBox {
    max-width: 266px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 11px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 14px 14px 19px
}

.uniquePlansOfDesigners .uniquePlansImages .planImageBox img {
    width: 100%;
    object-fit: contain
}

.uniquePlansOfDesigners .uniquePlansImages .planImageBox:nth-child(2) {
    transform: translate(35px, 60px)
}

.uniquePlansOfDesigners .uniquePlansImages .planImageBox h5 {
    color: #19437a;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    margin-top: 10px
}

.uniquePlansOfDesigners .firstPara {
    display: none
}

.uniquePlansOfDesigners .secondPara {
    margin-top: 56px;
    text-align: left !important;
    max-width: 100%
}

.checkPlanDetailPage {
    background-color: #19437a;
    background-image: url(../img/home/light_logo.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 275px 260px
}

.checkPlanDetailPage .checkPlanDetailInner {
    max-width: 1080px;
    width: 100%;
    padding: 80px 27px;
    margin: 0 auto
}

.codesSection .checkPlanDetailPage {
    display: flex;
    align-items: center;
    height: 300px
}

.checkPlanDetailPage .checkPlanTopBox {
    display: flex;
    align-items: center
}

.checkPlanDetailPage .checkPlanTopBox img {
    height: 46px;
    padding: 0 20px 0 0;
    flex: 1;
    max-width: 100%
}

.checkPlanDetailPage .checkPlanTopBox h4 {
    color: #fff;
    font-family: var(--opensans) !important;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    padding: 0;
    text-transform: none
}

.checkPlanDetailPage p {
    margin-top: 30px;
    color: #fff;
    font-family: var(--opensans) !important;
    font-size: 15px;
    font-weight: 400;
    font-style: normal
}

.PlansIncluedMainContainer {
    padding: 100px 0 0;
    position: relative;
    overflow-x: hidden
}

.whatDoPlansInclude {
    max-width: 1018px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px
}

.whatDoPlansInclude .plansIncludeHeading {
    margin-bottom: 30px
}

.whatDoPlansInclude .plansIncludeHeading h2 {
    color: #000;
    font-family: var(--din_2014) !important;
    font-size: 48px;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    margin-bottom: 30px;
    text-transform: none;
    line-height: 60px
}

.whatDoPlansInclude .plansIncludeHeading p {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    text-align: center
}

.plansIncludeContainer .plansIncludeCard {
    max-width: 948px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 0;
    border-bottom: 2px solid #e5e5e5
}

.plansIncludeContainer .plansIncludeCard:last-child {
    border-bottom: none;
    position: absolute;
    left: 35px;
    right: 35px;
    margin: auto
}

.plansIncludeContainer .carouselImages {
    max-width: 350px !important;
    width: 100%;
    height: 250px;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, .2);
    overflow: hidden
}

.plansIncludeContainer .swiper {
    width: 100%;
    height: 100%
}

.plansIncludeContainer .swiper-slide {
    width: 350px;
    height: 250px !important;
    text-align: center;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 16px 24px
}

.plansIncludeContainer .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.plansIncludeContainer .swiper-pagination-bullet-active {
    background: #19437a !important
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    padding-bottom: 1px
}

.favouritePlansSection .fovCard .swiper-pagination-bullet {
    opacity: 1;
    background-color: #ffffff38;
    box-shadow: rgba(0, 0, 0, .02) 0 1px 3px 0, rgba(27, 31, 35, .15) 1px 1px 1px 1px;
    cursor: pointer
}

.favouritePlansSection .fovCard .swiper-pagination-bullet-active {
    background-color: #fff !important
}

.favouritePlansSection .fovCard .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next,
.favouritePlansSection .fovCard .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next,
.favouritePlansSection .fovCard .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev,
.favouritePlansSection .fovCard .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(1) !important
}

.plansIncludeCardContent {
    max-width: 503px;
    width: 100%;
    flex: 1
}

.plansIncludeCardContent h4 {
    color: #1f2325;
    font-family: var(--asap) !important;
    font-size: 33px;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    margin-bottom: 40px
}

.plansIncludeCardContent p {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500
}

.PlansIncluedMainContainer .plansImageBox {
    display: flex;
    padding-top: 70px
}

.PlansIncluedMainContainer .plansImageBox img {
    width: 100%;
    max-height: 933px;
    margin-top: 25px
}

.notTypicallyIncludedSection {
    background: #f5f5f5;
    padding: 100px 35px;
    position: relative
}

.notTypicallyIncludedSection::before {
    content: "";
    width: 100%;
    height: 4px;
    background: #eaeaea;
    position: absolute;
    top: 58.5%;
    left: 0;
    z-index: 1
}

.notTypicallYIncludedContainer {
    max-width: 948px;
    width: 100%;
    margin: 0 auto
}

.typicallyIncludedHeading h2 {
    color: #000;
    font-family: var(--din_2014) !important;
    font-size: 48px;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    text-transform: none
}

.typicallyIncludedHeading p {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 29px;
    text-align: center;
    margin: 32px 0
}

.typicallyIncludedHeading h6 {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    text-align: center
}

.notTypicallyIncludedSection::before {
    content: unset;
    display: none
}

.typicallyPlansNewItems .typicallyPlansNewItem {
    margin-top: 40px;
    padding: 20px;
    border-radius: 11px
}

.typicallyPlansNewItems .typicallyPlansNewItem:nth-child(odd) {
    background: #fff
}

.typicallyPlansNewItem .newItemHeading {
    display: flex;
    align-items: center
}

.typicallyPlansNewItem .newItemHeading img {
    width: 40px;
    height: 40px;
    margin-right: 20px
}

.typicallyPlansNewItem h4 {
    font-family: var(--din_2014);
    font-size: 20px;
    font-weight: 600;
    font-style: normal
}

.typicallyPlansNewItem p {
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    margin-top: 20px;
    margin-bottom: 0
}

.typicallyPlansItems {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 80px 0;
    position: relative;
    z-index: 1
}

.typItem {
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative
}

.typItem .typText {
    position: relative
}

.typItem .typItemContent {
    display: none;
    width: 344px;
    height: 274px;
    border: 1px solid #d9d9d9;
    background: #fff;
    padding: 18px;
    position: absolute;
    top: 60px;
    right: -60px;
    z-index: 1111
}

.typicallyPlansItems .typItem:nth-child(1) .typItemContent,
.typicallyPlansItems .typItem:nth-child(4) .typItemContent {
    left: 0
}

.typicallyPlansItems .typItem:nth-child(1) .typItemContent::after,
.typicallyPlansItems .typItem:nth-child(4) .typItemContent::after {
    left: 70px
}

.typItem.active .typItemContent {
    display: none
}

.typItem .typItemContent::after {
    content: "";
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    background: #fff;
    position: absolute;
    top: -8px;
    right: 70px;
    border-top: 1px solid #d9d9d9;
    border-left: 1px solid #d9d9d9
}

.typItem .typItemContent p {
    color: #404040;
    font-family: open sans;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 22px
}

.typItem:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg)
}

.typItem.active img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg)
}

.typItem .typIcon {
    width: 69px;
    height: 69px;
    border-radius: 50%;
    background-color: #eaeaea;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px
}

.typItem.active .typIcon {
    background: #19437a
}

.typItem:hover .typIcon {
    background: #19437a
}

.typItem h6 {
    color: #404040;
    font-family: var(--asap) !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 21px;
    text-align: center;
    text-transform: uppercase
}

.typItem.active h6 {
    color: #19437a
}

.typicallyPlansItems .typItem:nth-child(1) .typText {
    width: 146px
}

.typicallyPlansItems .typItem:nth-child(2) .typText {
    width: 35px
}

.typicallyPlansItems .typItem:nth-child(3) .typText {
    width: 92px
}

.typicallyPlansItems .typItem:nth-child(4) .typText {
    width: 75px
}

.typicallyPlansItems .typItem:nth-child(5) .typText {
    width: 105px
}

.typicallyPlansItems .typItem:nth-child(6) .typText {
    width: 71px
}

.typicallyPlansItems .typItem:nth-child(7) .typText {
    width: 76px
}

.typicallyIncludedNote {
    min-height: 70px;
    color: #404040;
    font-family: open sans;
    font-size: 15.5px;
    font-weight: 500;
    font-style: normal;
    text-align: center
}

.framingLayoutsSection {
    background-color: #19437a;
    background-image: url(../img/home/light_logo.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 275px 260px
}

.framingLayoutsContainer {
    max-width: 945px;
    width: 100%;
    padding: 66px 35px;
    margin: 0 auto;
    display: flex;
    align-items: center
}

.framingLayoutsContainer img {
    height: 95px;
    padding: 0 30px 0 0;
    flex: 1
}

.framingLayoutsContainer h4 {
    font-family: var(--opensans) !important;
    font-size: 25px;
    font-weight: 500;
    line-height: 40px;
    border-left: 2px solid #2f5586;
    padding: 0 0 0 40px;
    color: #fff;
    text-transform: none
}

.plansComesStamped {
    padding: 130px 35px
}

.plansStampedInner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 1082px;
    width: 100%;
    margin: 0 auto
}

.plansStampedInner .stampedImgBox {
    max-width: 516px;
    width: 100%
}

.plansComesStamped img {
    width: 100%
}

.plansStampedInner .stampedContent {
    max-width: 502px;
    width: 100%
}

.plansStampedInner .stampedContent h2 {
    color: #000;
    font-family: var(--din_2014) !important;
    font-size: 44px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 60px;
    text-transform: none;
    margin-bottom: 29px
}

.plansStampedInner .stampedContent p {
    color: #404040;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 30px;
    margin: 0
}

.favouritePlansSection,
.accountPurchaseSection {
    background: #f6f6f6
}

.favouritePlansSection .fovMainContent {
    padding: 20px 0;
    max-width: 948px !important;
    margin: 0 auto
}

.FavoritePlans .favMainContent {
    max-width: 988px !important
}

.favouritePlansSection .favCardsOuter {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.favouritePlansSection .fovMainContent .fovMainContentHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.favouritePlansSection .fovMainContent .fovMainContentHead h2 {
    font-family: var(--din_2014);
    font-size: 44px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #000;
    text-transform: capitalize;
    background-color: transparent
}

.favouritePlansSection .fovMainContent .fovMainContentHead .inputGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 580px;
    width: 580px;
    margin-left: auto;
    margin-right: auto
}

.favouritePlansSection .fovMainContent .fovMainContentHead .inputHead {
    width: 48%;
    padding: 6px 14px !important;
    background: 0 0;
    border-radius: 3.7px;
    border: solid 1px rgba(0, 0, 0, .1);
    display: flex;
    align-items: center
}

.favouritePlansSection .fovMainContent .fovMainContentHead .inputHead h6 {
    font-family: var(--opensans);
    font-size: 11px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: .22px;
    color: #404040;
    margin-right: 10px !important
}

.favouritePlansSection .fovMainContent .fovMainContentHead select {
    font-family: var(--opensans);
    font-size: 11px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: .22px;
    color: #404040;
    border: none;
    outline: none;
    background: 0 0;
    flex: 1;
    -webkit-appearance: auto !important;
    padding: 0;
    width: fit-content
}

.inputHead select {
    height: auto
}

.favouritePlansSection .fovCards {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap
}

.favouritePlansSection .fovCard {
    width: 300px;
    max-height: 700px;
    border-radius: 15px;
    box-shadow: 0 8px 43px 0 rgba(5, 20, 42, .07);
    background-color: #fff;
    overflow: hidden;
    position: relative;
    margin-bottom: 25px;
    margin-right: 0 !important
}

.favouritePlansSection .fovCard:nth-child(3n) {
    margin-right: 0
}

.customerDashboardSection .fovCards.browserHistory {
    padding: 0
}

.favouritePlansSection .fovCard .swiper {
    width: 100%;
    height: 199px;
    border-radius: 15px 15px 0 0 !important
}

.favouritePlansSection .fovCard .swiper-slide {
    width: 100%;
    height: 100%
}

.favouritePlansSection .fovCard .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.favouritePlansSection .fovCard .swiper-slide img.contain_image {
    object-fit: contain
}

.favouritePlansSection .fovCard .swiper-slide a.xout:after {
    position: absolute;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "font awesome 5 free";
    font-weight: 900;
    content: "\f05e";
    color: rgba(0, 0, 0, .6);
    padding-top: 0;
    font-size: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .6);
    z-index: 9
}

.favouritePlansSection .fovCard .swiper-button-lock {
    display: none !important
}

.favouritePlansSection .fovCard .swiper-button-next,
.favouritePlansSection .fovCard .swiper-button-prev {
    width: 23px !important;
    height: 23px !important;
    border-radius: 50% !important;
    opacity: 100% !important;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    background: #fff !important;
    top: var(--swiper-navigation-top-offset, 60%) !important
}

.favouritePlansSection .fovCard .swiper-button-next img {
    width: 30% !important;
    transform: rotate(180deg)
}

.favouritePlansSection .fovCard .swiper-button-prev img {
    width: 30% !important
}

.fovCard .swiper:hover .swiper-button-next,
.fovCard .swiper:hover .swiper-button-prev {
    visibility: visible
}

.fovCard .swiper .swiper-button-next,
.fovCard .swiper .swiper-button-prev {
    visibility: hidden
}

.favouritePlansSection .fovCard .swiper-button-next.active,
.favouritePlansSection .fovCard .swiper-button-prev.active,
.favouritePlansSection .fovCard .swiper-button-next:hover,
.favouritePlansSection .fovCard .swiper-button-prev:hover {
    background: #19437a !important
}

.favouritePlansSection .fovCard .swiper-button-next.active img,
.favouritePlansSection .fovCard .swiper-button-prev.active img,
.favouritePlansSection .fovCard .swiper-button-next:hover img,
.favouritePlansSection .fovCard .swiper-button-prev:hover img {
    filter: brightness(0) invert(1) !important
}

.favouritePlansSection .fovCard .swiper-button-next::after,
.favouritePlansSection .fovCard .swiper-button-prev::after {
    content: unset !important
}

.favouritePlansSection .fovCard .fovCardContent {
    padding: 8px 19px 19px;
    flex: 1;
    display: flex;
    flex-direction: column;
    cursor: pointer
}

.fovCardContent .fovPersonalNote {
    flex: 1
}

.fovCardContent .fovPersonalNote form {
    height: 100% !important;
    display: flex;
    flex-direction: column
}

.favouritePlansSection .fovCard .fovHouseRating {
    margin-top: auto
}

.favouritePlansSection .customerDashboardSection .fovCard .fovCardContent {
    padding-bottom: 55px
}

.favouritePlansSection .fovCard .fovCardtitleHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding: 0;
    position: relative
}

.favouritePlansSection .fovCard .fovCardtitleHead p {
    font-family: var(--opensans);
    font-size: 13px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: .22px;
    color: #d61e3a;
    text-align: center
}

.favouritePlansSection .fovCard .fovCardtitleHead p.starting-at {
    color: #acacac
}

.favouritePlansSection .fovCard .houseDetails {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    text-align: center
}

.favouritePlansSection .fovCard .houseDetails img {
    filter: invert(20%) sepia(67%) saturate(1041%) hue-rotate(185deg) brightness(99%) contrast(95%) !important
}

.favouritePlansSection .fovCard .houseDetails>div {
    width: 25%;
    margin-top: 10px;
    border-right: 1px solid #e5e5e5
}

.favouritePlansSection .fovCard .houseDetails>div:nth-child(4n) {
    border: none
}

.favouritePlansSection .fovCard .houseDetails p {
    white-space: nowrap;
    font-family: var(--opensans);
    font-size: 10px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #636363
}

.favouritePlansSection .fovCard .houseDetails p span {
    color: #000 !important;
    font-weight: 700 !important;
    margin-left: 2px !important
}

.favouritePlansSection .fovCard .fovPersonalNote .fovPersonalNotehead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 0
}

.favouritePlansSection .fovCard .fovPersonalNote h6 {
    text-transform: none;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: .3px;
    color: #000
}

.favouritePlansSection .fovCard .fovPersonalNote button {
    width: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    border: solid 1px #e7e7e7;
    font-family: var(--opensans);
    background-color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #19437a;
    cursor: pointer
}

.favouritePlansSection .fovCard .fovPersonalNote textarea {
    width: 100%;
    resize: vertical;
    height: 65px;
    min-height: 65px !important;
    border-radius: 8px;
    border: solid 1px rgba(0, 0, 0, .1);
    background-color: #fff;
    padding: 10px;
    outline: none
}

.favouritePlansSection .fovCard .fovPersonalNote textarea::placeholder {
    font-family: var(--opensans);
    font-size: 11px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: .22px;
    color: #a2a2a2
}

.favouritePlansSection .fovCard .fovHouseRatingHead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 17px 0 20px
}

.favouritePlansSection .fovCard .fovHouseRatingHead>div {
    display: flex;
    align-items: center
}

.favouritePlansSection .fovCard .fovHouseRatingHead>div img {
    margin-left: 2px;
    cursor: pointer;
    width: 25px !important
}

.favouritePlansSection .fovCard .fovHouseRatingHead h6 {
    font-family: var(--opensans);
    text-transform: none;
    font-size: 13px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: .26px;
    margin-right: 6px;
    color: #000
}

.favouritePlansSection .fovCard .fovHouseRatingHead span {
    width: auto;
    cursor: pointer
}

.favouritePlansSection .fovCard .fovHouseRatingHead span a img {
    filter: none !important
}

.favouritePlansSection .fovCard .fovCardBtn {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    background-color: #19437a;
    border: none;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #fff;
    cursor: pointer
}

.companyLiveChat button:hover,
.tblInputGrp button:hover {
    box-shadow: 0 0 8px rgb(10 61 122/80%) !important
}

.favouritePlansSection .fovCard .fovCardbadge {
    position: absolute;
    padding: 10px 20px 10px 16px;
    z-index: 9999 !important;
    bottom: -2px;
    left: 0;
    -webkit-clip-path: polygon(100% 0%, 85% 51%, 100% 100%, 0 100%, 0 47%, 0 0);
    clip-path: polygon(100% 0%, 85% 51%, 100% 100%, 0 100%, 0 47%, 0 0);
    font-family: var(--asap);
    font-size: 13px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: center;
    color: #fff
}

.favouritePlansSection .fovCard .fovCardbadge1 {
    background: #bbbec3
}

.favouritePlansSection .fovCard .fovCardbadge2 {
    background: #e7c871
}

.favouritePlansSection .fovCard .Liked {
    position: absolute;
    top: -30px;
    right: 0;
    z-index: 11;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center
}

.favouritePlansSection .fovCard .Liked img {
    width: 70%
}

.favouritePlansSection .fovCard .icons {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9999;
    display: flex;
    align-items: center
}

.favouritePlansSection .fovCard .icons span {
    width: 34px;
    height: 34px;
    box-shadow: 0 6px 31px rgba(5, 20, 42, .09);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    margin-left: 8px;
    cursor: pointer
}

.favouritePlansSection .fovCard .icons span img {
    filter: invert(20%) sepia(67%) saturate(1041%) hue-rotate(185deg) brightness(99%) contrast(95%) !important
}

.PaginationTop.fovPaginationHead {
    padding: 0 0 20px !important
}

.fovPaginationHead {
    display: flex;
    justify-content: center;
    align-items: center
}

.fovPaginationHead ul {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.fovPaginationHead ul a {
    text-decoration: none !important
}

.fovPaginationHead ul li {
    height: 24px;
    min-width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px !important;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #000;
    cursor: pointer;
    padding: 0 5px !important
}

.fovPaginationHead ul li.active {
    background-color: #19437a;
    color: #fff !important;
    border-color: #19437a !important;
    border-radius: 12px
}

.fovPaginationHead ul li.active::after {
    content: "" !important
}

.fovPaginationHead span {
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #19437a;
    cursor: pointer
}

.fovPaginationHead span.prev {
    margin-right: 12px
}

.fovPaginationHead span.next {
    margin-left: 12px
}

.fovPaginationHead>img:first-child {
    margin-right: 12px !important
}

.fovPaginationHead>img:last-child {
    margin-left: 12px !important
}

.favouritePlansSection .fovCard2 .fovCardtitleHead p,
.favouritePlansSection .fovCard3 .fovCardtitleHead p {
    color: #acacac !important
}

.favouritePlansSection .fovMainContent .fovMainContentHead select option {
    font-family: var(--opensans);
    font-size: 11px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: .22px;
    color: #404040
}

.accountTabContainer {
    width: 100%;
    padding: 10px 0 !important;
    background-color: #fafafc
}

.accountTabContainer .accountTabContent {
    max-width: 1244px;
    margin: 0 auto
}

.accountTabContent .accTabBtns {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 0 35px
}

.accTabBtns .accProfileTab {
    position: relative;
    cursor: pointer
}

.accTabBtns .accProfileBox {
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 11px;
    background-color: #fff;
    padding: 20px 24px 20px 18px;
    position: relative
}

.accProfileTab.show .accProfileBox {
    border-radius: 0 !important
}

.accProfileTab.show .accProfileBox::before {
    content: "";
    width: 100%;
    background: #fff;
    height: 25px;
    position: absolute;
    top: -24px;
    left: 0
}

.accProfileBox .accInfo {
    margin: 0 12px
}

.accProfileBox span {
    width: 39px;
    background-color: #19437a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.accProfileBox span img {
    filter: invert(100%)
}

.accProfileBox h4 {
    color: #19437a;
    font-family: var(--asap) !important;
    font-size: 15px;
    font-weight: 600;
    word-break: break-all;
    text-transform: uppercase
}

.accProfileBox .dash-email {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    word-break: break-all
}

.accProfileBox .arrowDropDown {
    width: 15px;
    height: 9px;
    user-select: none;
    transition: .3s;
    transform: rotate(180deg)
}

.accProfileTab .accProfileDropdown {
    display: none;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -283px;
    z-index: 11;
    overflow: hidden;
    background: #fff;
    border-radius: 0 0 11px 11px;
    box-shadow: 0 28px 31px rgba(0, 0, 0, .13);
    list-style: none;
    padding: 0
}

#designerProfileDropdown {
    bottom: -233px !important
}

.accProfileTab.show .accProfileDropdown {
    display: block
}

.accProfileTab .accProfileDropdown li a {
    font-family: var(--asap);
    font-size: 15px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    padding: 14px 18px;
    border-bottom: 1px solid #f6f6f6;
    cursor: pointer;
    text-decoration: none;
    color: #000
}

.accProfileTab .accProfileDropdown li a:hover,
.accProfileTab .accProfileDropdown li a.active {
    background-color: #19437a;
    border-color: #19437a;
    color: #fff
}

.accProfileTab .accProfileDropdown li a:hover img,
.accProfileTab .accProfileDropdown li a.active img {
    filter: invert(100%) !important
}

.accProfileTab .accProfileDropdown img {
    filter: invert(20%) sepia(67%) saturate(1041%) hue-rotate(185deg) brightness(99%) contrast(95%);
    margin-right: 8px !important;
    display: inline-block
}

.accTabBtns .accTabBtn {
    background: 0 0;
    border: none;
    display: flex;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    padding: 16px 22px;
    font-family: var(--asap) !important;
    font-size: 16px;
    font-weight: 600;
    color: #000 !important;
    line-height: 20px;
    margin-left: 30px
}

.accTabBtns .accTabBtn img {
    margin-right: 10px;
    filter: invert(20%) sepia(67%) saturate(1041%) hue-rotate(185deg) brightness(99%) contrast(95%)
}

.accTabBtns .accTabBtn.active {
    background-color: #19437a;
    color: #fff !important;
    padding: 16px 22px
}

.accTabBtns .accTabBtn:hover {
    background-color: #19437a;
    color: #fff !important
}

.accTabBtns .accTabBtn:hover img {
    filter: invert(100%) !important
}

.accTabBtns .accTabBtn.active img {
    filter: invert(100%) !important
}

.accountPurchaseSection .accPurchaseContent {
    padding: 20px 35px !important;
    max-width: 1244px !important;
    margin: 0 auto
}

.accountPurchaseSection .accPurchaseContent .accountPurchaseHead {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 12px
}

.accountPurchaseHead h2 {
    font-family: var(--din_2014) !important;
    font-size: 44px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #000;
    text-transform: capitalize;
    margin-bottom: 36px
}

.FavBrowseHead {
    padding-top: 45px
}

.accountPurchaseSection .accPurchaseContent .accountPurchaseHead h6 {
    color: #19437a;
    font-family: var(--asap) !important;
    font-size: 31px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    margin-bottom: 10px;
    text-transform: none
}

.accountPurchaseSection .userActivityContainer {
    padding: 0 20px 60px
}

.browseOrderCards .orderCard {
    border-radius: 22px;
    background-color: #fafafc;
    padding: 26px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 34px
}

.browseOrderCards .orderOverview {
    width: 255px
}

.orderCard .orderCardImg {
    border-radius: 8px;
    max-width: 252px;
    width: 100%;
    height: 100%;
    display: flex
}

.orderCard .orderCardImg img {
    width: 100%;
    height: 100%;
    border-radius: 8px
}

.orderCard .orderCardDetails {
    max-width: 610px;
    width: 100%;
    flex: 1;
    padding-left: 32px
}

.orderCard .orderNo {
    color: #1e4279;
    font-family: var(--asap) !important;
    font-size: 24px;
    line-height: 23px;
    font-weight: 600;
    font-style: normal
}

.orderCard .orderInnerDetails {
    padding: 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.orderInnerDetails p {
    color: #a1a1a1;
    font-family: var(--opensans) !important;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    font-style: normal;
    margin-bottom: 5px
}

.orderInnerDetails p span {
    height: 15px;
    color: #404040;
    font-family: var(--opensans);
    font-size: 13px;
    font-weight: 600;
    margin-left: 10px;
    line-height: 23px
}

span.orderclosed,
span.ordercanceled {
    color: #d61e3a !important;
    font-weight: 600 !important
}

span.orderopen {
    color: #098409 !important;
    font-weight: 600 !important
}

.orderCard .orderItems {
    border-left: 2px solid #ececee;
    padding-left: 40px;
    flex: 1
}

.orderInnerDetails .orderItems h5 {
    color: #a1a1a1;
    font-family: var(--opensans) !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    margin-bottom: 10px
}

.orderInnerDetails .orderItems ul {
    list-style: none;
    padding: 0;
    margin: 0 0 18px
}

.orderInnerDetails .orderItems ul li {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 13px;
    font-weight: 600;
    font-style: normal;
    line-height: 25px
}

.orderInnerDetails .orderItems a {
    color: #19437a;
    font-family: var(--opensans) !important;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    text-decoration: underline
}

.fovCard .lastViewed {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    background: #000000c4;
    padding: 8px 26px 8px 18px;
    -webkit-clip-path: polygon(100% 0%, 92% 51%, 100% 100%, 0 100%, 0 47%, 0 0);
    clip-path: polygon(100% 0%, 92% 51%, 100% 100%, 0 100%, 0 47%, 0 0);
    opacity: .8
}

.fovCard .lastViewed span {
    font-family: var(--opensans);
    font-size: 12px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    color: #fff
}

.updateProfileSection .updateProfile {
    padding: 30px 35px;
    max-width: 1244px !important;
    margin: 0 auto
}

.updateProfileSection .updateProfile .updateProfileHead {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 12px
}

.updateProfileSection .updateProfile .updateProfileHead h2 {
    font-family: var(--din_2014) !important;
    font-size: 44px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: .3px;
    color: #000;
    text-transform: capitalize;
    margin-bottom: 26px
}

.updateProfileSection .updateProfile .updateProfileHead p {
    color: #000;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 40px
}

.updateProfileForm .apdateFormRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

.apdateFormRow .Fullwidth {
    width: 100% !important;
    margin-bottom: 24px;
    display: block
}

.apdateFormRow .updateFormCol {
    width: 48%;
    margin-bottom: 24px
}

.updateFormCol label {
    display: inline-block;
    color: #000;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 14px
}

.updateFormCol input,
select {
    width: 100%;
    height: 50px;
    border-radius: 7px;
    padding: 0 18px;
    border: 1px solid rgba(0, 0, 0, .1);
    background-color: #fff;
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 400;
    outline: none
}

.updateFormCol input::placeholder {
    color: #8d8d8d;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 400
}

.updateFormCol .checkboxGroup input[type=checkbox] {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none !important;
    cursor: pointer
}

.updateFormCol .checkboxGroup label {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    width: fit-content;
    position: relative;
    cursor: pointer;
    color: #000;
    font-family: var(--opensans) !important;
    font-size: 14px;
    font-weight: 400;
    font-style: normal
}

.updateFormCol .checkboxGroup label:before {
    content: "";
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid #cfd5df;
    border-radius: 4px;
    padding: 10px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 12px
}

.updateFormCol .checkboxGroup input[type=checkbox]:checked+label:before {
    background: #19437a
}

.updateFormCol .checkboxGroup input[type=checkbox]:checked+label:after {
    content: "";
    display: block;
    position: absolute;
    top: 3.5px;
    left: 8px;
    width: 5px;
    height: 11px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg)
}

.updateProfileForm .notp {
    margin-top: 0 !important
}

.updateProfileForm .saveUpdateBtn {
    width: 109px;
    height: 46px;
    border-radius: 8px;
    background-color: #19437a;
    border: 1px solid #19437a;
    font-family: var(--opensans) !important;
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    margin-top: 50px;
    cursor: pointer;
    transition: .3s
}

.updateProfileForm .saveUpdateBtn:hover {
    background: #fff;
    color: #19437a;
    box-shadow: 0 0 8px rgb(10 61 122/80%) !important
}

#hp-mobile-navigator {
    z-index: 1111
}

#footer .hp-footer__ad-row {
    margin-bottom: 0
}

.accountTabContent.tabSmallCoontent .accTabBtns {
    justify-content: center !important;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important
}

.accountTabContent.tabSmallCoontent .accProfileTab.show .accProfileBox::before {
    background: #fafafc
}

.myPlansSection .myPlans {
    padding: 20px 35px 40px;
    max-width: 1244px !important;
    margin: 0 auto
}

.myPlansSection .myPlans .myPlansHead {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 12px
}

.myPlansSection .myPlans .myPlansHead h2 {
    font-family: var(--din_2014) !important;
    font-size: 44px;
    font-weight: 400;
    line-height: 70px;
    font-style: normal;
    letter-spacing: normal;
    color: #000;
    text-transform: capitalize;
    margin-bottom: 20px
}

.myPlansSection .myPlans .myPlansHead p {
    color: #000;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 40px;
    line-height: 20px
}

.myPlans .myPlansHead a {
    color: #19437a;
    text-decoration: none
}

.myPlansTable {
    overflow-x: auto
}

.myPlansTable table {
    width: 1174px !important;
    border-collapse: collapse
}

.myPlansTable table thead {
    border-radius: 11px
}

.myPlansTable th,
.myPlansTable td {
    text-align: left;
    padding: 20px 30px
}

.myPlansTable th {
    color: #fff;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    background-color: #19437a
}

.myPlansTable td {
    color: #404040;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal
}

td.customer-name {
    width: 250px
}

.myPlansTable td.bold {
    font-weight: 700
}

.myPlansTable td:first-child {
    color: #19437a;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 500;
    font-style: normal
}

.myPlansTable td:first-child img {
    width: 17px;
    height: 17px;
    margin-right: 12px;
    filter: invert(20%) sepia(67%) saturate(1041%) hue-rotate(185deg) brightness(99%) contrast(95%)
}

.myPlansTable th:first-child,
.myPlansTable td:first-child {
    border-radius: 11px 0 0 11px
}

.myPlansTable th:last-child,
.myPlansTable td:last-child {
    border-radius: 0 11px 11px 0
}

.myPlansTable tbody tr:nth-child(2n) td {
    background-color: #f6f6f6
}

.accountTabContent.tabSmallCoontent .accTabBtns .accTabBtn {
    margin-left: 50px
}

td .date-desktop img {
    top: 4px;
    position: relative
}

td .date-small {
    display: none
}

.myPlansTable table tbody tr td img {
    width: 20px;
    height: 20px;
    filter: invert(20%) sepia(67%) saturate(1041%) hue-rotate(185deg) brightness(99%) contrast(95%);
    margin-right: 10px
}

.myPlansMainSection {
    background: #fff;
    padding-top: 0
}

section .savedSearches {
    padding: 20px 35px !important;
    max-width: 1244px !important;
    margin: 0 auto
}

.customerDashboardSection .savedSearchesSection .swiper-slide {
    height: auto !important
}

.savedSearchesSection .savedCard {
    height: 100% !important;
    display: flex;
    flex-direction: column
}

.accountPurchaseSection .savedSearchesSection .savedCard {
    height: auto !important
}

.savedSearchesSection .savedSearches .savedSearchesHead {
    margin-bottom: 40px
}

.savedSearchesSection .savedSearches .savedSearchesHead h2 {
    font-family: var(--din_2014) !important;
    font-size: 44px;
    font-weight: 400;
    font-style: normal;
    color: #000;
    text-transform: none;
    margin-bottom: 0
}

.savedSearches .savedCards {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: stretch;
    column-gap: 20px
}

.savedCards .savedCard {
    max-width: 303px;
    width: 100%;
    background-color: #fafafc;
    border: 1px solid #0000001a;
    border-radius: 15px;
    padding: 22px 20px;
    margin: 0 20px 20px 0;
    height: auto
}

.savedCards .savedCard .savedCardHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px
}

.savedCards .savedCard:nth-child(3n) {
    margin-right: 0
}

.savedCard .savedCardHead h4 {
    color: #000;
    font-family: var(--asap);
    font-size: 24px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    overflow-wrap: break-word !important;
    max-width: 230px
}

.savedCard .savedCardHead input {
    color: #000;
    font-family: var(--asap);
    font-size: 24px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    background-color: #f6f6f6;
    width: 200px;
    display: inline-block;
    border: 1px #fff solid;
    padding: 6px
}

.savedCard .savedCardHead a {
    text-decoration: none
}

.savedCard .savedCardHead img {
    filter: invert(20%) sepia(67%) saturate(1041%) hue-rotate(185deg) brightness(99%) contrast(95%);
    width: 24px;
    height: 24px
}

img.save-icon {
    margin-top: 8px
}

.savedCardHead form {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.savedCardHead form input {
    width: 100% !important;
    flex: 1
}

.savedCardHead form a img {
    margin-left: 5px
}

.savedCard .savedCardBody {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%
}

.savedCard .savedCardBody h5 {
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    color: #19437a;
    margin-bottom: 10px;
    text-transform: uppercase
}

.savedCard .searchedFilters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: calc(-0.5 * 1rem);
    margin-right: calc(-0.5 * 1rem);
    margin-bottom: 18px
}

.searchedFilters .filterItem {
    padding: 0 5px
}

.savedCard .searchedFilters span {
    display: inline-block;
    width: fit-content;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 5px;
    color: #000;
    font-family: var(--opensans);
    font-size: 13px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: normal;
    padding: 8px 9px;
    margin-bottom: 12px
}

.savedCard .searchActionBtns {
    padding-bottom: 0 !important
}

.savedCard .searchActionBtns {
    margin-top: auto;
    padding-bottom: 48px;
    margin-bottom: 0
}

.searchActionBtns button {
    height: 45px;
    border-radius: 11px;
    padding: 0 15px;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: normal;
    cursor: pointer
}

.searchActionBtns .runSearchBtn {
    width: 126px;
    background-color: #19437a;
    border: 1px solid #19437a;
    color: #fff;
    margin: 0 10px
}

.searchActionBtns .dltSearchBtn {
    width: 112px;
    border: 1px solid #19437a;
    background-color: #fafafc;
    color: #19437a
}

a.view-link {
    display: flex
}

.orderListTable td .closed {
    color: #d61e3a
}

.orderListTable td .fulfilled {
    color: #d61e3a
}

.orderListTable td .open {
    color: green
}

.cartSection {
    padding-bottom: 50px;
    padding-top: 40px
}

.cartSection .cartLoginBox {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 35px 30px;
    flex-direction: column
}

.empty-cart-buttons {
    display: flex;
    padding-top: 35px;
    row-gap: 20px;
    column-gap: 20px
}

.empty-cart-signin {
    padding-top: 35px
}

#showAuthModal:hover {
    text-decoration: none
}

.empty-cart-signin button#showAuthModal {
    font-size: 16px;
    font-weight: 700;
    width: auto !important;
    padding: 0 25px
}

.empty-cart-buttons button {
    width: 200px !important;
    font-size: 16px;
    font-weight: 700
}

.empty-cart-buttons button.shop-all-button {
    border: 1px solid rgba(0, 0, 0, .15);
    background-color: #fff;
    color: #19437a;
    font-size: 1.5em;
    white-space: nowrap;
    width: auto !important;
    padding: 20px 35px;
    height: auto !important
}

.empty-cart-buttons button.shop-all-button:hover {
    color: #fff;
    box-shadow: 0 0 8px rgb(10 61 122/80%) !important;
    background-color: #19437a !important
}

hr.empty_cart_hr {
    height: 3px;
    background-color: #dadada;
    border: none;
    width: 100%;
    margin-top: 35px
}

h3.empty-cart-inner {
    margin-top: 20px
}

.cartLoginBox button {
    width: 83px;
    height: 46px;
    background-color: #19437a;
    border: none;
    border-radius: 11px;
    font-family: var(--opensans);
    color: #fff;
    cursor: pointer
}

.cartLoginBox button:hover {
    background: #fff;
    color: #19437a;
    cursor: pointer;
    box-shadow: 0 0 8px rgb(10 61 122/80%) !important
}

.cartLoginBox p,
.cartLoginBox h3 {
    color: #182026;
    font-family: var(--opensans);
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal
}

.cartLoginBox h3 {
    font-size: 32px
}

.cartMainContainer {
    max-width: 950px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px
}

.cartHead h2 {
    font-family: var(--din_2014) !important;
    font-size: 44px;
    font-weight: 400;
    line-height: 70px;
    font-style: normal;
    letter-spacing: normal;
    color: #000;
    text-transform: capitalize;
    text-align: center
}

.cartBox .cartBoxHeading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #e5e5e5;
    padding: 16px 30px
}

.cartBox .cartBoxHeading {
    color: #5f5f5f;
    font-family: var(--opensans);
    font-size: 17px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 25px;
    text-transform: uppercase
}

.cartItemNotice {
    background-color: #faf591;
    border-radius: 15px;
    border-width: 10px;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 0;
    order: -1;
    font-size: 15px
}

.cartItemNotice strong {
    color: #b03532
}

.totalCartItems {
    margin-bottom: 44px
}

.totalCartItems .cartItem {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #fafafc;
    border-radius: 22px;
    padding: 29px;
    margin-top: 30px;
    position: relative
}

.cartItem .cartItemImgBox {
    position: relative
}

.cartItem .cartItemImg {
    width: 235px;
    border-radius: 15px;
    overflow: hidden
}

.cartItem .cartItemImg img {
    width: 100%
}

.cartError {
    color: #b03532;
    background-color: #faf591;
    border-radius: 15px;
    border-width: 10px;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 700
}

.cartItemActions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 15px
}

.cartItemActions a,
.cartItemActions button {
    width: 26px;
    height: 26px;
    background: #fff;
    border: none;
    border-radius: 4px;
    box-shadow: 0 4px 23px rgba(5, 20, 42, .09);
    margin-left: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.cartItemActions button:hover {
    background: #19437a
}

.cartItemActions a img,
.cartItemActions button img {
    filter: invert(20%) sepia(67%) saturate(1041%) hue-rotate(185deg) brightness(99%) contrast(95%) !important
}

.cartItemActions button:hover img {
    filter: invert(100%) !important
}

.cartItemImgBox h5 {
    color: #1e4279;
    font-family: var(--asap);
    font-size: 22px;
    font-weight: 700;
    font-style: normal;
    margin-top: 5px
}

.cartItemContent {
    width: 50%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start
}

.cartItemContent .cartItemPdf {
    margin: 12px 0
}

.cartItemContent .cartItemPrice {
    text-align: end
}

.cartItemContent h4 {
    font-family: var(--asap);
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    color: #1e4279;
    letter-spacing: normal;
    margin-bottom: 7px
}

.cartItemContent p {
    color: #404040;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal
}

.cartCheckoutCont {
    display: flex;
    justify-content: space-between;
    background: #f4f6f8;
    border-radius: 22px;
    padding: 25px 38px
}

.continueShopping {
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.continueShopping button {
    width: 227px;
    height: 54px;
    border-radius: 11px;
    border: 1px solid rgba(30, 66, 121, .1);
    background-color: #fff;
    color: #1e4279;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    cursor: pointer;
    transition: .3s
}

.continueShopping button img {
    filter: invert(20%) sepia(67%) saturate(1041%) hue-rotate(185deg) brightness(99%) contrast(95%) !important;
    margin-right: 8px
}

.continueShopping button:hover {
    background: #19437a;
    color: #fff;
    box-shadow: 0 0 8px rgb(10 61 122/80%) !important
}

.continueShopping button:hover img {
    filter: brightness(0) invert(1) !important
}

.checkoutDetails {
    width: 50%
}

.checkoutDetails ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.checkoutDetails ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

.checkoutDetails ul li.subTotal span {
    font-family: var(--opensans);
    color: #404040;
    font-size: 16px;
    font-weight: 500
}

.checkoutDetails ul li.emailDel span {
    font-family: var(--opensans);
    color: #1e4279;
    font-size: 16px;
    font-weight: 500
}

.checkoutDetails ul li.totalAmount span {
    font-family: var(--opensans-bold);
    color: #000;
    font-size: 16px;
    font-weight: 700
}

.checkoutDetails ul li.totalAmount strong {
    font-size: 21px;
    font-weight: 900
}

.purchaseAgreementCheckbox {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0
}

.purchaseAgreementCheckbox input[type=checkbox] {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none !important;
    cursor: pointer
}

.purchaseAgreementCheckbox label {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    width: fit-content;
    position: relative;
    cursor: pointer;
    color: #000;
    font-family: var(--asap) !important;
    font-size: 15px;
    font-weight: 500;
    font-style: normal
}

.purchaseAgreementCheckbox label a {
    color: #415cda;
    margin-left: 4px;
    text-decoration: underline
}

.purchaseAgreementCheckbox label:before {
    content: "";
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid #cfd5df;
    border-radius: 4px;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 8px
}

.purchaseAgreementCheckbox input[type=checkbox]:checked+label:before {
    background: #19437a
}

.purchaseAgreementCheckbox input[type=checkbox]:checked+label:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 7px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg)
}

.checkoutDetails .cartCheckoutBtn {
    display: block;
    width: 153px;
    margin-left: auto;
    height: 54px;
    background-color: #19437a;
    border: none;
    border-radius: 11px;
    color: #fff;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    margin-top: 10px;
    cursor: pointer
}

.checkoutDetails .cartCheckoutBtn:disabled {
    background-color: #ccc;
    color: #999
}

.checkoutPayments {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 20px
}

.checkoutPayments .promoCode a {
    color: #19437a;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer
}

.paymentWith {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #979797;
    font-family: var(--asap);
    font-size: 13px;
    font-weight: 400
}

.paymentWith a {
    text-decoration: none;
    display: block
}

.paymentWith a:nth-child(2) img {
    width: 56px;
    height: 15px;
    margin: 0 4px;
    transform: translateY(2px)
}

.paymentWith a:nth-child(3) img {
    width: 36px;
    height: 20px;
    margin: 0 4px;
    transform: translateY(4px)
}

.paymentWith a:nth-child(5) img {
    width: 41px;
    height: 16px;
    margin-left: 4px;
    transform: translateY(-1px)
}

.applyPromo {
    display: none;
    padding: 10px 0
}

.applyPromo.show {
    display: flex
}

.applyPromo input {
    width: 248px;
    height: 47px;
    border-radius: 11px;
    background-color: #f5f5f5;
    border: none;
    outline: none;
    padding: 0 22px
}

.applyPromo input::placeholder {
    opacity: .8;
    color: #182026;
    font-family: var(--opensans);
    font-size: 11px;
    font-weight: 400;
    font-style: normal
}

.applyPromo button {
    width: 83px;
    height: 47px;
    border-radius: 11px;
    background-color: #19437a;
    border: none;
    color: #fff;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: normal;
    margin-left: 14px
}

.viewOrdersMainSection {
    background: #fff
}

.viewOrderSection .viewOrder {
    padding: 20px 35px !important;
    max-width: 1244px !important;
    margin: 0 auto !important
}

.viewOrderSection .viewOrder .viewOrderHead {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 0;
    margin-left: 0
}

.viewOrderSection .viewOrder .viewOrderHead h2 {
    font-family: var(--din_2014) !important;
    font-size: 44px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #000;
    text-transform: capitalize
}

.globalBreadcrumbsContainer {
    background-color: #eee;
    padding: 0 8px
}

.globalBreadcrumbsContainer button {
    height: 58px;
    background-color: #eee;
    border: none;
    padding: 10px 44px 10px 28px;
    position: relative;
    color: #7e7e7e;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    cursor: pointer
}

.globalBreadcrumbsContainer button.active::before {
    content: "";
    width: 40px;
    height: 40px;
    transform: rotate(45deg);
    border-top: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 10px
}

.viewOrdersMainSection .accProfileTab.show .accProfileBox::before {
    height: 10px !important;
    top: -10px !important;
    background: #fff !important
}

.viewOrderDetails {
    border-radius: 15px;
    background-color: #fafafc;
    padding: 40px 24px 0
}

.viewOrderHeadings {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 24px;
    margin-bottom: 48px
}

.viewOrderHeadings .viewOrderHeading h4 {
    color: #19437a;
    font-family: var(--asap);
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    margin-bottom: 12px
}

.viewOrderHeadings .viewOrderHeading p {
    color: #404040;
    font-family: var(--OpenSans-semiBold);
    font-size: 16px;
    font-weight: 500;
    font-style: normal
}

.viewOrderHeadings .viewOrderHeading .closed {
    color: #d61e3a !important
}

.viewOrderHeadings .viewOrderHeading .fulfilled {
    color: #d61e3a !important
}

.viewOrderHeadings .viewOrderHeading .open {
    color: green !important
}

.oneline {
    white-space: nowrap
}

.myPlansTable.orderListTable .oneline {
    display: flex;
    align-items: center
}

.myPlansTable.orderListTable thead>tr {
    background-color: #19437a
}

.orderBillingAndShipping {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 24px;
    margin-bottom: 60px
}

.orderBillingAndShipping .orderBilling {
    width: 62%
}

.orderBillingAndShipping .orderShipping {
    width: 45%
}

.billingShippingContent h4 {
    color: #19437a;
    font-family: var(--asap);
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    margin-bottom: 16px
}

.billingShippingContent ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.billingShippingContent li {
    color: #404040;
    font-family: var(--OpenSans-semiBold);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 8px
}

.viewOrderTable table {
    width: 100% !important;
    border-collapse: collapse;
    border-spacing: 0
}

.viewOrderTable table thead {
    border-radius: 11px;
    background-color: transparent !important;
    overflow: hidden
}

.viewOrderTable table thead tr {
    width: 100%;
    overflow: hidden;
    border-radius: 11px
}

.viewOrderTable th,
.viewOrderTable td {
    text-align: left;
    padding-left: 25px;
    padding-right: 25px
}

.viewOrderTable th {
    color: #19437a;
    font-family: var(--asap);
    font-size: 18px;
    font-weight: 700;
    padding-top: 25px;
    padding-bottom: 25px
}

.viewOrderTable td {
    color: #404040;
    font-family: var(--OpenSans-semiBold);
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    background: #eee;
    padding-top: 15px;
    padding-bottom: 10px
}

.totalCommissions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 45px 0 30px
}

.totalCommissions p {
    margin-right: 40px
}

.saleCommission {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

.saleCommission p,
.saleCommission span {
    color: #363636;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 700
}

.saleCommission span {
    font-weight: 500
}

.commissionAfterDiscount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px
}

.commissionAfterDiscount p {
    color: #19437a;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 700
}

.commissionAfterDiscount span {
    display: inline-block;
    color: #000;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 900;
    font-style: normal
}

.orderFulfillment h2 {
    color: #19437a;
    font-family: var(--asap);
    font-size: 26px;
    font-weight: 700;
    font-style: normal;
    margin-bottom: 35px
}

.orderFulfillment table {
    width: 100% !important;
    border-collapse: collapse;
    border-spacing: 0
}

.orderFulfillment table thead {
    border-radius: 11px;
    background-color: transparent !important;
    overflow: hidden
}

.orderFulfillment table thead tr {
    width: 100%;
    overflow: hidden;
    border-radius: 11px
}

.orderFulfillment th,
.orderFulfillment td {
    text-align: left;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box
}

.orderFulfillment thead th:first-child,
.orderFulfillment tbody td:first-child {
    text-align: left;
    padding-left: 22px;
    padding-right: 22px
}

.orderFulfillment table th {
    background: #19437a !important;
    color: #fff;
    font-family: var(--asap);
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    padding-top: 22px;
    padding-bottom: 22px
}

.orderFulfillment table thead th:first-child {
    border-radius: 11px 0 0 11px
}

.orderFulfillment table thead th:last-child {
    border-radius: 0 11px 11px 0
}

.orderFulfillment td {
    background: 0 0;
    color: #404040;
    font-family: var(--OpenSans-semiBold);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    padding-top: 24px;
    padding-bottom: 24px;
    vertical-align: top
}

.orderFulfillment tbody tr:first-child td {
    padding-top: 32px !important
}

.orderFulfillment tbody tr:last-child td {
    padding-bottom: 32px !important
}

.orderFulfillment tbody tr td:nth-child(3) span {
    display: flex;
    align-items: center
}

.orderFulfillment tbody tr td:nth-child(3) span img {
    width: 18px;
    height: 18px;
    margin-right: 8px
}

.orderFulfillment tbody tr td:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.orderFulfillment tbody tr td:last-child button {
    width: 159px;
    height: 40px;
    background-color: #19437a;
    border: 1px solid #19437a;
    border-radius: 8px;
    color: #fff;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 600;
    font-style: normal;
    cursor: pointer;
    transition: .3s;
    margin-top: 16px
}

.orderFulfillment tbody tr td:last-child button:hover {
    background: #fff;
    color: #19437a
}

.tblInputGrp {
    max-width: 200px;
    width: fit-content;
    margin-bottom: 14px
}

.tblInputGrp label {
    display: inline-block;
    color: #404040;
    font-family: var(--OpenSans-semiBold);
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 6px
}

.tblInputGrp input {
    width: 100%;
    height: 34px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, .1);
    outline: none;
    padding: 10px
}

.tblInputGrp button {
    width: 154px !important;
    margin-top: 6px !important
}

.backToOrders {
    padding: 20px 0 0
}

.backToOrders button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 226px;
    height: 53px;
    border-radius: 11px;
    border: 1px solid rgba(30, 66, 121, .1);
    background-color: #fff;
    color: #1e4279;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    cursor: pointer;
    transition: .3s
}

.backToOrders button img {
    transform: rotate(-90deg);
    width: 10px;
    height: auto;
    margin-right: 8px
}

.backToOrders button:hover {
    border: 1px solid #1e4279;
    background-color: #1e4279;
    color: #fff;
    box-shadow: 0 0 8px rgb(10 61 122/80%) !important
}

.backToOrders button:hover img {
    filter: brightness(0) invert(1)
}

.dashboardMainSection {
    background: #fff
}

.customerDashboardSection .customerDashboard {
    padding: 20px 35px !important;
    max-width: 1244px !important;
    margin: 0 auto !important
}

.customerDashboardSection .customerDashboard .customerDashboardHead {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 0;
    margin-left: 0
}

.customerDashboardSection .customerDashboard .customerDashboardHead h2 {
    font-family: var(--din_2014) !important;
    font-size: 44px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #000;
    text-transform: capitalize;
    margin-bottom: 26px
}

.customerDashboardSection .customerDashboard .customerDashboardHead p {
    color: #000;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px
}

.BrowseHistorySecSection .fovCards {
    padding-left: 20px !important;
    padding-right: 20px !important
}

.BrowseHistorySecSection .favCardsHead {
    padding: 0 20px
}

.customerDashboardSection.BrowseHistorySecSection .fovCards {
    padding-left: 10px !important;
    padding-right: 10px !important;
    column-gap: 14px
}

.customerDashboardSection .fovCards.browseHistory {
    padding-left: 10px;
    padding-right: 10px
}

.customerDashboardSection .fovCards.browseHistory .swiper-container3 {
    padding-left: 10px;
    padding-right: 10px
}

.BrowseHistorySecSection .historySwiper.swiper .swiper-container {
    padding-left: 0;
    padding-right: 0
}

.BrowseHistorySecSection .swiper-wrapper {
    height: 100% !important
}

.BrowseHistorySecSection .customerDashboard {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.favouritePlansSection .favMainContent {
    max-width: 988px !important
}

.favouritePlansSection .fovCards {
    column-gap: 24px;
    align-items: stretch !important
}

.favouritePlansSection .fovCard {
    margin-right: 0 !important;
    display: flex;
    flex-direction: column;
    max-height: 100% !important
}

.dashboardMainSection .fovMainContent {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important
}

.customerDashboardSection .fovMainContent {
    max-width: 988px !important
}

.customerDashboardSection .fovCards {
    display: flex;
    justify-content: space-between;
    padding: 30px 20px;
    overflow: hidden
}

.customerDashboardSection .fovCards.browseHistory {
    overflow: visible !important
}

.browseHistory .historySwiper.swiper {
    width: 100% !important;
    overflow: visible
}

.historySwiper.swiper .swiper-container {
    overflow: hidden;
    padding: 30px 20px
}

.customerDashboardSection .fovCards.browseHistory .swiper-button-next,
.customerDashboardSection .fovCards.browseHistory .swiper-button-prev {
    border: 1px solid rgba(0, 0, 0, .15);
    display: flex
}

.customerDashboardSection .fovCards.browseHistory .outer-swiper-button-next {
    right: -35px
}

.customerDashboardSection .fovCards.browseHistory .outer-swiper-button-prev {
    left: -35px
}

.customerDashboardSection .fovCards .fovCard {
    box-shadow: 0 8px 15px 0 rgba(5, 20, 42, .07)
}

.customerDashboardSection .fovCards .swiper-slide:nth-child(1) .fovCard {
    margin-right: auto
}

.customerDashboardSection .fovCards .swiper-slide:nth-child(2) .fovCard {
    margin: 0 auto
}

.customerDashboardSection .fovCards .swiper-slide:nth-child(3) .fovCard {
    margin-left: auto
}

.customerDashboardSection .savedCards {
    overflow: hidden;
    padding: 30px 0
}

.dashboardMainSection .savedSearchesSection .savedSearches {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important
}

.customerDashboardSection .swiper-container2 {
    width: 100%;
    position: relative
}

.customerDashboardSection .swiper-container2 .outer-swiper-button-next2,
.customerDashboardSection .swiper-container2 .outer-swiper-button-prev2 {
    display: none !important
}

.customerDashboardSection .outer-swiper-button-next2,
.customerDashboardSection .outer-swiper-button-prev2 {
    width: 24px !important;
    height: 24px !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    border-radius: 50% !important;
    opacity: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    background: #19437a !important
}

.customerDashboardSection .outer-swiper-button-next2::after,
.customerDashboardSection .outer-swiper-button-prev2::after {
    content: "";
    display: none
}

.customerDashboardSection .swiper-container3 {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px
}

.customerDashboardSection .outer-swiper-button-next3,
.customerDashboardSection .outer-swiper-button-prev3 {
    display: none !important
}

.customerDashboardSection .outer-swiper-button-next3,
.customerDashboardSection .outer-swiper-button-prev3 {
    width: 24px !important;
    height: 24px !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    border-radius: 50% !important;
    opacity: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    background: #19437a !important
}

.customerDashboardSection .outer-swiper-button-next3::after,
.customerDashboardSection .outer-swiper-button-prev3::after {
    content: "";
    display: none
}

.customerDashboardSection .swiper-container {
    width: 100%
}

.customerDashboardSection .swiper-wrapper {
    width: 100%;
    display: flex;
    justify-content: start
}

.customerDashboardSection .fovCard .swiper-slide {
    width: 100% !important
}

.cDHeaderBox {
    height: 63px;
    border-radius: 11px;
    background-color: #f6f6f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin: 0
}

.plansComesStamped .cDHeaderBox {
    max-width: 1082px;
    width: 100%;
    margin: 25px auto 0 !important
}

.plansComesStamped .companyInfoContainer .companyInfoCards {
    padding: 0 !important
}

.plansComesStamped .companyContactCards {
    padding: 0 !important
}

.plansComesStamped .companyInfoCard .cCrdIcon img {
    width: auto !important
}

.plansComesStamped .companyOfcTimings .cCrdIcon img {
    width: auto !important
}

.CompPlans,
.CompFavPlans {
    margin: 25px 0 0 !important
}

.cDHeaderBoxSm,
.CompFavPlans {
    background: #fff !important
}

.cDHeaderBox h5 {
    color: #19437a;
    font-family: var(--OpenSans-semiBold);
    font-size: 15px;
    text-transform: uppercase
}

.cDHeaderBox p {
    color: #404040;
    font-family: var(--OpenSans-semiBold);
    font-size: 16px;
    font-style: normal
}

.cDHeaderBox a {
    color: #404040;
    font-family: var(--OpenSans-semiBold);
    font-size: 14px;
    font-style: normal;
    text-decoration: underline
}

.customerDashboardSection .favCardsHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px
}

.customerDashboardSection .favCardsHead.favCardsHead2 {
    margin-top: 0
}

.customerDashboardSection .favCardsHead h5 {
    color: #19437a;
    font-family: var(--OpenSans-semiBold);
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase
}

.customerDashboardSection .favCardsHead a {
    color: #404040;
    font-family: var(--OpenSans-semiBold);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-decoration: underline
}

.customerDashboardSection .favCardsHead a:hover {
    color: #19437a
}

.customerDashboardSection .swiper-wrapper {
    height: fit-content
}

.customerDashboardSection .swiper-slide {
    width: fit-content
}

.customerDashboardSection .swiper-container {
    position: relative
}

.customerDashboardSection .outer-swiper-button-next,
.customerDashboardSection .outer-swiper-button-prev {
    display: none
}

.customerDashboardSection .outer-swiper-button-next,
.customerDashboardSection .outer-swiper-button-prev {
    width: 24px !important;
    height: 24px !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    border-radius: 50% !important;
    opacity: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    background: #19437a !important
}

.customerDashboardSection .outer-swiper-button-next img,
.customerDashboardSection .outer-swiper-button-prev img,
.customerDashboardSection .outer-swiper-button-next2 img,
.customerDashboardSection .outer-swiper-button-prev2 img,
.customerDashboardSection .outer-swiper-button-next3 img,
.customerDashboardSection .outer-swiper-button-prev3 img {
    width: 6px !important
}

.customerDashboardSection .outer-swiper-button-prev img,
.customerDashboardSection .outer-swiper-button-prev2 img,
.customerDashboardSection .outer-swiper-button-prev3 img {
    transform: rotate(180deg)
}

.customerDashboardSection .outer-swiper-button-next::after,
.customerDashboardSection .outer-swiper-button-prev::after {
    content: unset !important
}

.companyInfoContainer {
    background-color: #19437a;
    border-radius: 15px;
    width: 100%;
    margin: 10px auto;
    padding: 10px
}

.companyInfoContainer .companyInfoCards {
    display: flex;
    justify-content: space-between;
    align-items: stretch
}

.FavPlans {
    padding: 0 0 10px !important
}

.companyInfoCards .companyInfoCard {
    width: 100%;
    background-color: #fafafc;
    border-radius: 15px;
    padding: 30px;
    margin: 10px
}

.companyInfoCard .cCrdIcon {
    width: 65px;
    height: 65px;
    background-color: #e3e7ef;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 36px
}

.companyInfoCard .cCrdCnt {
    text-align: center
}

.companyInfoCard .cCrdCnt h4,
.companyOfcTimings .compCntHeader h4 {
    color: #010101;
    font-family: var(--asap);
    font-size: 17px;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase
}

.companyInfoCard .cCrdCnt p,
.companyInfoCard .cCrdCnt address {
    max-width: 240px;
    width: 100%;
    margin: 16px auto 0;
    color: #404040;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 500;
    font-style: normal;
    word-wrap: break-word
}

.companyInfoCard .cCrdCnt address {
    font-size: 14px
}

.companyContactCards {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: 10px
}

.companyContactCards .companyContactCard {
    border-radius: 15px
}

.companyContactCards .companyOfcTimings {
    width: 100%;
    max-height: 243px;
    height: 100%;
    background-color: #fafafc;
    padding: 36px
}

.companyOfcTimings .compCntHeader {
    display: flex;
    align-items: center;
    margin-bottom: 24px
}

.companyOfcTimings .cCrdIcon {
    width: 65px;
    height: 65px;
    background-color: #e3e7ef;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 16px 0 0
}

.companyOfcTimings .compCntTiming {
    display: flex
}

.companyOfcTimings .compCntTiming ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 50%
}

.compCntTiming ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.compCntTiming ul li span {
    display: inline-block;
    width: fit-content;
    color: #404040;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 500;
    font-style: normal
}

.compCntTiming .compTimeDash {
    width: 95% !important;
    margin: 0 10px;
    flex: 1;
    height: 1px;
    background: #e1e1e3
}

.compCntTiming .compHrs {
    font-family: var(--OpenSans-semiBold);
    font-weight: 600
}

.companyOfcTimings .compCntTiming ul:nth-child(1) {
    padding-right: 30px;
    border-right: 1px solid #e1e1e3
}

.companyOfcTimings .compCntTiming ul:nth-child(2) {
    padding-left: 30px
}

.companyContactCards .companyLiveChat {
    width: 31%;
    background-color: #19437a;
    padding: 32px
}

.companyLiveChat .cCrdIcon {
    width: 65px;
    height: 65px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 18px
}

.companyLiveChat p {
    color: #fff;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin-bottom: 28px
}

.cCrdCnt button {
    display: block;
    width: 125px;
    height: 53px;
    margin: 10px auto;
    background-color: #fff;
    border: none;
    border-radius: 11px;
    color: #19437a;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    font-style: normal
}

.cCrdCnt button:hover {
    box-shadow: 0 0 12px rgb(255 255 255/100%) !important;
    background-color: #19437a;
    color: #fff
}

.privacyPolicySection {
    background: #fff
}

.privacyPolicySection .privacyPolicy {
    padding: 25px 35px 40px;
    max-width: 1012px !important;
    margin: 0 auto
}

.privacyPolicySection .privacyPolicy .privacyPolicyHead {
    margin-bottom: 38px
}

.privacyPolicySection .privacyPolicy .privacyPolicyHead h2 {
    font-family: var(--din_2014) !important;
    font-size: 55px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #000;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 30px
}

.privacyPolicySection .privacyPolicy h4 {
    font-size: 1.4rem;
    font-family: var(--opensans);
    letter-spacing: .5px;
    font-weight: 500;
    text-shadow: 1px 1px 1px #fff;
    color: #19437a;
    line-height: 1.3;
    text-transform: capitalize;
    margin-top: 30px;
    margin-bottom: 10px
}

.privacyPolicySection .privacyPolicy p {
    color: #1f2325;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 25px
}

.privacyPolicySection .privacyPolicy p a {
    color: #4a6491;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 25px;
    word-wrap: break-word
}

.customerDashboardSection .accountDashboard {
    padding: 20px 0
}

.accountDashboard .cDHeaderBoxTop {
    margin-bottom: 30px
}

.accountDashboard .cDHeaderBoxTop a {
    width: 20%;
    text-align: end
}

.accountDashboard .cDHeaderBoxTop .cDHeaderContent {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.accountDashboard .companyContactCards {
    margin-top: 20px !important
}

.cDHeaderBoxWhite {
    background: #fff
}

.proCustomerDashboard .cDHeaderBox {
    justify-content: flex-start;
    flex-wrap: nowrap !important
}

.proCustomerDashboard .cDHeaderBox h5 {
    width: 188px;
    margin-right: 20px
}

.proCustomerDashboard .cDHeaderBox h5.contact-label {
    font-size: 24px;
    width: 100%;
    margin: 20px 0 0;
    font-weight: 700;
    text-transform: none
}

.proCustomerDashboard .cDHeaderBox .cDHeaderContent {
    width: 100%;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

.proCustomerDashboard .cDHeaderBox p {
    margin-right: 10px
}

.codesSection {
    padding-top: 0
}

.codesSection .headingFirstPara {
    margin: 30px 0
}

.codesSection .uniquePlansContent {
    max-width: 100%
}

.termsContainer a {
    color: #19437a
}

.termsContainer {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 0
}

.termsContainer .terms {
    padding: 20px 0 40px
}

.termsContainer .terms h3 {
    font-family: var(--opensans);
    font-size: 18px;
    font-weight: 600px;
    color: #19437a;
    margin: 0 0 15px
}

.termsContainer .terms p {
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    line-height: 26px;
    color: #404040
}

.codesSection .moreOptions {
    max-width: 1018px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px;
    font-family: var(--din_2014)
}

.codesSection .firstPara a,
.codesSection .secondPara a {
    color: #19437a;
    text-decoration: underline
}

.commonCodeRequirements {
    background: #f5f5f5;
    padding: 50px 35px;
    position: relative
}

.commonCodeRequirementsContainer {
    max-width: 948px;
    width: 100%;
    margin: 0 auto
}

.commonCodeRequirementsHeading h2 {
    color: #000;
    font-family: var(--din_2014) !important;
    font-size: 48px;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    text-transform: none
}

.commonCodeRequirementsHeading p {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 29px;
    text-align: center;
    margin: 32px 0
}

.commonCodeRequirementsHeading h6 {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    text-align: center
}

.commonCodeReqContent {
    padding: 0
}

.commonCodeReqContent .CodeReqContent {
    padding: 30px 20px 0;
    display: flex;
    align-items: flex-start
}

.CodeReqContent .codeReqImg {
    width: 100px;
    margin-right: 40px
}

.CodeReqContent .codeReqImg img {
    width: 100%
}

.CodeReqContent .codeReqText {
    width: 100%;
    flex: 1
}

.commonCodeReqContent .CodeReqContent h3 {
    font-family: var(--opensans);
    font-size: 32px;
    font-weight: 600px;
    color: #000;
    margin: 0 0 15px;
    text-transform: uppercase
}

.commonCodeReqContent .CodeReqContent p {
    font-family: var(--opensans);
    font-size: 18px;
    margin: 0;
    line-height: 28px;
    color: #404040;
    border-bottom: #dcdcdc 2px solid;
    padding-bottom: 30px
}

.commonCodeReqContent .reviewNote {
    font-family: var(--opensans);
    font-size: 15px;
    margin: 0;
    line-height: 26px;
    color: #404040;
    margin-top: 50px
}

.LogoBlue.checkPlanDetailPage,
.LogoBlue.framingLayoutsSection {
    display: flex;
    align-items: center;
    height: 300px
}

.codesNoteBox h4 {
    font-size: 24px !important;
    line-height: 30px !important
}

.selectingPakage a {
    color: #19437a;
    text-decoration: underline
}

.selectingOptionsSection {
    position: relative
}

.selectingOptionsSection .selectingOptionsContainer {
    background: #fff;
    padding: 60px 0 0
}

.selectingOptionsContainer .AdditionalPckg {
    background-color: #f5f5f5 !important;
    padding-top: 35px !important
}

.selectingPakage {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px
}

.selectingPakage .selectingHeading h2,
.selectingPakage .selectingHeading h1 {
    color: #000;
    font-family: var(--din_2014) !important;
    font-size: 48px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 30px;
    text-transform: none;
    text-align: center
}

.selectingPakage .selectingHeading h1 {
    font-size: 42px
}

.selectingPakage .selectingHeading p {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 20px;
    line-height: 28px;
    text-align: center
}

.selectingPakage .selectingCards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch
}

.selectingPakage .selectingCard {
    width: 48%;
    margin-bottom: 20px;
    border-bottom: #dcdcdc 2px solid
}

.selectingPakage .selectingCard.selectingCardFull {
    width: 96% !important;
    border-bottom: none !important
}

.selectingCardsTop .selectingCard {
    display: flex;
    align-items: center;
    padding: 30px 40px;
    box-shadow: unset;
    width: 100%;
    border-bottom: 2px solid #e5e5e5;
    margin-bottom: 0 !important
}

.selectingCardsTop .selectingCard:last-child {
    border-bottom: 0 !important
}

.selectingPakage .selectingCardContent {
    padding: 20px 0;
    flex: 1
}

.selectingPakage .selectingCard .selectingCardHeading {
    display: flex;
    align-items: center
}

.selectingPakage .selectingCard .selectingCrdImg {
    width: 100px;
    margin: 0 80px 0 -15px;
    position: relative
}

.selectingCard .selectingCrdImg img {
    width: 100%;
    height: 100%
}

.selectingCrdImg .iconNum {
    font-family: var(--opensans);
    font-size: 24px;
    font-weight: 600;
    color: #19437a;
    position: absolute;
    top: 32px;
    left: 45px
}

.selectingPakage .selectingCard h3 {
    font-family: var(--opensans);
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin: 0 0 20px;
    text-transform: uppercase
}

h3.PlanOptions {
    height: 83px
}

.selectingPakage .selectingCard p {
    font-family: var(--opensans);
    font-size: 16px;
    margin: 0;
    line-height: 26px;
    color: #404040
}

.selectingOptionsSection .plansImageBox {
    display: flex;
    padding-bottom: 60px
}

.selectingOptionsSection .plansImageBox img {
    width: 100%;
    max-height: 933px
}

.codesNoteBox h4 {
    font-size: 28px !important;
    line-height: 30px !important
}

.BlueBox2 h4 {
    text-align: center
}

.BlueBox2 p {
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    padding: 0 25px
}

.selectingOptionsSection .commonCodeRequirements {
    background: #f5f5f5;
    padding: 60px 35px 0;
    position: relative
}

.orderConfirmationSection {
    padding-top: 0
}

.orderConfirmationContainer {
    max-width: 988px;
    width: 100%;
    padding: 40px 20px 100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.orderConfirmationContent {
    max-width: 448px;
    width: 100%
}

.orderConfirmHeading-lg {
    margin-bottom: 44px
}

.orderConfirmHeading-sm {
    display: none
}

.orderConfirmHeading-lg h2 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 44px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: normal;
    margin: 0 0 20px
}

.orderConfirmHeading-lg p {
    color: #182026;
    font-family: var(--OpenSans-semiBold);
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: 26px
}

.orderConfirmDetails {
    display: flex;
    align-items: flex-start;
    position: relative
}

.orderConfirmDetails::before {
    content: "";
    width: 1px;
    height: 100%;
    border-left: 3px dotted #cacaca;
    color: #cacaca;
    position: absolute;
    left: 12px
}

.orderConfirmDetails .orderConfirmNum {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #19437a;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1
}

.orderConfirmNum span {
    color: #fff;
    font-family: var(--opensans);
    font-size: 13px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal
}

.orderConfirmInnerDetails {
    padding-left: 14px
}

.orderConfirmInnerDetails h3 {
    color: #19437a;
    font-family: var(--asap);
    font-size: 19px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    line-height: 26px
}

.orderConfirmInnerDetails h4 {
    color: #19437a;
    font-family: var(--asap);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px
}

.orderConfirmInnerDetails h5 {
    color: #000;
    font-family: var(--asap);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 5px
}

.orderConfirmInnerDetails p {
    color: #636363;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 30px
}

.orderConfirmInnerDetails .orderConfContact {
    margin-top: 44px
}

.orderConfirmInnerDetails .orderConfirmBox {
    margin-top: 38px
}

.orderConfirmSummary {
    max-width: 376px;
    width: 100%
}

.orderConfirmSummary .orderSummaryBox {
    width: 100%;
    background-color: #fafafc;
    border-radius: 15px;
    padding: 30px
}

.orderSummaryBox h3 {
    color: #000;
    font-family: var(--asap);
    font-size: 21px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    margin: 0 0 10px 14px
}

.orderSummaryBox .orderVisual {
    box-shadow: 0 8px 43px rgba(5, 20, 42, .07);
    background-color: #fff;
    border-radius: 11px;
    padding: 14px 15px
}

.orderSummaryBox .orderVisual {
    display: flex;
    align-items: flex-start
}

.orderVisual .orderVisualImg {
    margin-right: 20px
}

.orderVisual .orderVisualImg img {
    width: 126px;
    height: 89px;
    border-radius: 15px
}

.orderSummaryBox .promoCode {
    display: none;
    margin-top: 10px
}

.orderSummaryBox .promoCode a {
    color: #19437a;
    font-family: var(--OpenSans-semiBold);
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none
}

.orderSummaryBox .promoCode a img {
    width: 12px;
    height: 7px
}

.orderSummaryBox .promoCode .applyPromo input {
    background: #fff;
    box-shadow: 0 8px 43px rgba(5, 20, 42, .07)
}

.orderVisual .visualDetailBox:first-child {
    margin-bottom: 12px
}

.orderVisual .orderVisualImg h5 {
    color: #1e4279;
    font-family: var(--asap);
    font-size: 15px;
    font-weight: 700;
    margin-top: 4px;
    margin-left: 3px
}

.orderVisual .orderVisualDetail h5 {
    color: #1e4279;
    font-family: var(--asap);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px
}

.orderVisual .orderVisualDetail p {
    color: #404040;
    font-family: var(--opensans);
    font-size: 13px;
    font-weight: 400
}

.orderSummaryBox .orderTotalPrice {
    padding: 34px 0 14px
}

.orderTotalPrice ul {
    border-top: 1px solid #e1e1e3;
    border-bottom: 1px solid #e1e1e3;
    list-style: none;
    padding: 30px 0 25px;
    margin: 0
}

.orderTotalPrice ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #404040;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500
}

.orderTotalPrice ul li:first-child {
    margin-bottom: 24px
}

.orderTotalPrice .addTotalPrice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px
}

.orderTotalPrice .addTotalPrice b {
    color: #000;
    font-family: var(--opensans);
    font-size: 19px;
    font-weight: 700;
    font-style: normal
}

.easyStepsSection {
    background: #fafafc
}

.easyStepsContainer {
    max-width: 1244px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 35px 100px
}

.easyStepHeader h2 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 47px;
    font-weight: 400;
    margin-bottom: 50px;
    text-transform: none
}

.processMainContainer {
    position: relative;
    padding-bottom: 130px
}

.processMainContainer::before {
    content: "";
    width: 2px;
    height: 100%;
    background-color: #000;
    opacity: .1;
    position: absolute;
    left: 80px
}

.processContainer {
    display: flex;
    margin-top: 30px
}

.processContainer:nth-child(1) {
    margin-top: 0 !important
}

.processContainer:nth-child(3) p {
    margin-bottom: 12pxpx
}

.processContainer .processNum {
    width: 46px;
    height: 46px;
    background-color: #19437a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 34px
}

.processContainer .processNum span {
    color: #fff;
    font-family: var(--opensans);
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    line-height: 58.33px;
    text-align: center
}

.processContainer .processDetails {
    flex: 1;
    padding: 0 0 0 55px;
    width: 90%
}

.processContainer .processHeader {
    display: flex;
    align-items: flex-start
}

.processContainer .processHeading {
    flex: 1
}

.processContainer .processHeading h3 {
    color: #000;
    font-family: var(--asap);
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    margin-bottom: 15px
}

.processContainer .processHeading p {
    color: #404040;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal
}

.processContainer .processHeader .processIcon {
    width: 82px;
    height: 82px;
    margin-left: 84px
}

.processContainer .processHeader img {
    width: 100%;
    height: 100%;
    filter: invert(20%) sepia(67%) saturate(1041%) hue-rotate(185deg) brightness(99%) contrast(95%) !important
}

.editProcessForm {
    max-width: 948px;
    width: 100%;
    padding: 38px 40px;
    background: #19437a;
    border-radius: 30px;
    margin-top: 48px
}

.editProcessForm .processDetailCard {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 30px
}

.processDetailCard .proDetailImg {
    width: 268px;
    border-radius: 11px;
    padding: 1px;
    margin-right: 25px;
    position: relative;
    overflow: hidden
}

.processDetailCard .proDetailImg img {
    width: 100%;
    height: 100%;
    border-radius: 11px;
    object-fit: cover
}

.proDetailImg .planNo {
    position: absolute;
    left: 0;
    bottom: 1px;
    background: #19437a;
    padding: 8px 26px 8px 18px;
    -webkit-clip-path: polygon(100% 0%, 92% 51%, 100% 100%, 0 100%, 0 47%, 0 0);
    clip-path: polygon(100% 0%, 92% 51%, 100% 100%, 0 100%, 0 47%, 0 0);
    z-index: 1111
}

.proDetailImg .planNo span {
    color: #fff;
    font-family: var(--asap);
    font-size: 16px;
    font-weight: 500;
    font-style: normal
}

.proDetailsContent {
    margin-left: -25px
}

.proDetailsContent h5 {
    color: #000;
    font-family: var(--asap);
    font-size: 27px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    margin-left: 25px
}

.proDetailsContent .proDetailsInnerContent {
    display: flex;
    flex-wrap: wrap
}

.proDetailsInnerContent .proInnerContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
    border-right: 1px solid #e5e5e5;
    margin-top: 24px;
    justify-content: space-between
}

.proDetailsInnerContent .proInnerContent:nth-child(6) {
    border-right: none
}

.proDetailsContent .proInnerContent img {
    filter: invert(20%) sepia(67%) saturate(1041%) hue-rotate(185deg) brightness(99%) contrast(95%) !important;
    margin-bottom: 6px;
    width: 42px;
    height: 42px
}

.proDetailsContent .proInnerContent p {
    font-family: var(--opensans);
    color: #000;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal
}

.editProcessForm form {
    padding: 24px 0 0
}

.editProcessForm .editProFormHeading {
    margin-bottom: 24px
}

.editProFormHeading h3 {
    color: #fff;
    font-family: var(--din_2014);
    font-size: 40px;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin-bottom: 10px
}

img.left-quote {
    height: 16px;
    width: 16px;
    fill: #000
}

img.right-quote {
    height: 16px;
    width: 16px;
    transform: rotate(180deg)
}

img.left-quote,
img.right-quote {
    filter: brightness(0%) contrast(100%);
    position: relative;
    top: -15px;
    height: 16px;
    width: 16px
}

img.right-quote {
    transform: rotate(180deg)
}

.editProFormHeading p {
    color: #fff;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    text-align: center
}

.editProFormHeading p a {
    color: #fff;
    text-decoration: none
}

.editProcessForm .proFormRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

.editProcessForm .proFormCol-half {
    width: 48%;
    margin-top: 24px
}

.editProcessForm .proFormCol-full {
    width: 100%;
    margin-top: 24px
}

.editProcessForm .proFormCol-quar {
    width: 32%;
    margin-top: 24px
}

.editProcessForm .italicInfo {
    margin-top: 20px
}

.editProcessForm .proFormCol-quar input {
    height: auto !important;
    padding: 15px !important
}

.editProcessForm .proFormRow label {
    display: inline-block;
    color: #fff;
    font-family: var(--OpenSans-semiBold);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 8px
}

.editProcessForm .proFormRow input {
    width: 100%;
    height: 53px;
    border-radius: 11px;
    border: 1px solid rgba(0, 0, 0, .1);
    background-color: #fff;
    padding: 10px 24px;
    outline: none;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 400
}

.editProcessForm .proFormRow input::placeholder {
    color: #636363;
    font-family: var(--opensans);
    font-size: 13px !important;
    font-weight: 400
}

.editProcessForm .proFormRow select {
    width: 100%;
    height: 53px;
    border-radius: 11px;
    border: 1px solid rgba(0, 0, 0, .1);
    background-color: #fff;
    padding: 10px 24px;
    outline: none;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 400;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none
}

.proFormRow .proFormSelect {
    position: relative
}

.proFormRow .proFormSelect::after {
    content: "";
    width: 12px;
    height: 8px;
    background: url(../img/cta-select-arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 24px;
    right: 24px;
    pointer-events: none;
    transition: transform .1s
}

.proFormRow .proFormSelect.rotate-carat::after {
    transform: rotate(180deg)
}

.proFormRow select::-ms-expand {
    display: none
}

.editProcessForm .proFormRow span {
    display: inline-block;
    color: #fff;
    font-family: var(--opensans);
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    margin-top: 4px
}

.editProcessForm .proFormRow textarea {
    width: 100%;
    height: 192px;
    border-radius: 11px;
    border: 1px solid rgba(0, 0, 0, .1);
    background-color: #fff;
    padding: 24px;
    outline: none;
    resize: none
}

.proFormCol-quar .customFileInput {
    display: none
}

.proFormCol-quar label {
    width: 100%;
    position: relative;
    cursor: pointer
}

.proFormCol-quar label::before {
    display: flex;
    justify-content: center;
    align-items: center;
    content: "Browse...";
    width: 75px;
    height: 28px;
    box-shadow: 1px 2px 7px rgba(0, 0, 0, .06);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, .4);
    background-color: #fafafc;
    position: absolute;
    top: 38px;
    left: 10px;
    color: #424242;
    font-family: var(--opensans);
    font-size: 11px;
    font-weight: 400;
    font-style: normal
}

.proFormCol-quar label::after {
    margin-top: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    content: attr(data-file-name);
    max-width: 250px;
    height: 53px;
    border-radius: 11px;
    border: 1px solid rgba(0, 0, 0, .1);
    background-color: #fff;
    padding-left: 24px;
    color: #636363;
    font-family: var(--opensans);
    font-size: 13px;
    font-weight: 400;
    font-style: normal
}

.editProcessForm .requestQuote {
    display: block;
    width: 205px;
    height: 53px;
    margin: 35px auto 0;
    background-color: #fff;
    border: none;
    border-radius: 11px;
    color: #19437a;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    transition: .2s
}

.editProcessForm .requestQuote:hover,
.checkoutDetails .cartCheckoutBtn:hover {
    background: #fff;
    color: #19437a;
    cursor: pointer;
    box-shadow: 0 0 8px rgb(10 61 122/80%) !important
}

.checkoutDetails .cartCheckoutBtn.disabled:hover {
    background: #ccc;
    color: #999;
    box-shadow: none !important;
    cursor: default
}

.productGallery .productGalleryTabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    row-gap: 10px
}

.productGalleryTabs a {
    width: fit-content;
    height: 25px !important;
    border-radius: 4px !important;
    border: 1px solid #636363 !important;
    background-color: #fff;
    margin-right: 18px;
    padding: 0 8px !important;
    color: #636363;
    font-family: var(--opensans);
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    cursor: pointer;
    transition: .2s;
    line-height: 23px;
    text-decoration: none
}

.productGalleryTabs a.active {
    border: 1px solid #d41e39;
    color: #d41e39
}

.productGalleryTabs a:hover {
    background: #fff;
    border: 1px solid #d41e39;
    color: #d41e39;
    box-shadow: 0 0 8px rgb(96 96 96/80%) !important
}

.productGalleryTabs button {
    width: fit-content;
    height: 25px;
    border-radius: 4px;
    border: 1px solid #636363;
    background-color: #fff;
    margin-right: 18px;
    padding: 0 8px;
    color: #636363;
    font-family: var(--opensans);
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    cursor: pointer;
    transition: .2s
}

.productGalleryTabs button.active {
    border: 1px solid #d41e39;
    color: #d41e39
}

.productGalleryTabs button:hover {
    background: #fff;
    border: 1px solid #d41e39;
    color: #d41e39
}

.productGalleryImages {
    display: flex;
    justify-content: space-between;
    padding: 24px 0
}

.productGalleryImages .swiper-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.productGalleryImages .proGalleryImg {
    width: 157px;
    height: 104px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, .5);
    background-color: #fff;
    opacity: .9;
    overflow: hidden;
    cursor: pointer;
    position: relative
}

.productGalleryImages .proGalleryImg img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.productGalleryImages .proGalleryImg.active {
    border: 2px solid #19437a;
    opacity: 1
}

.productGalleryImages .swiper-slide:last-child .proGalleryImg span {
    width: fit-content;
    height: fit-content;
    color: #fff;
    font-family: var(--din_2014);
    font-size: 42px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

.productGalleryImages .swiper-slide:last-child .proGalleryImg::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 11px;
    border: 1px solid rgba(0, 0, 0, .5);
    background-color: #08244a;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .5
}

.productGalleryImages .swiper {
    width: 100%;
    height: 100%;
    position: relative
}

.productGalleryImages .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center
}

.productGalleryImages .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.productGalleryImages .swiper-button-next,
.productGalleryImages .swiper-button-prev {
    display: none;
    position: absolute;
    top: 30%;
    width: 19px;
    height: 30px
}

.productGalleryImages .swiper-button-prev {
    left: -25px;
    transform: rotate(180deg)
}

.productGalleryImages .swiper-button-next {
    right: -25px
}

.productGalleryImages .swiper-button-prev.swiper-button-disabled {
    opacity: .6
}

.productGalleryView {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    border-radius: 22px
}

.productGalleryView img {
    width: 100%;
    height: 100%
}

.productGalleryView .planNo {
    position: absolute;
    left: 0;
    top: 0;
    background: #19437a;
    padding: 10px 30px 10px 22px;
    -webkit-clip-path: polygon(100% 0%, 92% 51%, 100% 100%, 0 100%, 0 47%, 0 0);
    clip-path: polygon(100% 0%, 92% 51%, 100% 100%, 0 100%, 0 47%, 0 0);
    z-index: 1111
}

.productGalleryView .planNo span {
    color: #fff;
    font-family: var(--asap);
    font-size: 20px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal
}

.processMainContainer .optionalContainer {
    max-width: 948px;
    width: 100%;
    padding: 30px 40px 35px 30px;
    box-shadow: -5px 7px 29px rgba(0, 0, 0, .04);
    border-radius: 15px;
    background-color: #fff;
    margin: 36px 0 26px;
    position: relative;
    overflow: hidden
}

.processMainContainer .optionalContainer::before {
    content: "";
    width: 4px;
    height: 90%;
    background: #1a447b;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0
}

.processMainContainer .optionalContainer p {
    color: #404040;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 25px
}

.optionalContainer p b {
    color: #000
}

.optionalContainer p a {
    font-family: var(--opensans);
    font-weight: 500;
    color: #1a447b;
    text-decoration: none
}

.optionalContainer p a b {
    color: #1a447b
}

.processMainContainer .processInfo {
    max-width: 878px;
    width: 100%
}

.processMainContainer .processInfo p {
    color: #404040;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 25px;
    margin-bottom: 20px
}

.processMainContainer .processInfo a {
    font-family: var(--opensans);
    color: #1a447b;
    text-decoration: none
}

a.showExample {
    width: fit-content;
    color: #19437a;
    font-family: var(--asap);
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding-bottom: 2px;
    padding-top: 12px;
    text-decoration: none
}

a.showExample:hover {
    text-decoration: underline !important
}

.processCout .steps-head .card-plan .descriptionHead a:hover {
    text-decoration: none;
    color: #4a6491
}

.processHeading .showExample img {
    width: 15px !important;
    height: 15px !important;
    margin-left: 5px !important;
    filter: unset !important
}

.moreQuestionsSection {
    padding: 0 35px
}

.moreQuestionsSection .moreQuestionsContainer {
    max-width: 1174px;
    width: 100%;
    margin: 0 auto;
    padding: 44px;
    background-color: #19437a;
    border-radius: 15px;
    display: flex;
    align-items: center;
    position: relative;
    top: -100px
}

.moreQuestionsContainer .moreOptionsIcon {
    width: 74px;
    height: 74px;
    margin-right: 36px
}

.moreQuestionsContainer .moreOptionsIcon img {
    width: 100%;
    height: 100%;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg)
}

.moreQuestionsContainer .moreOptionsContent {
    padding: 0 40px 0 36px;
    border-left: 2px solid #2d5384;
    flex: 1
}

.moreOptionsContent h2 {
    color: #fff;
    font-family: var(--din_2014);
    font-size: 48px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: normal;
    margin-bottom: 16px;
    text-transform: none
}

.moreOptionsContent p {
    color: #fff;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal
}

a.modification-link {
    color: #dce2ea;
    text-decoration: none
}

a.modification-link:hover {
    color: #666;
    text-decoration: underline
}

.productGalleryHead {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.reverseImgBtn {
    height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    background-color: #606060;
    border: none;
    color: #fff;
    font-family: open sans;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    white-space: nowrap
}

a.reverseImgBtn:hover {
    color: #606060;
    box-shadow: 0 0 8px rgb(96 96 96/80%) !important;
    background-color: #fff
}

.reverseImgBtn-inner {
    display: none
}

.reverseImgBtn img {
    margin-right: 8px
}

.reverseImgBtn:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg)
}

.mainSliderContainer .planNo {
    position: absolute;
    left: 0;
    top: 0;
    background: #19437a;
    padding: 10px 30px 10px 22px;
    -webkit-clip-path: polygon(100% 0%, 92% 51%, 100% 100%, 0 100%, 0 47%, 0 0);
    clip-path: polygon(100% 0%, 92% 51%, 100% 100%, 0 100%, 0 47%, 0 0);
    z-index: 1111
}

.mainSliderContainer .planNo span {
    color: #fff;
    font-family: var(--asap);
    font-size: 20px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal
}

.perfectGarageSection {
    padding: 60px 0
}

.perfectGarageMain {
    max-width: 1200px !important;
    margin: 0 auto;
    padding: 0 35px
}

.perfectGarageMain .perfectGarageHead {
    text-align: center;
    max-width: 946px;
    width: 100%;
    margin: 0 auto
}

.perfectGarageMain .perfectGarageHead h2 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 40px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    margin-bottom: 20px;
    text-transform: none
}

.perfectGarageMain .perfectGarageHead p {
    color: #404040;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 30px;
    font-family: var(--opensans)
}

.perfectGarageMain .perfectGarageHead p span {
    display: none
}

.perfectGarageMain .perfectGaragePlans {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 60px
}

.perfectGarageMain .perfectGaragePlansPart1 {
    flex: 1;
    display: flex;
    justify-content: space-between
}

.perfectGarageMain .perfectGaragePlansPart1 div {
    width: 49%
}

.perfectGarageMain .perfectGaragePlansPart1 div img {
    width: 100%
}

.perfectGarageMain .perfectGaragePlansPart1 div:nth-child(2) {
    padding-top: 80px
}

.perfectGarageMain .perfectGaragePlansPart2 {
    width: 381px;
    margin-left: 60px
}

.perfectGarageMain .perfectGaragePlans h4 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 48px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: 59.99px;
    margin-bottom: 16px;
    text-transform: none
}

.perfectGarageMain .perfectGaragePlans h6 {
    color: #000;
    font-family: var(--asap);
    font-size: 22px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    margin-bottom: 20px;
    text-transform: uppercase
}

.perfectGarageMain .perfectGaragePlans p {
    color: #404040;
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    line-height: 29px;
    margin-bottom: 40px
}

.perfectGarageMain a button:hover,
.ourStorySec .ourStoryContent button:hover {
    background-color: #19437a;
    color: #fff;
    box-shadow: 0 0 8px rgb(10 61 122/80%)
}

.perfectGarageMain a:hover {
    text-decoration: none
}

.perfectGarageMain button {
    width: 139px;
    height: 54px;
    border-radius: 11px;
    border: 1px solid rgba(0, 0, 0, .15);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #19437a;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    text-transform: uppercase;
    cursor: pointer
}

.garagePlansSection {
    background: #f7f7f7;
    padding: 70px 0;
    width: 100%
}

.garagePlansMain {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 35px
}

.garagePlansMain h2 {
    text-align: center;
    color: #000;
    font-family: var(--din_2014);
    font-size: 48px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none
}

.garagePlansContent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 60px
}

.garagePlansContent .garagePlansCard {
    width: 23%;
    position: relative;
    overflow: hidden;
    border-radius: 22px
}

.garagePlansContent .garagePlansCard img {
    width: 100%
}

.garagePlansContent .garagePlansCard .garagePlansOverlay {
    position: absolute;
    bottom: 26px;
    left: 0;
    width: 216px;
    height: 47px;
    background-color: #19437a;
    border-radius: 0 8px 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px
}

.garagePlansContent .garagePlansCard .garagePlansOverlay h5 {
    color: #fff;
    font-family: var(--din_2014);
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: uppercase
}

.garagePlansContent .garagePlansCard .garagePlansOverlay h5 a {
    color: #fff !important
}

.garagePlansContent button {
    width: 207px;
    height: 54px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .15);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #19437a;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    text-transform: uppercase;
    cursor: pointer;
    margin: 40px auto 0
}

.benefitsGarageSection {
    padding: 30px 0 0;
    width: 100%
}

.benefitsGarageMain {
    max-width: 1200px;
    padding: 0 35px;
    margin: 0 auto
}

.benefitsGarageMain h2 {
    text-align: center;
    color: #000;
    font-family: var(--din_2014);
    font-size: 48px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none
}

.benefitsGarageContent {
    max-width: 850px;
    margin: 0 auto;
    padding-top: 50px
}

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

.benefitsGarageContent li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    line-height: 30px
}

.benefitsGarageContent li span {
    width: 17px;
    margin-right: 14px;
    transform: translateY(4px)
}

.benefitsGarageContent li span img {
    width: 100%
}

.benefitsGarageContent li p {
    flex: 1;
    color: #2b2b2b;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal
}

.benefitsGarageSection .benefitsGarageImg1 {
    width: 100%;
    margin-top: 70px;
    display: flex
}

.benefitsGarageSection .benefitsGarageImg2 {
    width: 100%;
    margin-top: 70px;
    display: none
}

.garageTestimonialsSection {
    overflow: hidden;
    padding-top: 30px
}

.garageTestimonialMain {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center
}

.garageTestimonialMain .garageTestimonialHead h2 {
    color: #000;
    font-family: var(--din_2014);
    font-size: 48px;
    font-weight: 400;
    font-style: normal;
    line-height: 60px;
    text-align: center;
    margin-bottom: 88px
}

.garageTestimonialMain .swiper {
    margin: 0 auto;
    width: 1250px !important
}

.garageTestimonialMain .mySwiper4 {
    width: 948px !important;
    overflow: hidden;
    margin: 0 auto !important
}

.garageTestimonialMain .swiper::after {
    content: "";
    width: 1px;
    height: 100%;
    background: #e4e4e4;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1111
}

.garageTestimonialMain .swiper-slide .garageTestimonialCard {
    background: #fff
}

.garageTestimonialMain .swiper-slide .garageTestimonialCard h4 {
    color: #000;
    font-family: var(--asap);
    font-size: 22px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 29px
}

.garageTestimonialMain .swiper-slide .garageTestimonialCard p {
    color: #404040;
    font-family: var(--OpenSans-semiBold);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 29px;
    margin-bottom: 30px
}

.garageTestimonialMain .swiper-slide .garageTestimonialCard .garageTestimonialCardInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%
}

.garageTestimonialMain .swiper-slide .garageTestimonialCard .garageTestimonialCardInner h6 {
    color: #0e2043;
    font-family: var(--opensans);
    font-size: 19px;
    font-weight: 700;
    font-style: normal
}

.garageTestimonialMain .swiper-slide .garageTestimonialCard .garageTestimonialCardInner span {
    font-family: var(--OpenSans-semiBold);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: 21px
}

.garageTestimonialMain .swiper-slide .garageTestimonialCard .garageTestimonialCardInner .garageTestimonialCardIconsHead {
    display: flex;
    align-items: center
}

.garageTestimonialMain .swiper-slide .garageTestimonialCard .garageTestimonialCardInner .testimonialCampanyLogo img {
    width: 28px;
    margin-right: 10px;
    cursor: pointer
}

.garageTestimonialMain .swiper-slide .garageTestimonialCard .garageTestimonialCardInner .stars img {
    width: 23px;
    margin: 0 -3px;
    cursor: pointer
}

.garageTestimonialMain .swiper-button-next,
.garageTestimonialMain .swiper-button-prev {
    width: 56px !important;
    height: 55px !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    border-radius: 50% !important;
    opacity: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #fff !important
}

.garageTestimonialMain .swiper-button-next {
    background: #19437a !important
}

.garageTestimonialMain .swiper-button-next img,
.garageTestimonialMain .swiper-button-prev img {
    width: 20% !important
}

.garageTestimonialMain .swiper-button-next::after,
.garageTestimonialMain .swiper-button-prev::after {
    content: unset !important
}

.garageTestimonialsSection .imgHead {
    width: 100%
}

.garageTestimonialsSection .imgHead img {
    width: 100%;
    object-fit: cover;
    display: flex
}

.benefitsGarageImg {
    background: url(../img/BenefitsGarage.png);
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100%;
    height: 440px;
    margin-top: 70px
}

.architecturalStylesHeadingCont p {
    color: #000;
    font-family: var(--OpenSans-semiBold);
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    text-align: center
}

.architecturalStylesContainer {
    padding: 38px 30px 20px;
    max-width: 1384px;
    width: 100%;
    margin: 0 auto
}

.architecturalStylesContainer .stylesHeadingPara {
    color: #404040;
    font-family: var(--myriadPro);
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    text-align: center
}

.architecturalStylesSection .architecturalStylesContainer p.stylesHeadingPara {
    margin-bottom: 30px
}

.architecturalStylesCards {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 0 21px;
    align-items: center
}

.architecturalStylesCards .StylesCard {
    max-width: 430px;
    width: 32%;
    box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    padding: 10px;
    margin-bottom: 40px;
    border-radius: 15px
}

.architecturalStylesCards .stylesCardImg {
    position: relative;
    border-radius: 13px;
    overflow: hidden
}

.architecturalStylesCards .stylesCardImg img {
    width: 100%
}

.StylesCard h6 {
    margin-top: 15px;
    color: #003b76;
    font-size: 18px;
    font-weight: 500
}

.StylesCard p {
    margin-top: 15px;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px
}

.StylesCard button {
    max-width: 402px;
    width: 100%;
    height: 60px;
    border: 1px solid #003b76;
    margin-top: 15px;
    color: #003b76;
    font-family: var(--OpenSans-semiBold);
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    background: #fff;
    cursor: pointer;
    transition: .3s;
    border-radius: 8px
}

.StylesCard button:hover {
    color: #fff;
    background: #003b76;
    box-shadow: 0 0 8px rgb(10 61 122/80%)
}

.numOfPlansBadge {
    display: inline-block;
    padding: 8px 10px;
    background: #000;
    color: #fff;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    top: 0;
    right: 0
}

.customerDashboard.orderDetailsMainContainer {
    padding: 20px 35px 130px !important;
    max-width: 1244px !important;
    width: 100%;
    margin: 0 auto
}

.orderDetailsContainer {
    width: 100%;
    border-radius: 15px;
    background-color: #fafafc;
    padding: 33px 40px;
    margin: 0 auto
}

.orderBillAndShipContainer {
    display: flex;
    align-items: flex-start;
    border-radius: 15px;
    border: 1px solid #e5e5e5;
    background-color: #fff
}

.orderBillAndShipContainer .orderBillandShip {
    width: 50%
}

.orderBillAndShipContainer .orderBillandShip h5 {
    color: #000;
    font-family: var(--asap);
    font-size: 21px;
    font-weight: 600;
    padding: 20px 70px;
    border-bottom: 1px solid #e5e5e5
}

.orderBillAndShipContainer .orderBilling {
    border-right: 1px solid #e5e5e5
}

.orderBillandShip ul {
    list-style: none;
    padding: 24px 70px
}

.orderBillandShip ul li {
    color: #404040;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 8px;
    text-overflow: ellipsis;
    overflow: hidden
}

.orderDetailTable {
    margin-top: 30px
}

.orderDetailTable table {
    width: 100%;
    border-collapse: collapse
}

.orderDetailTable2 .orderItemHeader {
    display: none
}

.orderDetailTable table th,
.orderDetailTable table td {
    text-align: left;
    padding: 10px 15px
}

.orderDetailTable table th {
    color: #fff;
    font-family: var(--opensans);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    background-color: #19437a;
    text-transform: uppercase
}

.orderDetailTable table td {
    color: #404040;
    font-family: var(--OpenSans-semiBold);
    font-size: 15px;
    font-weight: 400;
    font-style: normal
}

.orderDetailTable table th:first-child,
.orderDetailTable td:first-child {
    border-radius: 11px 0 0 11px
}

.orderDetailTable table th:last-child,
.orderDetailTable td:last-child {
    border-radius: 0 11px 11px 0;
    text-align: end
}

.orderDetailTable2 td:nth-last-child(2),
.orderDetailTable2 th:nth-last-child(2) {
    text-align: end
}

tr.item-sm {
    display: none
}

.totalAmountContainer {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e5e5e5;
    padding: 20px 0 0;
    margin-top: 10px
}

.totalAmountContainer ul {
    max-width: 100%;
    width: 100%;
    list-style: none;
    padding: 0 14px 0 0;
    margin: 0
}

.totalAmountContainer ul li {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-align: end;
    margin-bottom: 14px
}

.totalAmountContainer ul li span {
    width: 100%;
    color: #363636;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    font-style: normal
}

.totalAmountContainer ul li.totalAmountLi {
    margin-bottom: 0
}

.totalAmountContainer ul li.totalAmountLi span {
    width: 100%;
    color: #000;
    font-family: var(--opensans-bold);
    font-size: 15px;
    font-weight: 900;
    font-style: normal
}

.totalAmountContainer ul li span:nth-child(1) {
    flex: 1
}

.totalAmountContainer ul li span:nth-child(2) {
    width: 148px
}

.backToMyOrders {
    padding: 40px 0 0
}

.backToMyOrders button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 226px;
    height: 53px;
    border-radius: 11px;
    border: 1px solid rgba(30, 66, 121, .1);
    background-color: #fff;
    color: #1e4279;
    font-family: var(--opensans);
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    cursor: pointer;
    transition: .3s
}

.backToMyOrders button img {
    width: 10px;
    height: auto;
    margin-right: 8px
}

.backToMyOrders button:hover {
    border: 1px solid #1e4279;
    background-color: #1e4279;
    color: #fff
}

.backToMyOrders button:hover img {
    filter: brightness(0) invert(1)
}

.testimonials-elements-group {
    max-width: 1018px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px
}

.shopperapproved_widget table tr {
    display: flex;
    justify-content: space-between
}

.shopperapproved_widget table td {
    width: fit-content !important;
    padding: 0 !important
}

.sa_borderGray .sa_review {
    padding: 0 !important
}

.sa_review .sa_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.sa_review .sa_info span {
    position: unset !important;
    display: inline-block;
    order: 2
}

.sa_review .sa_name {
    display: inline-block;
    width: fit-content !important;
    order: 1;
    margin-right: 10px
}

.sa_review .sa_date {
    order: 3;
    width: 100%
}

.exampleModificationCout .list-bullet ul li:before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url(../img/check.svg);
    background-size: cover;
    margin-right: 6px;
    vertical-align: middle
}

.perfectGarageMain .perfectGaragePlansPart1.perfectGaragePlansInverse,
.perfectGarageMain .perfectGaragePlansPart1.perfectGaragePlansInverse2 {
    flex: unset;
    width: 330px
}

.perfectGarageMain .perfectGaragePlansPart2.perfectGaragePlansInverse,
.perfectGarageMain .perfectGaragePlansPart2.perfectGaragePlansInverse2 {
    flex: 1 !important
}

.perfectGaragePlans.perfectGaragePlansOuter {
    margin-top: 0 !important
}

.perfectGaragePlans.perfectGaragePlansInverse {
    align-items: start;
    margin-top: 0
}

.perfectGaragePlansNewMain .perfectGaragePlansNew {
    margin-top: 60px
}

.perfectGaragePlansNewMain .perfectGaragePlansNew:nth-child(even) {
    background: #f5f5f5;
    padding: 40px
}

.perfectGarageMain .perfectGaragePlansPart2.perfectGaragePlansInverse {
    width: 100%;
    margin-right: 60px;
    margin-left: 0 !important
}

.perfectGaragePlansInverse ul {
    margin-top: -30px !important;
    margin-bottom: 40px;
    font-size: 16px;
    font-weight: 500;
    padding-left: 20px
}

.perfectGaragePlansInverse ul li {
    list-style: disc;
    margin-bottom: 10px
}

.perfectGarageMain .perfectGaragePlansPart1.perfectGaragePlansInverse div {
    width: 100%
}

.perfectGarageMain .perfectGaragePlansPart2.perfectGaragePlansInverse2 {
    width: 100%
}

.perfectGarageMain .perfectGaragePlansPart1.perfectGaragePlansInverse2 div {
    width: 100%
}

.perfectGarageMain .perfectGaragePlans p.question {
    margin-bottom: 10px !important;
    font-size: 18px;
    font-weight: 700;
    color: #000 !important
}

.browseHousePlansSection {
    padding: 80px 0
}

.browseHousePlansSection .browseHousePlansContainer {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px
}

.browseHousePlansContainer .browseHousePlans {
    margin-top: 40px;
    display: flex;
    align-items: center
}

.browseHousePlans .browseHouseText {
    flex: 1;
    margin-right: 30px
}

.browseHousePlansContainer .browseHousePlans p {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    font-style: normal
}

.browseHousePlans p a {
    color: #19437a;
    text-decoration: none
}

.browseHousePlans .browseHouseImg {
    max-width: 330px;
    width: 100%
}

.browseHouseImg img {
    width: 100%;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, .1) 0 4px 12px
}

.houseplansIncludesSection {
    background: #f5f5f5;
    padding: 80px 0
}

.houseplansIncludesSection .houseplansIncludesContainer {
    max-width: 1018px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px
}

.houseplansSectionHeading h2 {
    color: #000;
    font-family: var(--din_2014) !important;
    font-size: 48px;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    margin-bottom: 30px;
    text-transform: none;
    line-height: 60px
}

.houseplansSectionHeading p {
    color: #404040;
    font-family: var(--opensans) !important;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    text-align: center
}

.houseplansIncludesCards {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: stretch;
    margin-top: 60px
}

.houseplansIncludesCards .houseplansIncludesCard {
    background: #fff;
    width: 31%;
    margin-bottom: 80px;
    box-shadow: rgba(0, 0, 0, .24) 0 3px 8px;
    margin-right: 33px;
    padding: 40px 20px 20px;
    border-radius: 11px;
    position: relative;
    cursor: pointer
}

.houseplansIncludesCards .houseplansIncludesCard h4 {
    font-family: var(--din_2014);
    font-size: 20px;
    margin-bottom: 10px
}

.houseplansIncludesCards .houseplansIncludesCard p {
    font-family: var(--opensans);
    font-size: 15px;
    margin: 0
}

.houseplansIncludesCards .houseplansIncludesCard::before {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #19437a;
    background-image: url(../img/tick-white.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: -20px;
    left: 20px
}

.houseplansIncludesCards .houseplansIncludesCard:nth-child(3n) {
    margin-right: 0
}

.setsOfHousePlansSection {
    padding: 80px 0
}

.setsOfHousePlansSection.inverse {
    background: #f5f5f5
}

.setsOfHousePlansSection .setsOfHousePlansContainer {
    max-width: 1018px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px
}

.setsOfHousePlansContainer .setsOfHousePlans {
    display: flex;
    margin-top: 60px
}

.setsOfHousePlans .setsOfHousePlansText {
    flex: 1;
    margin-right: 30px
}

.setsOfHousePlans .setsOfHousePlansText.inverse {
    flex: 1;
    margin-right: 0;
    margin-left: 30px
}

.setsOfHousePlans .setsOfHousePlansText p {
    font-family: var(--opensans);
    font-size: 16px;
    line-height: 32px;
    color: #000;
    margin-bottom: 30px
}

.setsOfHousePlans .setsOfHousePlansText p a {
    color: #19437a;
    text-decoration: none
}

.setsOfHousePlans .setsOfHousePlansImg {
    width: 330px
}

.setsOfHousePlansImg img {
    width: 100%;
    border-radius: 11px
}

.drawUpHouseSection {
    padding: 80px 0 60px
}

.drawUpHouseSection .drawUpHouseContainer {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px
}

.drawUpHouseContainer .drawUpHouse {
    margin-top: 60px
}

.drawUpHouse .drawUpHouseCard {
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 11px
}

.drawUpHouse .drawUpHouseCard:nth-child(odd) {
    background: #f5f5f5
}

.drawUpHouseCard .drawUpHouseCardHeading {
    display: flex;
    align-items: center
}

.drawUpHouseCardHeading img {
    width: 40px;
    height: 40px;
    margin-right: 15px
}

.drawUpHouseCard h4 {
    font-family: var(--din_2014);
    font-size: 20px;
    color: #19437a
}

.drawUpHouseCard p {
    font-family: var(--opensans);
    font-size: 16px;
    color: #404040;
    margin-top: 15px;
    margin-bottom: 0
}

.browseHousePlansSection {
    padding: 40px 0 80px;
    border-top: 1px solid #f5f5f5
}

.houseplansSectionHeading p {
    line-height: 28px
}

.houseplansIncludesCards {
    justify-content: space-between
}

.houseplansIncludesCards .houseplansIncludesCard {
    width: 48%;
    margin-right: 0 !important
}

.browseHouseText p {
    margin-top: 30px !important
}

.browseHouseText p:first-child {
    margin-top: 0 !important
}

.differentStylesSection {
    padding: 80px 0;
    background: #f5f5f5
}

.differentStylesSection .differentStylesContainer {
    max-width: 1018px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px
}

.differentStylesContainer .differentStyles {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 60px
}

.differentStyles .differentStylesCard {
    width: 48%;
    padding: 25px;
    border-top: 5px solid #19437a;
    box-shadow: rgba(0, 0, 0, .24) 0 3px 8px;
    border-radius: 11px;
    margin-bottom: 30px;
    background: #fff;
    cursor: pointer
}

.differentStylesCard h4 {
    font-family: var(--din_2014);
    font-size: 25px;
    font-style: normal;
    margin-bottom: 15px;
    color: #19437a
}

.differentStylesCard p {
    font-family: var(--opensans);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 15px;
    color: #404040
}

.differentStylesCard p a {
    font-weight: 600;
    color: #19437a;
    text-decoration: none
}

.display-hide {
    display: none !important
}

.list-style ul li:before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url(../img/check.svg);
    background-size: cover;
    margin-right: 6px;
    vertical-align: middle
}

.copyrightSection {
    padding: 60px 0
}

.copyrightSection .copyrightContainer {
    max-width: 1018px;
    width: 100%;
    margin: 0 auto;
    padding: 0 35px
}

.copyrightHeading {
    margin-bottom: 30px
}

.copyrightHeading h4 {
    font-size: 18px;
    font-family: var(--opensans);
    font-style: normal;
    line-height: 30px
}

.copyrightMainContent .headingPara {
    font-size: 16px;
    font-family: var(--opensans);
    font-style: normal;
    line-height: 30px
}

.copyrightContent {
    margin-top: 30px
}

.copyrightContent h4,
.copyrightHeading h3 {
    font-size: 1.4rem;
    font-family: var(--opensans);
    letter-spacing: .5px;
    font-weight: 500;
    text-shadow: 1px 1px 1px #fff;
    color: #19437a;
    line-height: 1.3;
    margin-bottom: 10px;
    text-transform: capitalize
}

.copyrightContent p {
    font-family: var(--opensans);
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    line-height: 26px;
    color: #404040
}

.logoutPage {
    padding: 40px 35px
}

.logoutPage h1 {
    font-size: 48px;
    font-family: var(--din_2014);
    margin-bottom: 30px;
    text-align: center
}

.logoutPage .authBox {
    max-width: 451px;
    width: 100%;
    margin: 0 auto;
    background: #f7f7f7;
    border-radius: 15px
}

.logoutPage .authBox .authContent {
    margin-top: 0 !important
}

.logoutPage .advanced-search-card {
    max-width: 944px;
    margin: 0 auto;
    box-shadow: unset;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center
}

.CompGrid {
    padding: 0 0;
    max-width: 988px !important;
    margin: 0 auto
}

.FavoritePlans .fovMainContent {
    max-width: 1244px !important;
    margin: 0 auto;
    padding: 20px 35px !important
}

.FavoritePlans .fovPaginationHead {
    padding: 20px 0 !important
}

.FavoritePlans .customerDashboardSection .fovMainContent {
    padding: 0
}

.BrowseHistorySecSection .customerDashboard {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.BrowseHistorySecSection .fovCards.browseHistory {
    padding-top: 30px !important;
    padding-bottom: 30px !important
}

.CompGrid {
    padding: 0 50px 20px;
    max-width: 1088px !important;
    margin: 0 auto
}

.CompGrid .CompFavPlans {
    margin: 0 !important
}

.planNo a:hover {
    text-decoration: underline;
    color: #f3f3f3 !important
}

p.alert-success {
    color: green !important
}

.ajax_response {
    width: 150px;
    margin: 0 auto 10px;
    border: 0;
    display: inline-block;
    color: green;
    padding: 8px;
    display: none
}

.ajax_response.error_message {
    background: #f3a6a6
}

.ajax_response.success_message {
    background: #ccf5cc
}

p.ourstory-more {
    display: none
}

@media screen and (min-width:993px) and (max-width:1350px) {
    .favouritePlansSection .fovCards {
        justify-content: start
    }
}

@media screen and (min-width:993px) and (max-width:1279px) {
    .favouritePlansSection .fovCards {
        justify-content: center
    }

    .favouritePlansSection .fovCard {
        width: 280px
    }
}

@media screen and (max-width:1200px) and (min-width:993px) {
    .BrowseHistorySecSection .customerDashboard {
        padding-left: 15px !important;
        padding-right: 15px !important
    }

    .FavoritePlans .customerDashboardSection .fovMainContent {
        padding: 0 30px
    }

    .architecturalStylesCards .StylesCard {
        max-width: 100%;
        width: 48.5%
    }

    .StylesCard button {
        max-width: 100%
    }
}

@media screen and (min-width:1400px) and (max-width:1699px) {
    .viewVideos .videoBox iframe {
        height: 18vw
    }
}

@media screen and (min-width:1700px) and (max-width:1920px) {
    .viewVideos .videoBox iframe {
        height: 15vw
    }
}

@media screen and (min-width:1921px) {
    .viewVideos .videoBox iframe {
        height: 12vw
    }
}

@media screen and (min-width:1201px) {
    .BrowseHistorySecSection .customerDashboard {
        padding-left: 0 !important;
        padding-right: 0 !important
    }
}

@media screen and (min-width:2200px) {
    .mainHeadingContainer .headingContainer {
        background-size: 150px 100% !important
    }
}

@media screen and (min-width:2100px) {
    .benefitsGarageImg {
        height: 780px !important
    }
}

@media screen and (min-width:1900px) and (max-width:2099px) {
    .benefitsGarageImg {
        height: 596px !important
    }
}

@media screen and (min-width:1600px) and (max-width:1899px) {
    .benefitsGarageImg {
        height: 500px !important
    }
}

@media screen and (min-width:1600px) {
    .mainHeadingContainer .headingContainer {
        background-size: 150px 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .checkPlanDetailPage {
        height: 360px
    }
}

@media screen and (max-width:1439px) {

    .publishSec,
    .mainHeadingContainer {
        background-size: cover;
        background-position: right
    }

    .favouritePlansSection .fovCard .fovHouseRatingHead>div img {
        width: 20px !important
    }
}

@media screen and (max-width:1300px) {
    .garageTestimonialMain .swiper {
        width: 100% !important
    }

    .garageTestimonialMain .mySwiper4 {
        width: 856px !important
    }

    .proTestimonialsCout .swiper {
        width: 100% !important
    }

    .proTestimonialsCout .mySwiper2 {
        width: 856px !important
    }
}

@media screen and (max-width:1225px) {
    .dashboardMainSection {
        padding-top: 0
    }

    .globalBreadcrumbsContainer {
        margin-top: -20px
    }
}

@media screen and (min-width:769px) and (max-width:1023px) {

    .myPlansTable table tr th:nth-child(5),
    .myPlansTable table tr td:nth-child(5) {
        width: 160px
    }
}

@media screen and (max-width:1200px) {
    .benefitsGarageImg {
        height: 380px !important
    }

    .perfectGarageMain {
        max-width: 100% !important
    }

    .garagePlansMain {
        max-width: 100% !important
    }

    .productGalleryImages .proGalleryImg {
        margin-right: 15px;
        height: auto
    }

    .productGalleryImages .swiper-slide:last-child .proGalleryImg {
        margin-right: 0 !important
    }

    .proFormCol-quar label::after {
        justify-content: end;
        padding-right: 20px
    }

    .dx .uniquePlansOfDesigners {
        max-width: 1000px
    }

    .codesSection .uniquePlansOfDesigners {
        max-width: 1000px
    }

    .myPlansTable table {
        width: 100% !important
    }

    .myPlansTable table th,
    .myPlansTable table td {
        padding: 20px
    }

    .proServicesSec .proServicesContent {
        max-width: 100% !important;
        padding: 0 35px !important
    }

    .joinBuildSec {
        max-width: 100% !important
    }

    .joinBuildCout {
        padding: 0 35px !important
    }

    .joinBuildSec .joinBuildImgHead {
        max-width: unset !important;
        flex: 1
    }

    .joinBuildSec .joinBuildImgHead img {
        height: 433px;
        object-fit: cover
    }

    .ourStoryCout {
        max-width: 100% !important;
        padding: 0 35px !important
    }

    .ourStorySec .ourStoryImgHead {
        max-width: unset !important;
        flex: 1
    }

    .ourStorySec .ourStoryImgHead img {
        height: 433px;
        object-fit: cover
    }

    .ourVisionariesSec .ourVisionariesCards {
        max-width: 100% !important;
        padding: 0 35px !important
    }

    .ourVisionariesSec .column1 {
        max-width: unset !important;
        flex: 1 !important;
        margin-right: 20px
    }

    .ourVisionariesSec .column2 {
        max-width: unset !important;
        flex: 1 !important;
        margin-right: 20px
    }

    .businessWithUs .content-class {
        width: 100% !important;
        padding: 80px 35px 0 !important;
        max-width: 100% !important
    }

    .businessWithUs .content-class .part1 {
        max-width: 49% !important
    }

    .businessWithUs .content-class .part2 {
        max-width: 49% !important
    }

    .costToBuild .costToBuildImg {
        right: -100px
    }

    .modificationCout {
        width: 100% !important;
        padding: 35px !important
    }

    .modificationCout .imgHead img {
        width: 400px !important
    }

    .processCout {
        width: 100% !important;
        padding: 100px 35px !important
    }

    .processCout .steps-head .card-plan .iconHead {
        width: 140px !important
    }

    .processCout .steps-head .card-plan {
        flex-wrap: wrap !important
    }

    .uniquePlansOfDesigners {
        max-width: 100%
    }

    .uniquePlansOfDesigners .uniquePlansImages {
        position: static;
        right: -40px
    }

    .uniquePlansOfDesigners .uniquePlansImages .planImageBox:nth-child(2) {
        transform: translate(0px, 70px)
    }
}

@media screen and (max-width:1100px) {
    .garageTestimonialMain .mySwiper4 {
        width: 800px !important
    }

    .uniquePlansOfDesignersInner {
        flex-direction: column;
        align-items: center
    }

    .uniquePlansOfDesigners .uniquePlansContent {
        max-width: 100%;
        width: 100%;
        padding: 0 35px
    }

    .uniquePlansOfDesigners .uniquePlansImages {
        display: flex;
        justify-content: space-between;
        max-width: 564px;
        width: 100%;
        margin: 0 auto;
        position: static
    }

    .uniquePlansOfDesigners .firstPara {
        display: block;
        margin: 30px 0
    }

    .uniquePlansOfDesigners .secondPara {
        display: none
    }

    .uniquePlansOfDesigners .uniquePlansImages .planImageBox:nth-child(2) {
        transform: translate(0px) !important
    }

    .plansStampedInner {
        align-items: flex-start
    }

    .plansStampedInner .stampedImgBox {
        max-width: 450px
    }

    .plansStampedInner .stampedContent {
        max-width: 450px
    }

    .proTestimonialsCout .mySwiper2 {
        width: 800px !important
    }

    .costToBuild .costToBuildContent {
        max-width: 48%;
        width: 48%
    }

    .costToBuild .costToBuildImg {
        position: static !important;
        max-width: 48%;
        width: 48%;
        padding-right: 0
    }

    .viewVideos {
        justify-content: space-between
    }
}

@media screen and (max-width:1024px) {
    .searchActionBtns .runSearchBtn {
        margin: 0 10px 0 0
    }

    .customerDashboardSection .favCardsHead {
        padding: 0 35px
    }

    .myPlansTable th {
        font-size: 12px !important
    }

    .myPlansTable td {
        font-size: 12px !important
    }
}

@media screen and (max-width:992px) {
    .cartLoginBox h3 {
        font-size: 24px;
        text-align: center
    }

    .tooltip .tooltiptext::after {
        border-width: 0
    }

    .tooltip .tooltiptext {
        bottom: 100%;
        top: unset
    }

    .customerDashboardSection .outer-swiper-button-next.swiper-button-disabled,
    .customerDashboardSection .outer-swiper-button-prev.swiper-button-disabled {
        display: none !important
    }

    .customerDashboardSection .swiper-container2 .outer-swiper-button-next2.swiper-button-disabled,
    .customerDashboardSection .swiper-container2 .outer-swiper-button-prev2.swiper-button-disabled {
        display: none !important
    }

    .customerDashboardSection .outer-swiper-button-next3.swiper-button-disabled,
    .customerDashboardSection .outer-swiper-button-prev3.swiper-button-disabled {
        display: none !important
    }

    .favouritePlansSection .customerDashboardSection .fovCard .fovCardContent {
        padding-bottom: 15px
    }

    .processDetailCard .proDetailImg {
        width: 100%
    }

    .viewVideos .videoBox iframe {
        height: 25vw
    }

    .viewVideos .videoBox h4 {
        text-align: center
    }

    .favouritePlansSection .fovMainContent .fovMainContentHead select {
        -webkit-appearance: none;
        -moz-appearance: none;
        background: 0 0;
        background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
        background-repeat: no-repeat;
        background-position-x: 102%;
        background-position-y: -5px
    }

    .browseHistory .historySwiper.swiper {
        padding: 0
    }

    .CompGrid {
        padding: 30px 50px 20px
    }

    .customerDashboardSection .savedCards {
        padding-left: 35px !important;
        padding-right: 35px !important
    }

    .favouritePlansSection .customerDashboardSection .fovMainContent {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .customerDashboardSection .outer-swiper-button-next3,
    .customerDashboardSection .outer-swiper-button-prev3 {
        display: flex !important
    }

    .customerDashboardSection .outer-swiper-button-next3 {
        right: 0
    }

    .customerDashboardSection .outer-swiper-button-prev3 {
        left: 0
    }

    .customerDashboardSection .swiper-container2 .outer-swiper-button-next2,
    .customerDashboardSection .swiper-container2 .outer-swiper-button-prev2 {
        display: flex !important
    }

    .customerDashboardSection .swiper-container2 .outer-swiper-button-next2 {
        right: -30px
    }

    .customerDashboardSection .swiper-container2 .outer-swiper-button-prev2 {
        left: -30px
    }

    .houseplansSectionHeading h2 {
        font-size: 36px;
        margin-bottom: 20px;
        line-height: 38px
    }

    .houseplansSectionHeading p {
        font-size: 16px
    }

    .BrowseHistorySecSection .historySwiper.swiper .swiper-container {
        padding: 30px 35px !Important
    }

    .BrowseHistorySecSection .FavoritePlans .historySwiper.swiper .swiper-container {}

    .dashboardMainSection .fovMainContent {
        padding: 0 !important
    }

    .testimonials-content {
        padding: 0px !Important
    }

    .testimonials-elements-group {
        padding: 0px !Important
    }

    .orderDetailTable table th {
        font-size: 13px;
        padding: 16px 20px
    }

    .orderDetailTable table td {
        font-size: 14px;
        padding: 16px 20px
    }

    .architecturalStylesCards .StylesCard {
        width: 48%;
        margin-bottom: 30px
    }

    .garageTestimonialMain {
        padding: 0 35px !important
    }

    .customerDashboardSection .fovCards.browseHistory .historySwiper .outer-swiper-button-prev {
        left: 0 !important
    }

    .customerDashboardSection .fovCards.browseHistory .historySwiper .outer-swiper-button-next {
        right: 0 !important
    }

    .browseOrderCards .orderOverview {
        width: 100%
    }

    .orderCard .orderItems {
        padding-left: 0
    }

    .benefitsGarageImg {
        height: 320px !important
    }

    .perfectGarageMain .perfectGarageHead {
        max-width: 100% !important
    }

    .perfectGarageMain .perfectGaragePlansPart2 {
        margin-left: 30px !important
    }

    .garagePlansContent .garagePlansCard {
        width: 48% !important;
        margin-bottom: 20px !important
    }

    .garageTestimonialMain {}

    .garagePlansContent button {
        margin: 20px auto 0 !important
    }

    .benefitsGarageContent {
        width: 100% !important
    }

    .garageTestimonialsSection {
        padding-top: 0 !important
    }

    .garageTestimonialMain .swiper {
        width: 100% !important;
        padding-bottom: 80px !important
    }

    .garageTestimonialMain .mySwiper4 {
        width: 100% !important
    }

    .garageTestimonialMain .garageTestimonialHead h2 {
        margin-bottom: 60px !important
    }

    .garageTestimonialMain .swiper-slide .garageTestimonialCard h4 {
        text-align: center !important
    }

    .garageTestimonialMain .swiper-slide .garageTestimonialCard .garageTestimonialCardInner span {
        text-align: left !important
    }

    .garageTestimonialMain .swiper-slide .garageTestimonialCard p {
        text-align: center
    }

    .garageTestimonialMain .swiper-button-next {
        right: 50% !important;
        transform: translateX(66px);
        top: 85% !important
    }

    .garageTestimonialMain .swiper-button-prev {
        left: 50% !important;
        transform: translateX(-66px);
        top: 85% !important
    }

    .garageTestimonialMain .swiper::after {
        display: none !important
    }

    .editProcessForm .processDetailCard {
        flex-direction: column
    }

    .processDetailCard .proDetailImg {
        margin-right: 0;
        margin-bottom: 20px
    }

    .proDetailsContent h5 {
        font-weight: 400;
        font-size: 22px;
        margin-left: 0;
        width: 95%;
        text-align: center
    }

    .editProcessForm .proFormCol-quar {
        width: 48%
    }

    .proFormCol-quar label::after {
        justify-content: center;
        padding-left: 80px
    }

    .orderConfirmationSection {
        padding-top: 0
    }

    .orderConfirmHeading-lg {
        padding-right: 20px
    }

    .orderConfirmHeading-lg h2 {
        font-size: 40px
    }

    .dashboardMainSection {
        padding-top: 0
    }

    .customerDashboardSection .fovCards {
        padding: 5px 0 !important
    }

    .customerDashboardSection .fovMainContent {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .customerDashboardSection .fovCards .fovCard .swiper-container {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .costToBuild {
        padding: 0
    }

    .codesSection {
        padding-top: 20px
    }

    .commonCodeRequirements {
        padding: 40px 35px
    }

    .codesNoteBox h4 {
        line-height: 35px !important
    }

    .accountDashboard .cDHeaderBoxTop a {
        width: 20%
    }

    .privacyPolicySection {
        padding-top: 50px
    }

    .privacyPolicySection .privacyPolicy {
        padding-bottom: 50px
    }

    .customerDashboardSection .customerDashboard {
        padding: 10px 15px
    }

    .customerDashboardSection .FavoritePlans.fovCards {}

    .customerDashboardSection .fovCards .swiper-slide:nth-child(1) .fovCard {
        margin-right: auto
    }

    .customerDashboardSection .fovCards .swiper-slide:nth-child(2) .fovCard {
        margin-left: auto;
        margin-right: 0
    }

    .customerDashboardSection .fovCards .swiper-slide:nth-child(3) .fovCard {
        margin-left: auto
    }

    .customerDashboardSection .savedCards .savedCard {
        margin: 0 auto
    }

    .customerDashboardSection .swiper-container {
        padding: 30px 35px 0;
        overflow: hidden
    }

    .customerDashboardSection .outer-swiper-button-next {
        right: 0 !important;
        display: flex
    }

    .customerDashboardSection .outer-swiper-button-prev {
        left: 0 !important;
        display: flex
    }

    .display-hide {
        display: none !important
    }

    .customerDashboardSection .fovCards.browseHistory {
        overflow: hidden !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important
    }

    .companyContactCards .companyOfcTimings {
        max-height: 100%;
        height: 100%;
        padding: 25px;
        margin: 0
    }

    .compCntTiming ul li span {
        font-size: 14px
    }

    .companyContactCards .companyLiveChat {
        padding: 20px
    }

    .globalBreadcrumbsContainer {
        margin-top: -50px
    }

    .viewOrderTable th {
        font-size: 16px;
        padding-left: 15px;
        padding-right: 15px
    }

    .viewOrderTable td {
        font-size: 15px;
        padding-left: 15px;
        padding-right: 15px
    }

    .orderFulfillment table th {
        font-size: 14px !important;
        padding-left: 8px !important;
        padding-right: 8px !important
    }

    .orderFulfillment table td {
        font-size: 13px !important;
        padding-left: 8px !important;
        padding-right: 8px !important
    }

    .savedSearchesSection .savedSearches {
        max-width: 100% !important;
        padding: 50px 35px 120px !important
    }

    .savedCards {
        justify-content: flex-start !important
    }

    .savedCards .savedCard {
        flex: unset;
        margin-bottom: 20px;
        margin-right: 20px;
        max-width: 95%
    }

    .browseHistory .historySwiper.swiper {
        padding: 0 35px
    }

    .myPlansSection .myPlans {
        max-width: 100% !important;
        padding: 0 35px !important
    }

    .myPlansTable table th,
    .myPlansTable table td {
        padding: 15px
    }

    .updateProfileForm .saveUpdateBtn {
        display: block;
        margin: 50px auto 0
    }

    .updateProfileSection .userActivityContainer {
        padding-bottom: 90px
    }

    .updateProfileSection .updateProfile {
        max-width: 100% !important;
        padding: 50px 35px !important
    }

    .accountPurchaseSection .userActivityContainer {
        padding-bottom: 0
    }

    .accountPurchaseSection .accPurchaseContent {
        max-width: 100% !important;
        padding: 50px 35px !important
    }

    .orderCard .orderInnerDetails {
        flex-direction: column
    }

    .orderCard .orderItems {
        border-left: none;
        padding-left: 0
    }

    .accountTabContent .accTabBtns {
        max-width: 100%;
        width: 100%
    }

    .accTabBtns .accTabBtn {
        padding: 15px !important;
        font-size: 15px
    }

    .favouritePlansSection .fovMainContent {
        max-width: 100% !important;
        padding: 0 35px !important
    }

    .favouritePlansSection .fovMainContent .fovMainContentHead {
        margin-bottom: 0 !important;
        flex-direction: column;
        margin-top: 20px
    }

    .favouritePlansSection .fovCards {
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        height: 100%;
        margin-bottom: 20px !important
    }

    .favouritePlansSection .fovMainContent .fovMainContentHead .inputGroup {
        max-width: 560px !important;
        width: 560px !important;
        margin-top: 20px;
        margin-bottom: 25px
    }

    .favouritePlansSection .fovMainContent .fovMainContentHead .inputHead {
        padding: 6px 8px !important
    }

    .uniquePlansOfDesigners .uniquePlansImages {
        justify-content: space-between;
        width: 100%
    }

    .uniquePlansOfDesigners .uniquePlansImages .planImageBox {
        width: 46%
    }

    .plansIncludeContainer .plansIncludeCard {
        flex-direction: column;
        align-items: center
    }

    .plansIncludeCardContent {
        text-align: center
    }

    .plansIncludeCardContent h4 {
        margin: 40px 0 20px
    }

    .PlansIncluedMainContainer .plansImageBox {
        padding-top: 300px
    }

    .notTypicallyIncludedSection {
        background: #fff;
        padding: 80px 35px
    }

    .notTypicallyIncludedSection::before {
        display: none;
        content: none
    }

    .typicallyPlansItems {
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: 0
    }

    .typicallyPlansItems .typItem {
        width: 30%;
        margin-bottom: 48px
    }

    .typicallyIncludedNote {
        display: none
    }

    .typItem.active .typItemContent {
        display: block
    }

    .typicallyPlansItems .typItem:nth-child(7) .typItemContent {
        left: -176%;
        right: unset;
        margin: 0 auto
    }

    .typicallyPlansItems .typItem:nth-child(7) .typItemContent::after {
        left: 0;
        right: 0;
        margin: 0 auto
    }

    .plansStampedInner {
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .stampedImgBox {
        order: 2
    }

    .stampedContent {
        order: 1;
        margin-bottom: 20px;
        text-align: center
    }

    .proTestimonialsCout {
        padding: 0 35px !important
    }

    .proTestimonialsCout .swiper {
        width: 100% !important;
        padding-bottom: 80px !important
    }

    .proTestimonialsCout .mySwiper2 {
        width: 100% !important
    }

    .proTestimonialsCout .testimonialsHead h2 {
        margin-bottom: 60px !important
    }

    .proTestimonialsCout .swiper-slide .proTestimonialsHeadCard h4 {
        text-align: center !important
    }

    .proTestimonialsCout .swiper-slide .proTestimonialsHeadCard .testimonialsHeadInnerPro span {
        text-align: left !important
    }

    .proTestimonialsCout .swiper-slide .proTestimonialsHeadCard p {
        text-align: center
    }

    .proTestimonialsCout .swiper-button-next {
        right: 50% !important;
        transform: translateX(66px);
        top: 85% !important
    }

    .proTestimonialsCout .swiper-button-prev {
        left: 50% !important;
        transform: translateX(-66px);
        top: 85% !important
    }

    .proTestimonialsCout .swiper::after {
        display: none !important
    }

    .proTestimonialsSec .btn {
        margin-top: 40px !important
    }

    .supportCout {
        max-width: 100% !important;
        padding: 0 35px !important
    }

    .supportCout .supportPart2 {
        max-width: unset !important;
        flex: 1
    }

    .supportCout .supportPart1 {
        margin-right: 40px !important
    }

    .supportCout .supportCards {
        flex-wrap: wrap;
        margin-bottom: 100px !important
    }

    .supportCout .supportCard {
        width: 48% !important;
        margin-bottom: 20px !important
    }

    .specialOfferSec .specialOfferCards {
        max-width: 100% !important;
        flex-wrap: wrap !important
    }

    .specialOfferHead {
        max-width: 100% !important
    }

    .specialOfferSec {
        padding: 80px 0 !important
    }

    .specialOfferCout {
        padding: 0 35px !important
    }

    .specialOfferSec .specialOfferCard {
        width: 48% !important;
        margin-bottom: 30px !important
    }

    .specialOfferSec .specialOfferCard:last-child {
        margin-bottom: 0 !important
    }

    .joinBuildSec {
        padding-top: 80px !important
    }

    .joinBuildSec .joinBuildImgHead {
        margin-right: 20px !important
    }

    .joinBuildSec .joinBuildHead {
        max-width: 100% !important
    }

    .whoWeArecout {
        max-width: 100% !important;
        padding: 73px 35px 0 !important
    }

    .whoWeAreSec .whoWeAreContent {
        max-width: 420px !important;
        margin-right: 20px !important
    }

    .whoWeAreSec .whoWeAreContentHead {
        align-items: center !important
    }

    .whoWeAreSec .whoWeAreImgHead {
        max-width: unset !important;
        flex: 1 !important
    }

    .whoWeAreSec .whoWeAreCards .whoWeAreCard {
        width: 32% !important
    }

    .whoWeAreSec .whoWeAreCards .whoWeAreCard {
        flex-direction: column !important;
        height: unset !important;
        text-align: center !important;
        padding: 24px 19px !important
    }

    .whoWeAreSec .whoWeAreCards .whoWeAreCard span {
        margin-right: 0 !important;
        margin-bottom: 12px !important
    }

    .whoWeAreSec .subtitleHead {
        width: 80vw;
        margin: 0 auto !important
    }

    .whoWeAreSec .subtitleHead h3 {
        font-size: 28px !important;
        line-height: 42px !important
    }

    .whoWeAreSec .subtitleHead img {
        margin-bottom: 40px !important
    }

    .ourVisionariesSec .column1 {
        margin-right: unset !important;
        order: 2;
        width: 48% !important;
        flex: unset !important
    }

    .ourVisionariesSec .column2 {
        margin-right: unset !important;
        order: 3;
        width: 48% !important;
        flex: unset !important;
        margin-top: unset !important
    }

    .ourVisionariesSec .column3 {
        order: 1;
        max-width: 100% !important
    }

    .ourVisionariesSec .column3 img {
        object-fit: contain
    }

    .ourVisionariesSec p {
        margin-bottom: 40px !important
    }

    .ourVisionariesSec {
        padding: 70px 0 !important
    }

    .ourStorySec .ourStoryImgHead {
        margin-right: 20px !important
    }

    .ourStorySec {
        padding-bottom: 70px !important
    }

    .helpCout .head {
        width: 100% !important;
        padding: 0 35px !important
    }

    .helpSec {
        padding: 80px 0 0 !important
    }

    .exampleModificationCout .cards {
        width: 100% !important;
        flex-wrap: wrap !important
    }

    .exampleModificationSec {
        padding: 80px 35px 0 !important
    }

    .exampleModificationCout .card-plan {
        width: 49% !important
    }

    .exampleModificationCout .card-plan h4 {
        font-size: 22px !important;
        margin-bottom: 19px !important
    }

    .exampleModificationCout .card-plan .imgHead {
        height: 320px !important;
        margin-bottom: 26px !important
    }

    .contactInnerWrapper {
        width: unset;
        left: 28px;
        right: 28px
    }

    .formWrapper {
        padding: 20px
    }

    .publishSec h1 {
        font-size: 36px !important
    }

    .businessWithUs {
        padding: 60px 35px !important
    }

    .businessWithUs .content-class {
        padding: 29px 0 0 !important
    }

    .businessWithUs .head {
        width: 100% !important;
        max-width: 100% !important
    }

    .businessWithUs .content-class .part1 {
        max-width: 100% !important;
        margin-bottom: 34px !important
    }

    .businessWithUs .content-class .part2 {
        max-width: 100% !important
    }

    .businessWithUs .content-class .part2 h3 {
        text-align: center !important;
        font-size: 28px !important
    }

    .costToBuild .costToBuildContent {
        max-width: 100%;
        width: 100%
    }

    .costToBuild .costToBuildImg {
        max-width: 100%;
        width: 100%;
        height: auto !important
    }

    .costToBuild .costToBuildContent h2 {
        font-size: 40px;
        margin: 0 auto 30px;
        line-height: 45px;
        text-align: center
    }

    .costToBuildContent .smScreen {
        display: block
    }

    .costToBuild .lgScreen {
        display: none
    }

    .featuresCards .featureCard {
        width: 45%;
        margin-bottom: 60px
    }

    .featuresCards .featureCardContent {
        max-width: 100% !important
    }

    .optCard {
        max-width: 48%;
        margin-bottom: 25px !important
    }

    .optCard.blueCard {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .mainHeadingContainer .headingContainer h1 {
        font-size: 36px !important;
        line-height: normal;
        top: 0
    }

    .mainHeadingContainer .headingContainer h2 {
        font-size: 30px !important
    }

    .costToBuildCalc h2 {
        font-size: 40px;
        margin: 0 0 30px;
        line-height: 45px;
        text-align: center;
        text-transform: capitalize
    }

    .whatYouGetCard {
        max-width: 49% !important;
        align-items: flex-start !important
    }

    .addToCart {
        margin-bottom: 70px
    }

    .addToCart .cartForm {
        width: 100%;
        margin-bottom: 50px
    }

    .addToCart .cartInfo {
        width: 100%
    }

    .StartBuildCards .StartBuildCard {
        width: 45%;
        margin-bottom: 60px
    }

    .StartBuildCards .StartBuildCardContent {
        max-width: 100% !important
    }

    .accountsSec,
    .estimatingCostSec,
    .contactWrapper {
        padding: 35px 35px 0 !important
    }

    .accountsSecCout {
        max-width: 100% !important;
        padding: 50px 35px !important
    }

    .accountsSecCout form .input-group .input-head {
        width: 49% !important
    }

    .accountsSecCout .head {
        margin-bottom: 35px !important
    }

    .houseImgHead::before {
        right: 35px !important;
        left: 35px !important;
        margin: 0 !important;
        width: unset !important
    }

    .contactMainWrapper {
        padding-top: 60px
    }

    .modificationCout {
        flex-direction: column
    }

    .modificationCout .imgHead img {
        position: unset !important;
        width: 100% !important;
        margin-top: 30px;
        transform: translate(35px, 35px)
    }

    .processCout {
        padding: 80px 0 !important
    }

    .processCout .head {
        padding: 0 35px !important
    }

    .processCout .steps-head {
        padding: 0 10px !important
    }

    .processCout .steps-head .card-plan {
        padding: 0 25px !important;
        margin-bottom: 52px !important
    }

    .processCout .steps-head .card-plan .iconHead {
        width: 50% !important;
        order: 2
    }

    .processCout .steps-head .card-plan .descriptionHead {
        padding: 25px 0 !important;
        order: 3;
        border-left: unset !important
    }

    .processCout .steps-head .card-plan .titleHead {
        padding-right: 25px !important;
        width: 50% !important
    }

    .processCout .steps-head .card-plan .titleHead span {
        margin-right: 25px !important
    }

    .businessWithUs .head h2 {
        font-size: 28px
    }

    .mainHeadingContainer .headingContainer {
        margin-top: 0;
        padding: 40px 30px 54px
    }
}

@media screen and (max-width:934px) {
    .accTabBtns .accTabBtn {
        margin: 15px
    }
}

@media screen and (max-width:830px) {
    .savedCards {
        justify-content: center !important
    }

    .viewOrderTable th {
        font-size: 16px;
        padding-left: 12px;
        padding-right: 12px
    }

    .viewOrderTable td {
        font-size: 14px;
        padding-left: 12px;
        padding-right: 12px
    }

    .orderFulfillment table th {
        padding-left: 12px !important;
        padding-right: 12px !important
    }

    .orderFulfillment table td {
        padding-left: 8px !important;
        padding-right: 8px !important
    }

    .myPlansTable th {
        font-size: 10px !important
    }

    .myPlansTable td {
        font-size: 10px !important
    }
}

@media screen and (max-width:768px) and (min-width:577px) {
    .customerDashboardSection .fovCards.browseHistory .historySwiper .outer-swiper-button-next {
        right: 30px !important
    }

    .customerDashboardSection .fovCards.browseHistory .historySwiper .outer-swiper-button-prev {
        left: 30px !important
    }
}

@media screen and (max-width:768px) {
    .customerDashboardSection .fovCards {
        padding: 5px 0
    }

    .customerDashboardSection .fovCards .fovCard {
        width: 90% !important;
        margin: 0 auto !important;
        box-shadow: 0 8px 10px 0 rgba(5, 20, 42, .07);
        padding: 0 !important
    }

    .myPlansTable td:first-child {
        border-radius: 11px 11px 0 0
    }

    .favouritePlansSection .fovMainContent .fovMainContentHead .inputGroup {
        max-width: 80% !important;
        width: 80% !important
    }

    .favouritePlansSection .fovMainContent .fovMainContentHead .inputGroup {
        flex-direction: column
    }

    .favouritePlansSection .fovMainContent .fovMainContentHead .inputHead {
        margin-bottom: 15px;
        width: 100%
    }

    .favouritePlansSection .fovMainContent .fovMainContentHead .inputGroup h6 {
        min-width: 60px;
        font-size: 14px;
        margin: 10px;
        text-align: center
    }

    .productGallery .productGalleryTabs {
        margin-left: 0
    }

    .productGallery {
        transform: translateX(-30px)
    }

    .viewVideos .videoBox iframe {
        width: 100%;
        height: 50vw
    }

    .customerDashboardSection .fovCards.browseHistory .historySwiper .outer-swiper-button-next {
        right: 15px !important
    }

    .customerDashboardSection .fovCards.browseHistory .historySwiper .outer-swiper-button-prev {
        left: 15px !important
    }

    .LogoBlue.checkPlanDetailPage,
    .LogoBlue.framingLayoutsSection {
        height: auto;
        background-size: cover;
        background-position: top
    }

    .logoutPage h1 {
        font-size: 36px
    }

    .browseHistory .historySwiper.swiper {
        padding: 0 !important
    }

    .customerDashboardSection .savedCards {
        padding-left: 25px !important;
        padding-right: 25px !important
    }

    .copyrightHeading h4 {
        text-align: center
    }

    .copyrightMainContent .headingPara {
        text-align: center
    }

    .copyrightContent h4 {
        text-align: left
    }

    .copyrightContent p {
        text-align: left
    }

    .customerDashboardSection .fovCards.browseHistory {
        padding-left: 0;
        padding-right: 0
    }

    .customerDashboardSection .fovCards.browseHistory .swiper-container3 {
        padding-left: 20px;
        padding-right: 20px
    }

    .customerDashboardSection .swiper-container3 {
        padding: 30px 20px
    }

    .customerDashboardSection .outer-swiper-button-next3 {
        right: 5px
    }

    .customerDashboardSection .outer-swiper-button-prev3 {
        left: 5px
    }

    .customerDashboardSection .swiper-container2 {
        padding: 0
    }

    .customerDashboardSection .swiper-container2 .outer-swiper-button-next2 {
        right: -25px
    }

    .customerDashboardSection .swiper-container2 .outer-swiper-button-prev2 {
        left: -25px
    }

    .differentStyles .differentStylesCard {
        width: 100%
    }

    .houseplansIncludesCards .houseplansIncludesCard {
        width: 100% !important;
        margin-right: 0
    }

    .browseHousePlansSection {
        padding: 30px 0 50px
    }

    .browseHousePlansSection {
        padding: 60px 0
    }

    .browseHousePlansContainer .browseHousePlans {
        margin-top: 40px;
        flex-direction: column
    }

    .browseHousePlans .browseHouseText {
        flex: unset;
        margin-right: 0;
        order: 2
    }

    .browseHousePlans .browseHouseImg {
        max-width: 330px;
        width: 100%;
        order: 1;
        margin-bottom: 30px
    }

    .houseplansIncludesSection {
        padding: 60px 0 40px
    }

    .houseplansIncludesCards {
        justify-content: space-between
    }

    .houseplansIncludesCards .houseplansIncludesCard {
        width: 48%;
        margin-right: 0
    }

    .setsOfHousePlansSection {
        padding: 60px 0 0
    }

    .setsOfHousePlansContainer .setsOfHousePlans {
        display: flex;
        flex-direction: column;
        margin-top: 30px
    }

    .setsOfHousePlans .setsOfHousePlansText {
        flex: unset;
        margin-right: 0;
        order: 2;
        text-align: center
    }

    .setsOfHousePlans .setsOfHousePlansText.inverse {
        flex: unset;
        margin-left: 0;
        order: 2;
        text-align: center
    }

    .setsOfHousePlans .setsOfHousePlansImg {
        max-width: 330px;
        width: 100%;
        order: 1;
        margin: 0 auto 30px
    }

    .drawUpHouseSection {
        padding: 60px 0 20px
    }

    .perfectGaragePlans {
        flex-direction: column
    }

    .perfectGarageMain .perfectGaragePlansPart2 {
        margin-left: 0 !important;
        width: 100%
    }

    .perfectGaragePlans.perfectGaragePlansInverse {
        flex-direction: column
    }

    .perfectGarageMain .perfectGaragePlansPart1.perfectGaragePlansInverse,
    .perfectGarageMain .perfectGaragePlansPart1.perfectGaragePlansInverse2 {
        order: 1;
        margin-bottom: 30px
    }

    .perfectGarageMain .perfectGaragePlansPart2.perfectGaragePlansInverse,
    .perfectGarageMain .perfectGaragePlansPart2.perfectGaragePlansInverse2 {
        order: 2;
        margin: 0 !important
    }

    .selectingPakage .selectingHeading h1 {
        text-align: center
    }

    .testimonials-elements-group {
        height: unset !important
    }

    .shopperapproved_widget {
        height: unset !important
    }

    .shopperapproved_widget table tr {
        flex-direction: column
    }

    .orderBillAndShipContainer .orderBillandShip h5 {
        padding: 22px 25px
    }

    .orderBillandShip ul {
        padding: 24px 25px
    }

    .orderDetailTable table th {
        font-size: 12px;
        padding: 16px 10px;
        white-space: nowrap
    }

    .orderDetailTable table td {
        font-size: 13px;
        padding: 16px 10px
    }

    .backToMyOrders {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 24px
    }

    .architecturalStylesCards .StylesCard {
        width: 100%;
        margin: 0 auto 30px
    }

    .fovMainContent.favSecMain {
        padding-left: 30px !important;
        padding-right: 30px !important
    }

    .benefitsGarageImg {
        background: url(../img/BenefitsGarageMini.png);
        height: 380px !important;
        margin-top: 20px !important
    }

    .benefitsGarageContent li {
        line-height: normal;
        margin-bottom: 10px
    }

    .benefitsGarageContent li span {
        margin-right: 12px
    }

    .garageTestimonialMain .garageTestimonialHead h2 {
        font-size: 36px !important;
        margin-bottom: 40px !important;
        line-height: 42px !important
    }

    .garageTestimonialMain .swiper-slide .garageTestimonialCard h4 {
        font-size: 20px !important;
        margin-bottom: 23px !important
    }

    .garageTestimonialMain .swiper-slide .garageTestimonialCard p {
        font-size: 12px !important;
        line-height: 25px !important;
        margin-bottom: 28px !important
    }

    .garageTestimonialMain .swiper-slide .garageTestimonialCard .garageTestimonialCardInner {
        padding-bottom: 31px !important
    }

    .productGalleryTabs button.reverseImgBtn {
        width: 137px !important;
        height: 30px;
        padding: 0 10px;
        border-radius: 6px;
        background-color: #606060 !important;
        border: none;
        color: #fff;
        font-family: open sans;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .reverseImgBtn-outer {
        display: none
    }

    .reverseImgBtn-inner {
        display: inline;
        width: unset !important
    }

    .easyStepsSection {
        background: #fff
    }

    .easyStepsContainer {
        padding: 60px 15px
    }

    .easyStepHeader h2 {
        font-size: 40px;
        line-height: 44px;
        text-align: center
    }

    .processMainContainer::before {
        content: none !important;
        display: none !important
    }

    .processContainer {
        border-top: 1px solid #e5e5e5;
        margin-top: 0;
        padding: 30px 0
    }

    .processContainer:first-child {
        border-top: none
    }

    .processContainer .processNum {
        margin-right: 0
    }

    .processContainer .processDetails {
        padding: 0 0 0 18px
    }

    .processContainer .processHeader {
        position: relative
    }

    .processContainer .processHeading h3 {
        font-size: 20px;
        max-width: 300px;
        width: fit-content
    }

    .processContainer .processHeading p {
        margin-top: 40px
    }

    .processContainer .processHeader .processIcon {
        width: 50px;
        height: 50px;
        position: absolute;
        right: 0;
        top: 0
    }

    .proDetailsInnerContent {
        margin-left: -5%
    }

    .proDetailsInnerContent .proInnerContent {
        width: 25%;
        padding: 0
    }

    .proDetailsInnerContent .proInnerContent:nth-child(6) {
        border-right: 1px solid #e5e5e5
    }

    .proDetailsInnerContent .proInnerContent:nth-child(4n) {
        border-right: none
    }

    .editProcessForm {
        border: none;
        margin-top: 0;
        padding: 24px 0 0
    }

    .editProFormHeading h3 {
        font-size: 26px
    }

    img.left-quote,
    img.right-quote {
        width: 10px;
        height: 10px
    }

    .editProFormHeading p {
        line-height: 26px
    }

    .editProcessForm .proFormCol-half {
        width: 100%
    }

    .editProFormHeading {
        margin-left: -52px;
        margin-right: 10px
    }

    .editProcessForm .proFormRow {
        margin-left: -12px;
        width: 90%
    }

    .editProcessForm .proFormCol-quar {
        width: 100%
    }

    .proFormCol-quar label::after {
        justify-content: center;
        padding-left: 30px
    }

    .productGallery .productGalleryTabs {
        justify-content: center
    }

    .productGalleryTabs button {
        margin-bottom: 15px
    }

    .productGalleryImages .swiper-button-next,
    .productGalleryImages .swiper-button-prev {
        display: block
    }

    .productGalleryImages {
        margin-left: -36px;
        margin-right: 24px
    }

    .productGalleryView {
        margin-left: -36px;
        margin-right: 24px
    }

    .productGalleryImages .proGalleryImg {
        margin-right: 10px;
        border-radius: 8px
    }

    .productGalleryImages .proGalleryImg img {
        border-radius: 8px
    }

    .processMainContainer .optionalContainer {
        margin-left: -36px
    }

    .processMainContainer .processInfo {
        margin-left: -36px
    }

    .moreQuestionsSection .moreQuestionsContainer {
        flex-direction: column;
        padding: 32px 20px
    }

    .moreQuestionsContainer .moreOptionsIcon {
        width: 94px;
        height: 94px;
        margin-right: 0;
        padding-bottom: 24px;
        border-bottom: 2px solid #2d5384
    }

    .moreQuestionsContainer .moreOptionsContent {
        border: none;
        padding: 24px 0 0
    }

    .moreOptionsContent h2 {
        font-size: 30px;
        text-align: center
    }

    .moreOptionsContent p {
        text-align: center
    }

    .productGalleryImages .proGalleryImg:last-child span {
        display: none
    }

    .productGalleryImages .proGalleryImg:last-child::before {
        content: unset;
        display: none
    }

    .orderConfirmationSection {
        padding-top: 0
    }

    .orderConfirmationContainer {
        flex-direction: column-reverse;
        align-items: center;
        padding: 40px 20px
    }

    .orderConfirmHeading-lg {
        display: none
    }

    .orderConfirmHeading-sm {
        display: block;
        margin-bottom: 30px
    }

    .orderConfirmHeading-sm h2 {
        display: block;
        color: #000;
        font-family: var(--din_2014);
        font-size: 40px;
        font-weight: 400;
        font-style: normal;
        letter-spacing: normal;
        margin-bottom: 30px
    }

    .orderConfirmHeading-sm p {
        color: #182026;
        font-family: var(--OpenSans-semiBold);
        font-size: 18px;
        font-weight: 400;
        font-style: normal;
        letter-spacing: normal;
        line-height: 26px
    }

    .orderConfirmationContent {
        max-width: 580px;
        margin-top: 40px
    }

    .orderConfirmSummary {
        max-width: 580px
    }

    .orderSummaryBox .promoCode {
        display: block
    }

    .orderConfirmSummary .orderSummaryBox {
        padding: 25px 22px
    }

    .backToOrders button {
        margin: 0 auto
    }

    .selectingPakage .selectingHeading h2 {
        text-align: center
    }

    .selectingPakage .selectingHeading p {
        text-align: center
    }

    .selectingPakage .selectingCard {
        margin-bottom: 30px;
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding: 30px 20px
    }

    .selectingPakage .selectingCard .selectingCardHeading {
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .selectingPakage .selectingCard .selectingCrdImg {
        margin: 0 0 20px !important
    }

    .selectingCardHeading h3 {
        margin: 15px 0 !important
    }

    .selectingPakage .selectingCardContent {
        padding: 0
    }

    .selectingPakage .selectingCard h3 {
        text-align: center
    }

    .selectingPakage .selectingCard p {
        text-align: center
    }

    .commonCodeReqContent .CodeReqContent {
        margin-bottom: 30px;
        flex-direction: column;
        align-items: center
    }

    .commonCodeReqContent .CodeReqContent h3 {
        text-align: center
    }

    .commonCodeReqContent .CodeReqContent p {
        text-align: center
    }

    .commonCodeReqContent .reviewNote {
        text-align: center
    }

    .commonCodeRequirementsHeading h2 {
        text-align: center
    }

    .commonCodeRequirementsHeading p {
        text-align: center
    }

    .codesSection {
        padding-top: 30px
    }

    .commonCodeReqContent .CodeReqContent {
        margin-bottom: 30px;
        flex-direction: column;
        align-items: center
    }

    .CodeReqContent .codeReqImg {
        margin-right: 0;
        margin-bottom: 30px
    }

    .commonCodeReqContent .CodeReqContent h3 {
        text-align: center
    }

    .commonCodeReqContent .CodeReqContent p {
        text-align: center
    }

    .commonCodeReqContent .reviewNote {
        text-align: center
    }

    .codesSection .uniquePlansOfDesigners h2,
    .headingContainer h2 {
        text-align: center
    }

    .termsContainer .terms {
        margin-bottom: 0
    }

    .termsContainer .terms h3 {
        text-align: center
    }

    .termsContainer .terms p {
        text-align: center
    }

    .dashboardMainSection {
        padding-top: 0
    }

    .proCustomerDashboard .cDHeaderBox .cDHeaderContent {
        order: 2;
        width: fit-content;
        flex-direction: column;
        align-items: flex-start
    }

    .proCustomerDashboard .cDHeaderBox p {
        margin-top: 0 !important;
        margin-right: 0 !important
    }

    .customerDashboardSection .customerDashboard .customerDashboardHead h2 {
        font-size: 36px
    }

    .proCustomerDashboard .cDHeaderBox .cDHeaderContent {
        order: 2;
        width: fit-content;
        flex-direction: column;
        align-items: flex-start
    }

    .proCustomerDashboard .cDHeaderBox p {
        margin-top: 0 !important;
        margin-right: 0 !important
    }

    .accountDashboard .cDHeaderBox p {
        width: 100%
    }

    .accountDashboard .cDHeaderBoxTop a {
        position: absolute;
        right: 60px
    }

    .cDHeaderBoxSm {
        padding: 0 20px
    }

    .cDHeaderBoxSm h5 {
        width: 100%
    }

    .customerDashboardSection .customerDashboard .customerDashboardHead {
        justify-content: center;
        margin-bottom: 0 !important;
        margin-left: 0
    }

    .accountDashboard .cDHeaderBoxTop {
        align-items: flex-start
    }

    .cDHeaderBoxTop .cDHeaderContent {
        flex-direction: column;
        align-items: flex-start
    }

    .accountDashboard .cDHeaderBoxTop h5 {
        width: 100%
    }

    .accountDashboard .cDHeaderBox p {
        width: 100%
    }

    .accountDashboard .companyInfoCard {
        margin-bottom: 15px
    }

    .customerDashboardSection .swiper-slide {
        width: 100% !important
    }

    .customerDashboardSection .swiper-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: unset !important;
        justify-content: space-between
    }

    .customerDashboardSection .swiper-container .outer-swiper-button-next {
        right: 10px !important
    }

    .customerDashboardSection .swiper-container .outer-swiper-button-prev {
        left: 10px !important
    }

    .cDHeaderBox {
        flex-wrap: wrap;
        height: auto;
        margin: 15px 0 0 !important
    }

    .cDHeaderBoxComp h5 {
        width: 100% !important
    }

    .cDHeaderBox h5 {
        order: 1;
        font-size: 15px
    }

    .cDHeaderBox p {
        order: 3;
        font-size: 15px;
        margin-top: 15px
    }

    .cDHeaderBox a {
        display: inline-block;
        order: 1;
        font-size: 14px;
        text-align: end
    }

    .companyInfoContainer .companyInfoCards {
        flex-wrap: wrap
    }

    .companyInfoCard {
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px !important
    }

    .companyInfoCard .cCrdCnt h4 {
        font-size: 14px
    }

    .companyInfoCard .cCrdCnt p {
        font-size: 12px
    }

    .companyInfoCard:nth-child(3) .cCrdCnt p {
        max-width: 205px
    }

    .companyContactCards {
        flex-direction: column;
        padding: 0 5px
    }

    .companyContactCards .companyOfcTimings {
        width: 100%
    }

    .companyContactCards .companyLiveChat {
        width: 100%;
        margin-top: 22px
    }

    .globalBreadcrumbsContainer {
        padding-top: 75px
    }

    .viewOrderHeadings {
        margin-bottom: 0
    }

    .viewOrdersMainSection {
        padding-top: 30px
    }

    .viewOrdersMainSection .accountTabContainer {
        padding: 0 !important
    }

    .viewOrderHeadings {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 1rem;
        padding: 0;
        margin-bottom: 1.5rem
    }

    .viewOrderHeadings .viewOrderHeading {
        display: flex;
        flex-direction: column;
        row-gap: .25rem
    }

    .viewOrderHeadings .viewOrderHeading h4 {
        margin-bottom: 0
    }

    .viewOrderDetails {
        padding: 24px
    }

    .orderBillingAndShipping {
        margin-bottom: 1.5rem;
        padding: 0
    }

    .billingShippingContent h4 {
        margin-bottom: 8px
    }

    .billingShippingContent li {
        margin-bottom: 4px
    }

    .viewOrderTable table thead {
        display: none
    }

    .viewOrderTable table tbody {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1rem;
        row-gap: .5rem
    }

    .viewOrderTable table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: .5rem;
        column-gap: 1rem;
        border-radius: 11px;
        position: relative;
        background: #eee !important;
        padding: .5rem
    }

    .viewOrderTable table tbody tr td {
        padding: 0;
        font-size: 16px
    }

    .viewOrderTable table tbody tr td::before {
        display: block;
        color: #19437a;
        font-family: var(--opensans);
        font-size: 17px;
        font-weight: 700
    }

    .viewOrderTable tbody tr td:nth-child(1)::before {
        content: "PLAN"
    }

    .viewOrderTable tbody tr td:nth-child(2)::before {
        content: "LINE ITEM"
    }

    .viewOrderTable tbody tr td:nth-child(3)::before {
        content: "QUANTITY"
    }

    .viewOrderTable tbody tr td:nth-child(4)::before {
        content: "PRICE"
    }

    .viewOrderTable tbody tr td:nth-child(5)::before {
        content: "LINE TOTAL"
    }

    .totalCommissions {
        margin: .5rem 0
    }

    .saleCommission,
    .commissionAfterDiscount {
        text-align: end
    }

    .saleCommission p {
        font-size: 15px
    }

    .commissionAfterDiscount p {
        font-size: 15px
    }

    .orderFulfillment h2 {
        font-size: 25px;
        text-align: center
    }

    .orderFulfillment table thead {
        display: none
    }

    .orderFulfillment table tbody tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 25px;
        border-radius: 11px;
        position: relative;
        background: #e3e8ef !important
    }

    .orderFulfillment table tbody tr:last-child {
        margin-bottom: 0
    }

    .orderFulfillment table tbody tr td {
        padding-left: 20px !important;
        padding-right: 20px !important;
        font-size: 16px;
        text-align: end
    }

    .tblInputGrp {
        width: auto !important;
        text-align: start
    }

    .tblInputGrp label {
        display: flex;
        align-items: start
    }

    .orderFulfillment tbody tr td:nth-child(3) span {
        justify-content: flex-end
    }

    .orderFulfillment tbody tr td:first-child {
        border-radius: 11px 11px 0 0 !important;
        text-align: end
    }

    .orderFulfillment tbody tr td:last-child {
        border-radius: 0 0 11px 11px !important;
        padding-bottom: 25px;
        align-items: end
    }

    .orderFulfillment table tbody tr td::before {
        text-align: start;
        color: #19437a;
        font-family: var(--opensans);
        font-size: 17px;
        font-weight: 700;
        position: absolute;
        left: 20px
    }

    .orderFulfillment tbody tr td:nth-child(1)::before {
        content: "PLAN"
    }

    .orderFulfillment tbody tr td:nth-child(2)::before {
        content: "DELIVERABLE"
    }

    .orderFulfillment tbody tr td:nth-child(3)::before {
        content: "STATUS"
    }

    .orderFulfillment tbody tr td:nth-child(4)::before {
        content: "FULFILLMENT TRACKING"
    }

    .backToOrders {
        padding-top: 34px
    }

    .cartSection {
        padding-bottom: 30px;
        padding-top: 10px
    }

    .cartLoginBox p {
        font-size: 14px
    }

    .cartItem .cartItemImgBox {
        margin-right: 20px
    }

    .cartBox .cartBoxHeading {
        display: none
    }

    .totalCartItems .cartItem {
        align-items: flex-start
    }

    .cartItemActions {
        display: none
    }

    .cartItemContent {
        flex-direction: column;
        align-items: flex-start
    }

    .cartItemContent h4 {
        margin-bottom: 0
    }

    .cartItemContent .cartItemPdf {
        margin: 12px 0
    }

    .cartItemContent .cartItemPrice {
        text-align: start
    }

    .checkOutMainCont {
        position: relative;
        padding-bottom: 60px
    }

    .cartCheckoutCont {
        flex-direction: column;
        align-items: center
    }

    .continueShopping {
        position: absolute;
        bottom: 0
    }

    .checkoutDetails {
        width: 100%
    }

    .purchaseAgreementCheckbox {
        justify-content: flex-start
    }

    .checkoutDetails .cartCheckoutBtn {
        margin: 35px auto 0
    }

    .cartCheckoutCont {
        padding: 30px 20px 80px
    }

    .checkoutPayments {
        position: relative
    }

    .checkoutPayments .promoCode {
        margin-bottom: 30px
    }

    .checkoutPayments .paymentWith {
        flex-wrap: wrap;
        justify-content: center;
        position: absolute;
        top: -70px;
        left: 20px;
        right: 20px;
        margin: 0 auto
    }

    .myPlansTable.orderListTable table tbody tr td:nth-child(1)::before {
        content: "ACTIONS:"
    }

    .myPlansTable.orderListTable table tbody tr td:nth-child(2)::before {
        content: "STATUS:"
    }

    .myPlansTable.orderListTable table tbody tr td:nth-child(3)::before {
        content: "ORDER NUMBER:"
    }

    .myPlansTable.orderListTable table tbody tr td:nth-child(4)::before {
        content: "ORDER DATE:"
    }

    .myPlansTable.orderListTable table tbody tr td:nth-child(5)::before {
        content: "CUSTOMER NAME:"
    }

    .myPlansTable.orderListTable table tbody tr td:nth-child(6)::before {
        content: "ABHP PLAN NUMBER:"
    }

    .myPlansTable.orderListTable table tbody tr td:nth-child(7)::before {
        content: "DESIGNER PLAN NAME:"
    }

    .myPlansTable th,
    .myPlansTable td {
        font-size: 15px !important
    }

    .myPlansTable tbody tr:nth-child(2n) {
        background-color: #f6f6f6 !important;
        border: 1px solid #ddd
    }

    .myPlansMainSection {
        padding-top: 0
    }

    td .date-desktop {
        display: none
    }

    td .date-small {
        display: flex;
        align-items: center
    }

    .accountTabContent.tabSmallCoontent .accTabBtns .accTabBtn {
        width: 134px;
        border: 1px solid #e5e5e5;
        margin: 20px 0 0 35px;
        padding: 20px;
        display: flex;
        justify-content: center
    }

    .accountTabContent.tabSmallCoontent .accTabBtns .accTabBtn:nth-child(3) {
        margin: 20px 0 0 30px
    }

    .accountTabContent.tabSmallCoontent .accTabBtns .accTabBtn {
        margin: 15px !important;
        padding: 15px !important
    }

    .updateProfileSection .userActivityContainer {
        padding-bottom: 40px
    }

    .apdateFormRow .updateFormCol {
        width: 100%
    }

    .accountPurchaseSection .userActivityContainer {
        padding: 0 20px 30px
    }

    .browseOrderCards .orderCard {
        flex-direction: column;
        align-items: center;
        padding: 20px
    }

    .orderCard .orderCardImg {
        max-width: 344px
    }

    .orderCard .orderCardDetails {
        padding: 30px 0;
        max-width: 344px
    }

    .accountTabContainer {
        background: #fff;
        padding: 0 !important
    }

    .accountTabContent .accTabBtns {
        padding: 0 0 15px
    }

    .accTabBtns .accProfileTab {
        width: 100%;
        background: #fafafc;
        padding: 0 35px
    }

    .accProfileTab.show .accProfileBox::before {
        display: none
    }

    .accTabBtns .accProfileBox {
        width: 100%;
        background: 0 0;
        padding: 30px 0 10px
    }

    .accTabBtns .accProfileBox span {
        order: 2;
        margin-left: auto;
        margin-right: 10px
    }

    .accTabBtns .accProfileBox .accInfo {
        order: 1
    }

    .accTabBtns .accProfileBox .arrowDropDown {
        order: 3
    }

    .accProfileTab .accProfileDropdown {
        width: 200px;
        right: 20px;
        bottom: -295px;
        left: unset
    }

    #designerProfileDropdown {
        bottom: -247px !important
    }

    .accTabBtns .accTabBtn {
        width: 250px;
        border: 1px solid #e5e5e5;
        margin: 20px 0 0 35px
    }

    .accTabBtnPB {
        margin-bottom: 15px !important
    }

    .accTabBtns .accTabBtn.active {
        border-color: #19437a
    }

    .myPlansTable table {
        width: 100% !important
    }

    .myPlansTable table thead {
        display: none
    }

    .myPlansTable table tbody tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 14px;
        padding: 4px 0;
        border-radius: 11px
    }

    .myPlansTable table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: .5rem;
        grid-row-gap: 1rem;
        padding: .5rem
    }

    .myPlansTable table tbody tr td {
        display: flex;
        flex-direction: column;
        font-size: 15px;
        padding: 0;
        min-height: 45px;
        width: fit-content
    }

    .myPlansTable table tbody tr td::before {
        color: #000;
        font-family: open sans;
        font-size: 15px;
        font-weight: 700
    }

    .favouritePlansSection,
    .accountPurchaseSection {
        padding-top: 0
    }

    .PlansIncluedMainContainer .plansImageBox {
        padding-top: 350px
    }

    .plansIncludeContainer .plansIncludeCard {
        width: unset
    }

    .favouritePlansSection .fovMainContent .fovMainContentHead h2 {
        font-size: 36px
    }

    .framingLayoutsContainer {
        flex-direction: column
    }

    .framingLayoutsContainer img {
        width: 120px;
        height: 120px;
        margin-bottom: 32px
    }

    .framingLayoutsContainer h4 {
        border: none;
        font-size: 20px;
        text-align: center;
        padding: 0;
        line-height: 30px
    }

    .testimonials-container {
        padding: 0 !important;
        margin-top: 25px
    }

    .proServicesCout {
        padding: 76px 0 350px !important;
        text-align: center !important;
        background: url(../img/ProServicesTopHead2.png) !important;
        background-size: cover !important;
        background-position: top !important
    }

    .proServicesSec .proServicesContent h1 {
        font-size: 46px !important;
        text-align: center
    }

    .proTestimonialsCout .testimonialsHead h2 {
        font-size: 36px !important;
        margin-bottom: 40px !important;
        line-height: 42px !important
    }

    .proTestimonialsCout .swiper-slide .proTestimonialsHeadCard h4 {
        font-size: 20px !important;
        margin-bottom: 23px !important
    }

    .proTestimonialsCout .swiper-slide .proTestimonialsHeadCard p {
        font-size: 12px !important;
        line-height: 25px !important;
        margin-bottom: 28px !important
    }

    .proTestimonialsCout .swiper-slide .proTestimonialsHeadCard .testimonialsHeadInnerPro {
        padding-bottom: 31px !important
    }

    .proTestimonialsSec .btn {
        display: none !important
    }

    .supportCout {
        max-width: 100% !important;
        padding: 0 35px !important
    }

    .supportCout .supportPart2 {
        display: none !important
    }

    .supportCout .supportPart1 {
        margin-right: unset !important;
        max-width: 100% !important;
        text-align: center
    }

    .supportCout .supportPart1 h2 {
        font-size: 40px !important;
        margin-bottom: 20px !important
    }

    .supportCout .supportCards {
        margin-top: 40px !important;
        margin-bottom: 60px !important
    }

    .supportCout .supportCard {
        width: 100% !important;
        margin-bottom: 20px !important
    }

    .specialOfferSec {
        padding: 60px 0 !important
    }

    .specialOfferSec .specialOfferCard {
        width: 100% !important;
        margin-bottom: 30px !important
    }

    .specialOfferSec .specialOfferCards {
        margin-top: 40px !important
    }

    .specialOfferHead h2 {
        font-size: 40px !important;
        margin-bottom: 20px !important
    }

    .joinBuildSec {
        padding-top: 60px !important
    }

    .joinBuildSec .joinBuildContentHead {
        flex-wrap: wrap !important
    }

    .joinBuildSec .joinBuildImgHead {
        flex: unset !important;
        width: 100% !important;
        margin-right: unset !important;
        margin-bottom: 50px !important
    }

    .joinBuildSec .joinBuildContent {
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 36px !important
    }

    .joinBuildSec .joinBuildContent h3 {
        font-size: 40px !important;
        margin-bottom: 35px !important
    }

    .joinBuildSec .joinBuildImgHead img {
        height: unset !important
    }

    .joinBuildSec .joinBuildHead h2 {
        font-size: 40px !important;
        margin-bottom: 20px !important
    }

    .joinBuildSec .joinBuildHead {
        margin-bottom: 50px !important
    }

    .whoWeArecout {
        max-width: 100% !important;
        padding: 61px 35px 0 !important
    }

    .whoWeAreSec .whoWeAreContentHead {
        margin-bottom: 43px !important
    }

    .whoWeAreSec .whoWeAreContent {
        max-width: 100% !important;
        margin-right: unset !important;
        text-align: center !important
    }

    .whoWeAreSec .whoWeAreImgHead {
        display: none !important
    }

    .whoWeAreSec .whoWeAreCards .whoWeAreCard {
        width: 32% !important
    }

    .whoWeAreSec .whoWeAreContent p {
        background: url(../img/without-bg-color.png);
        background-size: 180px;
        background-repeat: no-repeat;
        background-position: center 40px
    }

    .whoWeAreSec .whoWeAreContent h2 {
        font-size: 40px !important;
        margin-bottom: 34px !important
    }

    .whoWeAreSec .whoWeAreCards .whoWeAreCard h3 {
        font-size: 14px !important;
        line-height: normal !important
    }

    .whoWeAreSec .whoWeAreCards {
        margin-bottom: 36px !important
    }

    .whoWeAreSec .subtitleHead h3 {
        font-size: 26px !important;
        line-height: 36px !important
    }

    .whoWeAreSec .subtitleHead img {
        margin-bottom: 24px !important;
        width: 37px
    }

    .whoWeAreSec .whoWeAreCards .whoWeAreCard {
        padding: 24px 5px !important
    }

    .ourVisionariesSec {
        padding: 60px 0 !important
    }

    .ourVisionariesSec h3 {
        font-size: 40px !important;
        margin-bottom: 40px !important
    }

    .ourVisionariesSec p {
        margin-bottom: 35px !important
    }

    .ourVisionariesSec .column1,
    .ourVisionariesSec .column2,
    .ourVisionariesSec .column3 .ourVisionariesCard {
        display: none !important
    }

    .ourVisionariesSec .MB-ourVisionariesImagesHead {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .ourVisionariesSec .MB-ourVisionariesImagesHead .MB-ourVisionariesCard {
        width: 32% !important;
        height: 118px !important
    }

    .ourVisionariesSec .MB-ourVisionariesImagesHead .MB-ourVisionariesCard img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        object-fit: cover;
        object-position: center
    }

    .ourStorySec {
        padding-bottom: 60px !important
    }

    .ourStorySec .ourStoryContentHead {
        flex-wrap: wrap !important
    }

    .ourStorySec .ourStoryImgHead {
        flex: unset !important;
        width: 100% !important;
        margin-right: unset !important;
        order: 2 !important
    }

    .ourStorySec .ourStoryContent {
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 36px !important
    }

    .ourStorySec .ourStoryContent h3 {
        font-size: 40px !important;
        margin-bottom: 35px !important
    }

    .ourStorySec .ourStoryImgHead img {
        height: unset !important
    }

    .helpSec {
        padding: 62px 0 0 !important
    }

    .helpCout .head h2 {
        font-size: 36px !important;
        margin-bottom: 25px !important
    }

    .helpCout .head p {
        font-size: 14px !important;
        line-height: 18px !important;
        margin-bottom: 28px !important
    }

    .helpCout .head .inner-services {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important
    }

    .helpCout .head .inner-services span {
        border-right: unset !important;
        border-bottom: 1px solid #e4e4e4;
        padding-right: 0 !important;
        padding-bottom: 26px !important;
        margin-right: 0 !important;
        margin-bottom: 23px !important
    }

    .helpCout .head .inner-services p {
        text-align: center !important;
        font-size: 16px !important;
        line-height: 22px !important
    }

    .exampleModificationSec {
        padding: 62px 35px 0 !important
    }

    .exampleModificationCout .cards {
        width: 100% !important;
        flex-wrap: wrap !important
    }

    .exampleModificationCout .head h2 {
        font-size: 36px !important;
        margin-bottom: 43px !important
    }

    .exampleModificationCout .card-plan {
        width: 100% !important;
        min-height: 540px !important
    }

    .exampleModificationCout .card-plan .imgHead {
        height: 256px !important
    }

    .exampleModificationCout .card-plan:nth-child(1) {
        margin-bottom: 20px !important
    }

    .exampleModificationCout .card-plan .content-services>p {
        font-size: 15px !important;
        line-height: 24px !important
    }

    .exampleModificationCout .card-plan ul li p {
        font-size: 13px !important
    }

    .businessWithUs {
        padding: 46px 35px !important
    }

    .businessWithUs .head h2 {
        font-size: 35px !important;
        margin-bottom: 21px !important;
        line-height: 50px !important
    }

    .businessWithUs .head p {
        line-height: 25px !important
    }

    .contactWrapper {
        background: url(../img/contact-bg-vertical.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
        padding: 55px 0 47px
    }

    .contactFormWrapper {
        height: 1000px
    }

    .contactInnerWrapper {
        top: -220px;
        flex-direction: column;
        height: auto !important
    }

    .contactContent {
        max-width: 100%;
        padding-bottom: 100px
    }

    .formWrapper {
        padding-top: 40px;
        text-align: center
    }

    .viewVideos {
        padding: 30px 0 0;
        flex-wrap: wrap
    }

    .viewVideos .videoBox {
        max-width: 100%;
        width: 100%;
        margin: 0 0 10px !important;
        text-align: center;
        padding: 15px 0
    }

    .viewVideos .videoBox span {
        margin-top: 6px;
        display: block
    }

    .featuresCont {
        padding-top: 10px
    }

    .optCard {
        max-width: 100%
    }

    .costToBuildCalc {
        padding: 50px 0
    }

    .whatYouGetContent h4 {
        text-align: center
    }

    .whatYouGet .whatYouGetCards {
        margin-bottom: 20px
    }

    .whatYouGetCard,
    .getStartedCard {
        max-width: 100% !important;
        flex-direction: column;
        align-items: center !important;
        margin-bottom: 30px;
        text-align: center
    }

    .whatYouGetCard span,
    .getStartedCard span {
        margin: 0 0 15px
    }

    .addToCart {
        margin-bottom: 50px
    }

    .addToCart .cartForm p {
        max-width: 199px;
        text-align: center;
        margin: 0 auto 20px
    }

    .getStarted h4 {
        text-align: center
    }

    .StartBuildCont {
        padding-top: 40px
    }

    .accountsSecCout .head p {
        width: 100% !important;
        line-height: 24px !important
    }

    .accountsSecCout {
        padding: 50px 14px 40px !important
    }

    .accountsSecCout .head h2 {
        font-size: 33px !important;
        line-height: 40px !important;
        margin-bottom: 15px
    }

    .accountsSecCout .head {
        margin-bottom: 25px !important
    }

    .accountsSecCout .btnHead {
        margin-top: 35px !important
    }

    .modificationSec {
        background: #f7f7f7 !important
    }

    .modificationCout .content-head {
        width: 100% !important;
        text-align: center !important
    }

    .modificationCout .content-head .inner-services {
        flex-direction: column !important
    }

    .modificationCout .content-head .inner-services span {
        margin-right: unset !important;
        border-right: unset !important;
        border-bottom: 1px solid #e4e4e4;
        padding-right: unset !important;
        padding-bottom: 16px
    }

    .modificationCout .content-head .inner-services span img {
        transform: unset !important
    }

    .modificationCout .content-head h1 {
        margin-bottom: 24px !important;
        font-size: 36px !important;
        width: auto !important;
        margin: 0 auto
    }

    .modificationCout .content-head h2 {
        font-size: 22px !important;
        margin-bottom: 0 !important
    }

    .modificationCout .content-head>p {
        line-height: 18px !important;
        font-size: 14px !important
    }

    .modificationCout .content-head .inner-services {
        margin-top: 42px !important
    }

    .processCout {
        padding: 62px 0 !important
    }

    .processCout .head h2 {
        text-align: center;
        font-size: 36px !important;
        line-height: 45px
    }

    .processCout .steps-head .card-plan .titleHead {
        padding-right: unset !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 26px !important
    }

    .processCout .steps-head .card-plan .iconHead {
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 43px !important
    }

    .processCout .steps-head .card-plan .titleHead span {
        margin-right: 0 !important;
        margin-bottom: 17px !important
    }

    .processCout .steps-head .card-plan .titleHead h3 {
        font-size: 22px !important
    }

    .processCout .steps-head .card-plan .descriptionHead p {
        font-size: 14px !important;
        line-height: 18px !important;
        text-align: center
    }

    .processCout .steps-head .card-plan .descriptionHead .innerCard {
        padding: 32px 10px !important
    }

    .processCout .steps-head .card-plan .descriptionHead {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .processCout .steps-head .card-plan .descriptionHead {
        padding: 0 !important
    }

    .processCout .head {
        margin-bottom: unset !important
    }

    .processCout .steps-head .card-plan {
        margin-bottom: 0 !important;
        padding: 50px 0 !important
    }

    .processCout .steps-head .card-plan:last-child {
        padding-bottom: unset !important;
        border-bottom: unset !important
    }

    .mainHeadingContainer {
        padding: 0 0
    }

    .savedCard .searchedFilters {
        justify-content: flex-start
    }
}

@media screen and (max-width:700px) {
    .favouritePlansSection .fovMainContent .fovMainContentHead {
        flex-direction: column;
        row-gap: 20px
    }

    .favouritePlansSection .fovMainContent {
        padding-top: 10px !important
    }
}

@media screen and (max-width:657px) {
    .favouritePlansSection .fovCard .swiper-slide img {}
}

@media screen and (max-width:600px) {
    .accountTabContent .accTabBtns {
        justify-content: space-between !important
    }

    .accTabBtns .accTabBtn {
        margin: 15px 10px 0 !important
    }
}

.savedCards .savedCard {
    margin-right: 0
}

@media screen and (min-width:445px) and (max-width:768px) {
    .cDHeaderBox a {
        width: 50%
    }
}

@media screen and (max-width:576px) {
    .empty-cart-buttons button {
        width: 160px !important;
        font-size: 14px
    }

    .favouritePlansSection .fovCards {
        width: 100% !important
    }

    .customerDashboardSection .fovCards .swiper-container {
        padding-left: 20px;
        padding-right: 20px
    }

    .viewOrderTable table tbody tr td::before,
    .viewOrderTable table tbody tr td {
        font-size: 14px
    }

    .viewVideos {
        padding: 10px 0 0
    }

    .FavoritePlans .fovCards {
        padding-left: 30px;
        padding-right: 30px
    }

    .viewVideos .videoBox {
        padding-top: 20px
    }

    .proDetailsContent .proInnerContent img {
        width: 28px;
        height: 28px
    }

    .FavoritePlans .fovCards {
        padding-left: 50px;
        padding-right: 50px
    }

    .CompGrid {
        padding: 30px 35px 20px
    }

    .fovCard .swiper-button-prev,
    .fovCard .swiper-button-next {
        display: none !important
    }

    .FavoritePlans .fovMainContent.favSecMain {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .FavoritePlans .fovCards {
        padding-left: 0;
        padding-right: 0
    }

    .FavoritePlans .customerDashboardSection .fovCards.browseHistory .historySwiper .outer-swiper-button-next {
        right: 10px !important
    }

    .FavoritePlans .customerDashboardSection .fovCards.browseHistory .historySwiper .outer-swiper-button-prev {
        left: 10px !important
    }

    .fovMainContent.favSecMain {
        padding-left: 35px !important;
        padding-right: 35px !important
    }

    .estimatingCostMainContainer {
        padding: 0 10px
    }

    .costToBuild .costToBuildContent h2 {
        font-size: 30px
    }

    .houseplansIncludesCards .houseplansIncludesCard {
        width: 100%
    }

    .drawUpHouseCardHeading {
        flex-direction: column;
        text-align: center
    }

    .drawUpHouseCardHeading img {
        margin-right: 0;
        margin-bottom: 10px
    }

    .drawUpHouseCard p {
        text-align: center
    }

    .perfectGarageMain .perfectGaragePlansPart1.perfectGaragePlansInverse,
    .perfectGarageMain .perfectGaragePlansPart1.perfectGaragePlansInverse2 {
        width: 100%
    }

    .perfectGarageMain .perfectGaragePlansPart1.perfectGaragePlansInverse img,
    .perfectGarageMain .perfectGaragePlansPart1.perfectGaragePlansInverse2 img {
        height: 400px;
        object-fit: cover;
        border-radius: 25px
    }

    .perfectGaragePlansNewMain .perfectGaragePlansNew:nth-child(odd) {
        padding: 20px
    }

    .accountPurchaseSection .accPurchaseContent.UserOrdersSec {
        padding: 40px 0 !important
    }

    .UserOrdersSec .userActivityContainer {
        padding: 0 20px
    }

    .UserOrdersSec .BrowseHistorySecSection {
        padding: 0 5px
    }

    .UserOrdersSec .BrowseHistorySecSection .historySwiper.swiper .swiper-container {
        padding: 30px 28px !Important
    }

    .mainHeadingContainer .headingContainer h1 {
        line-height: normal;
        margin-bottom: 10px
    }

    .customerDashboard.orderDetailsMainContainer {
        padding: 20px 0 50px !important
    }

    .orderBillAndShipContainer {
        display: block
    }

    .orderDetailsContainer {
        border-radius: 0;
        padding: 30px 35px
    }

    .orderBillAndShipContainer .orderBillandShip {
        width: 100%
    }

    .orderShipping h5 {
        border-top: 1px solid #e5e5e5
    }

    .orderDetailTable {
        margin-top: 24px
    }

    .orderDetailTable1 thead {
        display: none
    }

    .orderDetailTable1 table tbody tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 24px;
        border-radius: 11px;
        position: relative
    }

    .orderDetailTable1 table tbody tr td {
        text-align: start !important;
        padding: 10px 0;
        font-size: 15px;
        margin-left: 140px
    }

    .orderDetailTable1 table tbody tr td::before {
        color: #000;
        font-family: var(--asap);
        font-size: 13px;
        font-weight: 600;
        position: absolute;
        left: 0;
        text-transform: uppercase
    }

    .orderDetailTable1 tbody tr td:nth-child(1)::before {
        content: "Order Number"
    }

    .orderDetailTable1 tbody tr td:nth-child(2)::before {
        content: "Order Date"
    }

    .orderDetailTable1 tbody tr td:nth-child(3)::before {
        content: "Order Status"
    }

    .orderDetailTable1 tbody tr td:nth-child(4)::before {
        content: "Customer ID"
    }

    .orderDetailTable2 table {
        position: relative
    }

    .orderDetailTable2 .orderItemHeader {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 30px
    }

    .item-sm h5 {
        max-width: 140px;
        width: 140px;
        color: #000;
        font-family: var(--asap);
        font-size: 13px;
        font-weight: 600;
        margin: 0;
        text-transform: uppercase
    }

    .item-sm p {
        color: #404040;
        font-family: var(--OpenSans-semiBold);
        font-size: 15px;
        font-weight: 400;
        margin: 0
    }

    .orderDetailTable2 table th:first-child,
    .orderDetailTable2 table td:first-child {
        display: none
    }

    .orderDetailTable2 table td:first-child {
        content: "Customer ID";
        color: #000;
        font-family: var(--asap);
        font-size: 13px;
        font-weight: 600;
        position: absolute;
        left: 0
    }

    .orderDetailTable2 table th:last-child,
    .orderDetailTable2 table td:last-child {
        display: none
    }

    .orderDetailTable2 table th {
        background: 0 0;
        color: #000;
        font-family: var(--asap);
        font-size: 13px;
        font-weight: 600;
        font-style: normal;
        padding: 0 0 20px
    }

    .orderDetailTable2 table td {
        padding: 0 0 20px;
        font-size: 15px
    }

    .orderDetailTable2 table th:nth-child(4),
    .orderDetailTable2 table td:nth-child(4) {
        text-align: end
    }

    tr.item-sm {
        display: block
    }

    .totalAmountContainer {
        justify-content: flex-start
    }

    .totalAmountContainer ul {
        max-width: 100%;
        padding-right: 0
    }

    .totalAmountContainer ul li {
        text-align: start
    }

    .totalAmountContainer ul li span {
        width: fit-content !important
    }

    .totalAmountContainer ul li span:nth-child(2) {
        margin-left: 10px
    }

    .architecturalStylesHeadingCont p {
        margin-top: 0
    }

    .customerDashboardSection .customerDashboard {
        padding: 10px 15px !important
    }

    .BrowseHistorySecSection .customerDashboard {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .customerDashboardSection .fovCards.browseHistory .historySwiper .outer-swiper-button-prev {
        left: 10px !important
    }

    .customerDashboardSection .swiper-container .outer-swiper-button-next {
        right: 5px !important
    }

    .customerDashboardSection .swiper-container .outer-swiper-button-prev {
        left: 5px !important
    }

    .customerDashboardSection .fovCards.browseHistory .historySwiper .outer-swiper-button-prev {
        left: 5px !important
    }

    .customerDashboardSection .fovCards.browseHistory .historySwiper .outer-swiper-button-next {
        right: 5px !important
    }

    .benefitsGarageImg {
        height: 280px !important
    }

    .garageTestimonialMain .garageTestimonialHead h2 {
        margin-bottom: 25px !important
    }

    .perfectGarageMain .perfectGarageHead h2 {
        font-size: 38px !important
    }

    .perfectGarageMain .perfectGaragePlans h4 {
        font-size: 38px !important;
        line-height: 50px !important
    }

    .garagePlansSection {
        padding: 60px 0 !important
    }

    .garagePlansContent {
        padding-top: 40px !important
    }

    .garagePlansContent .garagePlansCard {
        width: 100% !important
    }

    .garagePlansContent .garagePlansCard .garagePlansOverlay {
        width: 75% !important;
        bottom: 35px !important
    }

    .benefitsGarageContent {
        padding-top: 30px !important
    }

    .productGalleryImages .swiper-button-next,
    .productGalleryImages .swiper-button-prev {
        top: 25%
    }

    .codesSection .checkPlanDetailPage {
        height: auto;
        background-size: cover;
        background-position: top
    }

    .selectingPakage h2 {
        font-size: 40px
    }

    .selectingPakage .selectingHeading h2 {
        font-size: 40px
    }

    .selectingOptionsSection .commonCodeRequirements {
        margin-top: 0 !important
    }

    .commonCodeRequirements {
        padding: 60px 35px;
        margin-top: 40px
    }

    .selectingOptionsSection .commonCodeRequirements {
        margin-top: 0 !important
    }

    .commonCodeRequirementsHeading h2 {
        font-size: 40px
    }

    .commonCodeRequirements {
        padding: 60px 35px;
        margin-top: 40px
    }

    .PlansIncluedMainContainer .plansImageBox {
        padding-top: 400px
    }

    .commonCodeRequirementsHeading h2 {
        font-size: 40px
    }

    .commonCodeRequirements {
        padding: 60px 35px;
        margin-top: 40px
    }

    .termsSection {
        margin-top: 40px
    }

    .termsContainer h2 {
        font-size: 40px
    }

    .accTabBtns .accTabBtn {
        font-size: 14px;
        font-weight: 500
    }

    .proCustomerDashboard .cDHeaderBox p {
        font-size: 12px
    }

    .proCustomerDashboard .cDHeaderBox h5 {
        width: 140px;
        font-size: 12px;
        margin-right: 30px
    }

    .proCustomerDashboard .cDHeaderBox .cDHeaderContent {
        width: 100%;
        text-align: start
    }

    .privacyPolicySection {
        padding-top: 30px
    }

    .privacyPolicySection .privacyPolicy .privacyPolicyHead h2 {
        font-size: 40px !important
    }

    .privacyPolicySection .privacyPolicy .privacyPolicyHead {
        margin-bottom: 30px !important
    }

    .customerDashboardSection .customerDashboard .customerDashboardHead h2 {
        font-size: 30px !important;
        margin-bottom: 10px;
        text-align: center
    }

    .customerDashboardSection .customerDashboard .customerDashboardHead p {
        margin-bottom: 10px
    }

    .customerDashboardSection .customerDashboard .customerDashboardHead {
        margin-bottom: 0 !important;
        align-items: center
    }

    .customerDashboardSection .searchActionBtns button {
        width: 45%;
        font-size: 12px;
        padding: 0
    }

    .viewOrderSection .viewOrder .viewOrderHead h2 {
        font-size: 24px !important
    }

    .viewOrderSection .viewOrder .viewOrderHead {
        margin-bottom: .5rem !important
    }

    .orderFulfillment table tbody tr td {
        margin-left: auto;
        width: 175px
    }

    .orderFulfillment table tbody tr td:last-child {
        margin-left: auto;
        width: 170px
    }

    .orderFulfillment table tbody tr td label {
        font-size: 14px
    }

    .orderFulfillment table tbody tr td::before {
        width: 100px;
        font-size: 14px
    }

    .orderFulfillment tbody tr td:nth-child(3) span {
        justify-content: flex-start
    }

    .orderFulfillment tbody tr td:first-child,
    .orderFulfillment table tbody tr td,
    .orderFulfillment tbody tr td:last-child {
        text-align: start
    }

    .orderFulfillment table td {
        font-size: 14px !important
    }

    .orderFulfillment tbody tr td:last-child button {
        width: 129px !important
    }

    .cartHead h2 {
        font-size: 36px !important;
        text-align: center;
        margin-bottom: 0
    }

    .cartItem .cartItemImg {
        width: 150px
    }

    .cartItemImgBox h5 {
        font-size: 15px
    }

    .cartItemContent .cartItemPdf {
        margin-top: 6px
    }

    .cartItemContent h4 {
        font-size: 16px
    }

    .cartItemContent p {
        font-size: 12px
    }

    .applyPromo input {
        width: 100%;
        flex: 1
    }

    .savedSearchesSection .savedSearches .savedSearchesHead h2 {
        font-size: 36px !important;
        margin-bottom: 10px
    }

    .myPlansSection .myPlans .myPlansHead h2 {
        font-size: 36px !important;
        margin-bottom: 10px
    }

    .myPlansSection .myPlans .myPlansHead {
        margin-bottom: 0
    }

    .myPlansSection .myPlans {
        padding: 0 35px !important
    }

    .myPlansSection .myPlans .myPlansHead p {
        margin-bottom: 20px
    }

    .updateProfileSection .updateProfile .updateProfileHead h2 {
        font-size: 36px !important;
        margin-bottom: 20px
    }

    .updateProfileSection .updateProfile .updateProfileHead {
        margin-bottom: 30px !important;
        align-items: center
    }

    .updateProfileSection .updateProfile {
        padding: 40px 35px !important
    }

    .updateProfileSection .updateProfile .updateProfileHead p {
        text-align: center;
        margin-bottom: 5px
    }

    .orderInnerDetails p {
        font-size: 17px;
        line-height: 23px
    }

    .orderInnerDetails p span {
        font-size: 16px;
        line-height: 32px
    }

    .orderInnerDetails .orderItems h5 {
        font-size: 17px;
        line-height: 32px
    }

    .orderInnerDetails .orderItems ul li {
        font-size: 15px;
        line-height: 32px
    }

    .orderInnerDetails .orderItems a {
        font-size: 17px
    }

    .accountPurchaseSection .accPurchaseContent .accountPurchaseHead h2 {
        font-size: 36px !important;
        margin-bottom: 10px;
        text-align: center
    }

    .accountPurchaseSection .accPurchaseContent .accountPurchaseHead {
        margin-bottom: 30px !important
    }

    .accountPurchaseSection .accPurchaseContent {
        padding: 40px 35px !important
    }

    .accTabBtns .accProfileTab {
        padding: 0 26px
    }

    .accTabBtns .accTabBtn {
        width: 190px;
        padding: 10px !important;
        margin: 15px 0 0 35px
    }

    .favouritePlansSection .fovCard {
        margin-bottom: 40px !important;
        margin-right: 0 !important
    }

    .customerDashboardSection .fovCards .fovCard {
        margin-bottom: 10px
    }

    .customerDashboardSection.BrowseHistorySecSection .fovCards .fovCard {
        margin-bottom: 30px !important
    }

    .favouritePlansSection .fovMainContent .fovMainContentHead {
        margin-bottom: 10px !important
    }

    .customerDashboardSection.BrowseHistorySecSection .favCardsHead h5 {
        margin-bottom: 0 !important
    }

    .favouritePlansSection .fovMainContent {
        padding: 20px 0 0 !important
    }

    .fovMainContent.favSecMain {
        padding-left: 50px !important;
        padding-right: 50px !important
    }

    .PlansIncluedMainContainer {
        padding: 50px 0 0
    }

    .whatDoPlansInclude .plansIncludeHeading h2 {
        font-size: 40px;
        line-height: 50px
    }

    .uniquePlansOfDesigners {
        padding: 10px 35px
    }

    .uniquePlansOfDesigners h2 {
        font-size: 40px;
        text-align: center;
        line-height: 44px
    }

    .uniquePlansOfDesigners .uniquePlansImages .planImageBox {
        padding: 14px 8px
    }

    .uniquePlansOfDesigners .uniquePlansImages .planImageBox h5 {
        text-align: center;
        font-size: 13px
    }

    .checkPlanDetailPage .checkPlanTopBox {
        flex-direction: column
    }

    .checkPlanDetailPage .checkPlanTopBox img {
        width: 100px !important;
        margin-bottom: 30px;
        border: none;
        height: 68px;
        flex: inherit
    }

    .checkPlanDetailPage .checkPlanTopBox h4 {
        text-align: center;
        margin-bottom: 17px;
        padding: 0
    }

    .checkPlanDetailPage p {
        text-align: center;
        font-size: 18px;
        margin: 0
    }

    .notTypicallyIncludedSection {
        padding: 60px 35px
    }

    .PlansIncluedMainContainer .plansImageBox {
        padding-top: 400px
    }

    .typicallyIncludedHeading h2 {
        font-size: 40px
    }

    .typicallyPlansItems .typItem {
        width: 50%;
        margin-bottom: 48px
    }

    .typItem .typItemContent {
        width: 280px;
        height: fit-content
    }

    .typicallyPlansItems .typItem:nth-child(4) .typItemContent {
        right: 0;
        left: unset
    }

    .typicallyPlansItems .typItem:nth-child(4) .typItemContent::after {
        right: 70px;
        left: unset
    }

    .typicallyPlansItems .typItem:nth-child(odd) .typItemContent {
        left: 0
    }

    .typicallyPlansItems .typItem:nth-child(odd) .typItemContent::after {
        left: 70px
    }

    .typicallyPlansItems .typItem:nth-child(7) .typItemContent {
        left: -130%;
        right: unset;
        margin: 0 auto
    }

    .typicallyPlansItems .typItem:nth-child(7) .typItemContent::after {
        left: 0;
        right: 0;
        margin: 0 auto
    }

    .plansComesStamped {
        padding: 60px 35px
    }

    .stampedContent h2 {
        font-size: 40px !important;
        line-height: 50px !important;
        text-align: center
    }

    .stampedContent p {
        line-height: 24px !important;
        text-align: center
    }

    img.listing-img {
        height: 50vh;
        object-fit: cover;
        object-position: -32px 0;
        border-radius: 24px
    }

    .viewVideos .videoBox h4 {
        font-size: 14px;
        font-weight: 600
    }

    .viewVideos .videoBox span {
        font-size: 12px
    }

    .proServicesSec {
        padding-top: 50px
    }

    .publishSec {
        padding: 60px 0 24px
    }

    .businessWithUs {
        padding: 20px 35px !important
    }

    .accountsSecCout form .input-group .input-head {
        width: 100% !important
    }

    .accountsSecCout .detail {
        text-align: center
    }

    .houseImgHead {
        width: 100%;
        position: relative;
        padding-top: 50px;
        overflow: hidden !important
    }

    .houseImgHead img {
        transform: scale(1.2)
    }

    .accountsSecCout form label {
        margin-top: 10px !important;
        display: block
    }

    .proTestimonialsCout .testimonialsHead h2 {
        margin-bottom: 25px !important
    }

    .joinBuildSec .joinBuildContent h3 {
        margin-bottom: 25px !important
    }

    .accountsSec,
    .estimatingCostSec,
    .contactWrapper {
        padding: 15px 35px 0 !important
    }

    .whoWeArecout {
        padding: 25px 35px 0 !important
    }

    .whoWeAreSec .whoWeAreCards .whoWeAreCard h3 {
        font-size: 13px !important;
        line-height: normal !important
    }

    .ourVisionariesSec h3 {
        margin-bottom: 25px !important
    }

    .ourStorySec .ourStoryContent h3 {
        margin-bottom: 25px !important
    }

    .exampleModificationCout .card-plan h4 {
        font-size: 20px !important
    }

    .modificationCout .content-head h2 {
        line-height: 30px;
        margin-bottom: 15px !important
    }

    .title_terms {
        font-size: 28px;
        padding: 80px 0 0
    }

    .exampleModificationCout .card-plan ul li p {
        font-size: 12px !important
    }

    .exampleModificationCout .head h2 {
        font-size: 30px !important
    }

    .modificationCout .content-head .inner-services p {
        font-size: 19px
    }

    .modificationSec {
        padding-top: 50px
    }

    .StartBuildCont .headingPara {
        text-align: center;
        font-size: 16px;
        line-height: 22px
    }

    .StartBuildCards .StartBuildCard {
        width: 100%;
        margin-bottom: 30px
    }

    .StartBuildCard .StartBuildCardContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center
    }

    .StartBuildCard h6 {
        max-width: 100%;
        text-align: center
    }

    .publishSec,
    .estimatingCostSec,
    .mainHeadingContainer {
        margin-top: 0
    }

    .publishSec .content_head {
        background: url(../img/header-small-bg.jpg) !important;
        background-size: cover !important;
        background-position: center !important
    }

    .accountsSecCout .detail {
        text-align: center
    }

    .accountsSecCout {
        padding: 50px 14px 30px !important
    }

    .contactFormWrapper {
        height: 1200px
    }

    .contactMainWrapper {
        padding-top: 40px
    }

    .contactWrapper {
        height: 480px
    }

    .contactWrapper .contactHeading h1 {
        font-size: 36px
    }

    .contactWrapper .contactHeading p {
        font-size: 14px;
        line-height: 18px
    }

    .formWrapper .col6 {
        width: 100%
    }

    .formWrapper .inputGroup {
        margin-bottom: 0
    }

    .formWrapper .inputGroup .inputBox {
        margin-bottom: 18px
    }

    .formWrapper p {
        font-size: 12px
    }

    .formWrapper .inputBox label {
        font-size: 13px
    }

    input::placeholder {
        font-size: 13px !important
    }

    .featuresCont h2 {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        line-height: 26px
    }

    .featuresCards .featureCard {
        width: 100%;
        margin-bottom: 30px
    }

    .featureCard .featureCardContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center
    }

    .featureCard h6 {
        max-width: 92%;
        text-align: center
    }

    .reportCard {
        padding: 12px 20px;
        margin-top: 25px
    }

    .optionCards {
        padding: 50px 0
    }

    .optCard {
        max-width: 85%;
        margin-left: auto !important;
        margin-right: auto !important
    }

    .optCard.blueCard {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .optCard .imgBox {
        padding: 20px
    }

    .optCard .optContent {
        padding: 0 5px 0 20px
    }

    .reportCard h5 {
        font-size: 14px;
        text-align: center;
        line-height: 20px;
        max-width: 270px;
        margin: auto
    }

    .optContent h3 {
        font-size: 24px
    }

    .optContent p {
        font-size: 12px
    }

    .companyOfcTimings .compCntTiming {
        flex-direction: column
    }

    .companyOfcTimings .compCntTiming ul {
        width: 100% !important;
        padding: 0 !important;
        border: none !important
    }
}

@media screen and (min-width:768px) {
    .companyInfoCard {
        width: 47.5% !important
    }
}

@media screen and (max-width:452px) {
    .proCustomerDashboard .cDHeaderBox {
        justify-content: space-between !important
    }

    .proCustomerDashboard .cDHeaderBox .cDHeaderContent {
        width: 60%;
        text-align: start
    }

    .proCustomerDashboard .cDHeaderBox h5 {
        width: 47%;
        margin-right: 10px
    }

    .customerDashboardSection .savedCards .savedCard {
        max-width: 90%;
        width: 90%;
        margin: 0 auto
    }

    .companyOfcTimings .compCntTiming ul {
        width: 100%
    }
}

@media screen and (max-width:890px) {
    h3.PlanOptions {
        height: 110px
    }
}

@media screen and (max-width:505px) {
    h3.PlanOptions {
        height: auto
    }
}

@media screen and (max-width:480px) {
    .cartLoginBox h3 {
        font-size: 18px;
        text-align: center
    }

    .customerDashboardSection .swiper-container {
        padding-top: 10px !important
    }

    .customerDashboardSection .favCardsHead {
        margin-top: 0
    }

    .customerDashboardSection .swiper-container {
        padding-bottom: 0;
        overflow: visible
    }

    .favouritePlansSection .fovCard .swiper:hover .swiper-button-next,
    .favouritePlansSection .fovCard .swiper:hover .swiper-button-prev {
        visibility: hidden
    }

    .featuresCont h2 {
        font-size: 16px
    }

    .processDetailCard .proDetailImg {
        margin-left: -30px;
        width: 100%
    }

    .whoWeAreSec .subtitleHead h3 {
        font-size: 16px !important;
        line-height: 28px !important
    }

    .favouritePlansSection .fovMainContent .fovMainContentHead .inputGroup {
        flex-direction: column;
        row-gap: 20px
    }

    .favouritePlansSection .fovMainContent .fovMainContentHead .inputGroup {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important
    }

    .searchActionBtns .runSearchBtn {
        width: 116px;
        margin: 0 8px
    }

    .searchActionBtns button {
        font-size: 13px
    }

    .perfectGarageMain .perfectGaragePlansPart2 {
        margin-top: 35px
    }

    .perfectGarageMain .perfectGaragePlans h6 {
        font-size: 20px
    }

    .processDetails {
        width: 80% !important
    }

    .processContainer .processHeading h3 {
        width: 70%
    }

    .productGalleryImages .swiper-button-next,
    .productGalleryImages .swiper-button-prev {
        top: 18%
    }

    .companyInfoContainer .companyInfoCards {
        padding: 0 5px
    }

    .companyInfoCard {
        padding: 20px 5px !important
    }

    .companyInfoCard:nth-child(3) p {
        font-size: 11px
    }

    .viewOrderDetails {
        padding: 1rem
    }

    .viewOrderHeadings {
        grid-template-columns: repeat(2, 1fr);
        row-gap: .5rem;
        margin-bottom: 1rem
    }

    .viewOrderHeadings .viewOrderHeading p {
        font-size: 12px
    }

    .orderBillingAndShipping {
        column-gap: 1rem;
        margin-bottom: 1rem
    }

    .billingShippingContent li {
        font-size: 12px
    }

    .viewOrderTable table tbody tr td::before,
    .billingShippingContent h4,
    .viewOrderHeadings .viewOrderHeading h4 {
        font-size: 12px
    }

    .viewOrderTable table tbody tr {
        grid-template-columns: repeat(1, auto)
    }

    .viewOrderTable table tbody tr td {
        font-size: 12px
    }

    .orderFulfillment tbody tr td:last-child button {
        height: 28px;
        font-size: 13px;
        font-weight: 500
    }

    .accTabBtns .accTabBtn {
        width: 180px
    }

    .purchaseAgreementCheckbox label {
        font-size: 13px
    }

    .myPlansTable table {
        width: 100% !important;
        margin: 0 auto;
        position: relative
    }

    .myPlansSection .myPlans {
        padding: 0 20px !important
    }

    .updateProfileSection .updateProfile {
        padding: 40px 20px !important
    }

    .updateFormCol .checkboxGroup label {
        font-size: 13px
    }

    .favouritePlansSection .fovCard .fovHouseRatingHead h6 {
        font-size: 12px !important;
        margin-right: 2px !important
    }

    .favouritePlansSection .fovCard .fovPersonalNote h6 {
        font-size: 12px !important
    }

    .favouritePlansSection .fovCard .fovPersonalNote button {
        width: 80px !important;
        font-size: 10px !important
    }

    .favouritePlansSection .fovCard .fovCardtitleHead p {
        line-height: unset !important
    }

    .fovPaginationHead ul li {
        width: 23px !important;
        height: 23px !important;
        margin: 0 5px !important;
        font-size: 12px !important
    }

    .fovPaginationHead ul li {
        font-size: 12px !important
    }

    .checkPlanDetailPage {
        background: url(../img/checkPlans-sm.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover
    }

    .framingLayoutsSection {
        background: url(../img/checkPlans-sm.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover
    }

    .checkPlanDetailPage .checkPlanDetailInner {
        padding: 50px 35px
    }

    .framingLayoutsContainer {
        padding: 50px 35px
    }

    .orderFulfillment table tbody tr td::before,
    .orderFulfillment table td {
        font-size: 12px !important
    }

    .favouritePlansSection .fovCard {
        width: 100%
    }

    .favouritePlansSection .fovCard .swiper {
        height: auto
    }

    .favouritePlansSection .fovCard .swiper {
        width: calc(100vw - 40px);
        height: calc(66vw - 40px);
        max-width: 100%
    }
}

@media screen and (max-width:444px) {
    .empty-cart-buttons button {
        width: 135px !important;
        font-size: 12px
    }

    .orderDetailsContainer {
        padding: 30px 10px
    }

    .orderDetailTable2 table th {
        font-size: 11px
    }

    .orderDetailTable2 table td,
    .totalAmountContainer ul li.totalAmountLi span,
    .totalAmountContainer ul li span {
        font-size: 13px
    }

    .companyContactCards .companyOfcTimings {
        padding: 20px !important
    }

    .accTabBtns .accTabBtn {
        font-size: 14px;
        font-weight: 500;
        width: 160px;
        padding: 7px 8px !important;
        margin: 15px 0 0 30px
    }

    .orderFulfillment table tbody tr td {
        margin-left: auto
    }

    .orderFulfillment table tbody tr td:last-child {
        margin-left: auto
    }
}

@media screen and (max-width:390px) {
    .orderFulfillment table tbody tr td {
        padding-left: 0 !important;
        padding-right: 8px !important
    }

    .orderBillingAndShipping {
        flex-direction: column;
        row-gap: 1rem
    }

    .viewOrderTable table tbody {
        grid-template-columns: repeat(1, auto)
    }

    .orderFulfillment table tbody tr td,
    .orderFulfillment table tbody tr td:last-child {
        width: 145px
    }

    .productGalleryTabs a {
        margin-right: 10px;
        font-size: 10px
    }

    .updateFormCol .checkboxGroup label {
        font-size: 12px
    }

    .perfectGarageMain .perfectGaragePlans h6 {
        font-size: 18px
    }

    .perfectGarageSection {
        padding: 40px 0 !important
    }

    .proFormCol-quar label::after {
        justify-content: end;
        padding-right: 30px
    }

    .productGalleryImages .swiper-button-next,
    .productGalleryImages .swiper-button-prev {
        width: 15px;
        height: 25px
    }

    .productGalleryImages .swiper-button-next {
        top: 15%
    }

    .orderSummaryBox .orderVisual {
        flex-direction: column;
        align-items: flex-start
    }

    .orderVisual .orderVisualImg {
        margin-right: 0;
        width: 100%;
        margin-bottom: 20px
    }

    .orderVisual .orderVisualImg img {
        width: 100%;
        height: 150px;
        object-fit: cover
    }

    .companyContactCards .companyOfcTimings {
        padding: 10px !important
    }

    .accountDashboard .cDHeaderBoxTop h5 {
        font-size: 12px
    }

    .accountDashboard .cDHeaderBox p {
        font-size: 12px
    }

    .accountDashboard .cDHeaderBoxTop a {
        font-size: 12px
    }

    .companyInfoCard {
        width: 100% !important;
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px !important
    }

    .accTabBtns .accTabBtn {
        width: 150px;
        font-size: 13px;
        padding: 8px 6px !important;
        margin: 15px 0 0 30px
    }

    .promoCode {
        width: 100%
    }

    .applyPromo {
        flex-direction: column;
        align-items: center
    }

    .applyPromo input {
        flex: unset
    }

    .applyPromo button {
        margin: 15px 0 0
    }

    .cartItemImgBox {
        width: 50%
    }

    .cartItem .cartItemImg {
        width: 100%
    }

    .searchActionBtns {
        align-items: flex-start !important
    }

    .myPlansTable table tbody tr {
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: .5rem
    }

    .myPlansTable table tbody tr td::before {
        font-size: 13px !important
    }

    .myPlansTable table tbody tr td {
        font-size: 13px !important
    }

    .viewVideos .videoBox span {
        font-size: 11px
    }

    .supportCout .supportCard {
        flex-direction: column;
        text-align: center
    }

    .supportCout .supportCard span {
        border-right: unset !important;
        border-bottom: 2px solid #e5e5e5 !important;
        margin-right: unset !important;
        padding: 0 20px 20px !important;
        margin-bottom: 20px !important
    }

    .supportCout .supportCard2 span {
        border-right: unset !important;
        border-bottom: 2px solid #305687 !important
    }

    .contactContent h2 {
        font-size: 16px
    }

    .optCard {
        max-width: 95%
    }

    .contactContent ul li,
    .contactContent ul li a {
        font-size: 13px
    }
}

@media screen and (max-width:360px) {
    .orderConfirmHeading-sm h2 {
        font-size: 32px
    }

    .perfectGarageMain .perfectGaragePlansPart1 {
        flex-direction: column;
        align-items: flex-start
    }

    .perfectGarageMain .perfectGaragePlansPart1 div {
        width: 100%
    }
}

@media screen and (max-width:320px) {
    .globalBreadcrumbsContainer button {
        height: 48px;
        padding: 10px 38px 10px 22px;
        font-size: 12px
    }

    .globalBreadcrumbsContainer button.active::before {
        width: 32px;
        height: 32px
    }

    .uniquePlansOfDesigners .uniquePlansImages {
        flex-wrap: wrap
    }

    .uniquePlansOfDesigners .uniquePlansImages .planImageBox {
        width: 95%;
        margin-bottom: 20px
    }

    .contactContent h2 {
        font-size: 14px
    }

    .contactContent p {
        font-size: 10px
    }

    .contactContent ul li,
    .contactContent ul li a {
        font-size: 11px
    }

    .contactWrapper .contactHeading p {
        font-size: 11px
    }
}

.featureImagecost img{
    width: 80px;
}
.text-justify{
    text-align: justify!important;
}