* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
}

body{overflow-x: hidden;}

.topContain {
    background: #fefbec;
    overflow: hidden;
    padding-bottom: 40px;
}

.topBar {
    margin-top: 30px;
}
.navbarwrapper{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
}

.logo {
    width: 377px;
}
.logo a{cursor: pointer;}

.logo img {
    width: 100%;
}

.navbar {
    width: calc(100% - 480px);
    display: flex;
    justify-content: flex-end;
}

.navbar ul {
    margin: 0;
    padding: 0;
}

.navbar ul li {
    list-style: none;
    display: inline-block;
    margin: 0 23px;
}

.navbar ul li:last-of-type a i{ margin-left: 20px;   color: #ff0000;}

.navbar ul li a {
    font-size: 18px;
    color: #484e50;
    text-decoration: none;
    position: relative;
    padding: 0 10px;
    cursor: pointer;
}


.navbar ul li a::after, .navbar ul li a.avtive::after {
   content: '';
   position: absolute;
   width: 100%;
   transform: scaleX(0);
   height: 2px;
   bottom: -5px;
   left: 0;
   background-color: #ff0000;
   transform-origin: bottom right;
   transition: transform 0.25s ease-out;
 }
 .navbar ul li a.avtive::after {
    transform: scaleX(1);
   transform-origin: bottom left;
  }

 
 .navbar ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
 }
 .navbar ul li a.avtive:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
.navbar ul li a:hover{
    color: #ff0000;
}

.navbar ul li a.avtive {
    color: #ff0000;
}

.bannerblock {
    padding-bottom: 10px;
}
.bannerwrapper{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
}

.bannerright {
    width: 1000px;
}

.bannerright img {
    width: 100%;
    display: block;
}

.bannerleft {
    width: calc(100% - 1020px);
}

.bannerleft h1 {
    margin: 0 !important;
    padding: 0;
    font-size: 40px !important;
    color: #404b4f;
    line-height: 49px !important;
    font-weight: 500 !important;
}

.bannerleft p {
    margin: 0 !important;
    padding: 40px 0 0 0;
    font-size: 38px;
    line-height: 40px;
    color: #607c87;
}

.bannerleft a {
    display: inline-block;
    font-size: 24px;
    color: #ffffff;
    background: #f25444;
    border: solid 8px #fefcef;
    box-shadow: 0 0 2px #ccc;
    border-radius: 40px;
    padding: 10px 23px 14px 23px;
    text-decoration: none;
    line-height: 35px;
    margin-top: 35px;
}

.bannerLine {
    height: 5px;
    background: #d2ccb5;
}

.block2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.block2_sub {
    width: 20%;
}

.block2_sub:nth-of-type(1) {
    background: rgb(10, 182, 195);
    background: linear-gradient(90deg, rgba(10, 182, 195, 1) 0%, rgba(0, 128, 139, 1) 100%);
}

.block2_sub:nth-of-type(2) {
    background: rgb(163, 215, 29);
    background: linear-gradient(90deg, rgba(163, 215, 29, 1) 0%, rgba(135, 199, 21, 1) 100%);
}

.block2_sub:nth-of-type(3) {
    background: rgb(251, 195, 15);
    background: linear-gradient(90deg, rgba(251, 195, 15, 1) 0%, rgba(252, 165, 11, 1) 100%);
}

.block2_sub:nth-of-type(4) {
    background: rgb(140, 33, 104);
    background: linear-gradient(90deg, rgba(140, 33, 104, 1) 0%, rgba(98, 3, 78, 1) 100%);
}

.block2_sub:nth-of-type(5) {
    background: rgb(79, 39, 111);
    background: linear-gradient(90deg, rgba(79, 39, 111, 1) 0%, rgba(39, 16, 87, 1) 100%);
}

.block2_sub div {
    background: url(https://all-frontend-assets.s3.amazonaws.com/createtexia/images/block2_img1.webp);
    padding: 25px;
    font-size: 25px;
    line-height: 30px;
    color: #ffffff;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}

.block2about {
    background: #feffff;
    border-bottom: solid 5px #b1d1df;
    padding: 40px 0;
}

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

.block2abLeft {
    width: 719px;
}

.block2abLeft img {
    width: 100%;
    background-blend-mode: multiply;
}

.block2abRight {
    width: calc(100% - 780px);
    /* display: flex;
    flex-direction: column;
    justify-content: space-between; */
}

.block2abRighttop {
   margin-bottom: 30px;
}

.block2abRight h2 {
    margin: 0;
    padding: 0;
    font-size: 48px !important;
    color: #121212;
    font-weight: normal;
}

.block2abRight p {
    font-size: 18px;
    line-height: 30px;
    color: #19191a;
    margin: 30px 0 0 0;
}

.block2abRight a {
    display: block;
    font-size: 24px;
    color: #ffffff;
    background: #f25444;
    border: solid 8px #fff;
    box-shadow: 0 0 2px #ccc;
    border-radius: 40px;
    padding: 10px 23px 14px 23px;
    text-decoration: none;
    line-height: 35px;
    width: 250px;
    text-align: center;
}

.block2abRightlink {
    display: flex;
    justify-content: flex-end;
}

.block3 {
    background: #f2f9fe;
    padding: 40px 0;
}

.block3 h2 {
    text-align: center;
    font-size: 48px !important;
    color: #121212;
    font-weight: normal;
}

.block3 .blck3flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: top;
    margin-top: 40px;
}

.block3Sub {
    width: calc(25% - 6px);
    margin: 3px 2px;
    background: #e4edf3;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
}

.block3Sub h3 {
    font-size: 30px !important;
    line-height: 34px !important;
    color: #393f44;
    border-left: solid 5px #f25444;
    font-weight: normal;
    padding: 0 0 0 10px;
    height: 80px;
    display: flex;
    align-items: center;
    font-weight: 500 !important;
}

.block3Sub p {
    font-size: 18px;
    color: #181e22;
    line-height: 30px;
    margin-top: 30px;
}

.block3Sub a {
    display: block;
    font-size: 24px;
    color: #ffffff;
    background: #f25444;
    border: solid 8px #fff;
    box-shadow: 0 0 2px #ccc;
    border-radius: 40px;
    padding: 10px 23px 14px 23px;
    text-decoration: none;
    line-height: 35px;
    max-width: 250px;
    text-align: center;
    margin-top: 30px;
}

.block4 {
    background: #ffffff;
    padding: 40px 0;
}

.blck4text {
    width: min(90%, 900px);
    margin: 0 auto;
}

.blck4text h2 {
    text-align: center;
    font-size: 48px !important;
    color: #121212;
    font-weight: normal;
}

.blck4text h3 {
    font-size: 18px;
    color: #181e22;
    line-height: 30px;
    margin-top: 30px;
    margin: 0;
    padding: 20px 0 0 0;
    font-weight: normal;
    text-align: center;
}


.blck4flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
}

.blck4flex .block4_sub {
    width: 25%;
    border-bottom: solid 1px #c4c6ca;
    padding: 10px 0; 
}
.blck4flex .block4_sub img{max-width: 100%;}

.blck4flex .block4_sub:nth-last-child(-n + 4) {
    border-bottom: none;
}

.blck4flex .block4_sub .block4-inner-wrapper .icon-wrapper{
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.blck4flex .block4_sub .block4-inner-wrapper .icon-wrapper img{display: block;max-width: 100%;}
.blck4flex .block4_sub .block4-inner-wrapper {
    border-right: solid 1px #c4c6ca;
    /* display: flex;
    flex-direction: column;
    flex-wrap: wrap;  */
    padding: 10px;
    height: 100%;     
    /* justify-content: space-between;
    align-items: center;   */
}

.blck4flex .block4_sub:nth-of-type(4) .block4-inner-wrapper,
.blck4flex .block4_sub:nth-of-type(8) .block4-inner-wrapper, .blck4flex .block4_sub:nth-of-type(12) .block4-inner-wrapper { border-right: none;}

.blck4flex .block4_sub .block4-inner-wrapper label{ display: block; font-size: 24px; color: #4e4e4e;text-align: center;
    line-height: 27px;}

.block5{ background: #f4f0ed; padding: 80px 0; text-align: center;}

.block5 h2 {
   text-align: center;
   font-size: 48px !important;
   line-height: 52px !important;
   color: #3e403e;
   font-weight: normal;
}

.block5 ul{ margin: 40px 0 0 0;}
.block5 ul li{ list-style: none; display: inline-block; margin: 4px;}

.contact_block{   padding: 40px 0; position: relative;}

.contact_block .wrapper{ display: flex; flex-wrap: wrap; justify-content: space-between;  align-items: flex-start; margin-top: 40px;}

.contact_block h2 {
   text-align: center;
   font-size: 48px !important;
   color: #121212;
   font-weight: normal;
}
.innercontact{ position: relative;}
.footerconIMG {
   position: absolute;
   top: -10px;
   left: 80%;
   z-index: 5;
}

.contact_left{ width: 704px; height: 350px; border: solid 24px #c0cddc; border-radius: 10px; position: relative; z-index: 9; }
.contact_left iframe{ width: 100%; height: 100%;  }

.contact_right{ width: 520px; position: relative; z-index: 9;}

.formWrapper{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.formsub2{ width: 48%;}
.formsub1{ width: 100%; margin-top: 20px;}
.contact_right label{ display: block; font-size: 18px; color: #3e403e;}
.contact_right input[type="text"], .contact_right input[type="email"]{ width: 100%; height:35px; padding: 10px; border: solid 1px #a5a7a9; outline: none; margin-top: 10px;}
.contact_right textarea{ width: 100%; height:80px; resize: none; padding: 10px; border: solid 1px #a5a7a9; outline: none; margin-top: 10px;}


.contact_right button{
   display: block;
   font-size: 24px;
   color: #ffffff;
   background: #f25444;
   border: solid 8px #fff;
   box-shadow: 0 0 2px #ccc;
   border-radius: 40px;
   padding: 10px 23px 14px 23px;
   text-decoration: none;
   line-height: 35px;
   width: 250px;
   text-align: center;
   margin-top: 20px;
   cursor: pointer;
}

.block6{ 
   background:#0f1218 url(https://all-frontend-assets.s3.amazonaws.com/createtexia/images/whyusBG.webp) no-repeat center top;
   /* padding-top: 35%; */
   background-size: cover;
   overflow: hidden;
}

.block6 h2 {
   text-align: center;
   font-size: 48px !important;
   color: #ffffff;
   font-weight: normal; position: relative;z-index: 1;
}
.block6 .line {width: 240px; height: 5px; background: #f25444; margin: 0px auto; margin-top: 30px; display: block; position: relative;z-index: 1;}


.block6_con{ padding: 60px 0 50px 0;}

.block6_bottom{ 
    margin: 0 10%; margin-top: 20px; text-align: center; padding-bottom: 0px;
}

.block6_bottom h3 {
   text-align: center;
   font-size: 36px !important;
   color: #ffffff;
   font-weight: normal; position: relative;
}
.block6_con_img img{display: block;max-width: 100%;}
.block6_con_img {margin-top: -120px;margin-bottom: -100px;position: relative;}

.light-1, .light-2 {
    height: 16px;
    width: 16px;
    background: #ffffff;
    position: absolute;
    left: 31%;
    top: 45%;
    border-radius: 50%;
    filter: blur(2px);
    animation: preloader-animation 4s linear infinite ;
}
.light-2{
    left: 8.7%;
    top: 26.3%;
    height: 12px;
    width: 12px;
}
.light-1:after, .light-2:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    filter: blur(12px);
}

.light-1::before, .light-2::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    filter: blur(9px);
}

@keyframes preloader-animation{
    from{
      opacity: 0;
    }
   50%, 20%, 80%{
      opacity: 1;
    }
    to{
      opacity: 0;      
    }
  }

.block6_bottom h4 {
   text-align: center;
   font-size: 18px !important; line-height: 30px !important;
   color: #97a7b3;
   font-weight: normal; position: relative; margin-top: 40px;
}

.block-6-numberwrapper {
    position: relative;
    color: #fff;
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
}
.numbvercol {
    padding: 10px 35px;
    margin: 10px 35px;
    position: relative;
    text-align: center;
}
.numbvercol h1{
    font-family: "Agdasima", sans-serif !important;
    font-size: 72px !important;
    font-weight: 500 !important;
    margin-bottom: 15px !important;
    line-height: 75px !important;
}
.numbvercol h1 strong{
    color: #f25444;
}
.numbvercol h3{
    font-weight: 400 !important;
    text-transform: uppercase;
    font-size: 18px !important;
    color: #a6a8ac;
    margin: 0 !important;
}
.numbvercol::after{
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    right: -35px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #454444;
}
.numbvercol:last-child::after{display: none;}

.footer1{ background:#202331 url(https://all-frontend-assets.s3.amazonaws.com/createtexia/images/footer_bg_new.webp) no-repeat; background-size: cover;}

.footer1 .wrapper{ padding: 40px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}

.footeeSub1{ width: 284px;}
.footeeSub3{ width: 250px;}
.footeeSub2{ width:calc(100% - 750px);}

.footeeSub3 a{ color: #fff; text-decoration: none; padding: 0 10px 0 0; font-size: 20px;}
.footeeSub3 a:hover{ color: #f25444;}

.footer1 h3{ margin: 0 0 20px 0; padding: 0; text-transform: uppercase; color: #9da4b5; font-size: 24px;}
.footer1 p{ margin: 0 0 20px 0; padding: 0; color: #9da4b5;}
.footer1 p:last-of-type{ margin: 0;}
.footer1 p a{  color: #9da4b5; text-decoration: none;}
.footer1 p a:hover{ color: #f25444;}
.footer2{ background: #000000;}
.footer2 .wrapper{ padding: 15px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.footer2 .wrapper span{ color: #fff;  font-size: 14px;}
.footer2 .wrapper label{ font-size: 24px; color: #f25444;}

#scrollToTopBtn {
   display: none;
   position: fixed;
   bottom: 20px;
   right: 20px;
   background-color: #2e3135;
   color: #fff;
   border: none;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   text-align: center;
   font-size: 24px;
   cursor: pointer; line-height: 40px;
   transition: opacity 0.3s ease-in-out; text-decoration: none;
}

#scrollToTopBtn.show {
   display: block;
}

.wrapper{ width: min(90%,1520px); margin: 0 auto;}








/*------------------services Page----------------------*/
.innerpage{ background: #fff; padding: 0;}

.services_banner_block{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;  flex-direction: row-reverse;}

.Sbanner_IMG{ width: 510px;}
.Sbanner_IMG img{ width: 100%;}

.Sbanner_text{ width: calc(100% - 600px);}

.Sbanner_text h2{ margin: 0; padding: 0; font-size: 52px !important; line-height: 54px !important; color: #404b4f;}

.Sbanner_text p{ margin: 0; padding: 20px 0 0 0; font-size: 40px;line-height: 45px; color: #607c87;}

.services_banner_bottom{ width: 100%; position: relative; min-height: 10px;}

.services_banner_bottom a{display: inline-block;
   font-size: 24px;
   color: #ffffff;
   background: #f25444;
   border: solid 8px #fff;
   box-shadow: 0 0 2px #ccc;
   border-radius: 40px;
   padding: 10px 23px 14px 23px;
   text-decoration: none;
   line-height: 35px;
}

.services_banner_bottom::after{ position: absolute; content: ''; width: calc(100% - 400px); height: 5px; background: #d1cbb3; top: 50%; right: 0;}

.services_block2{ margin-top: 50px; position: relative; padding-bottom: 50px;}

.services_block2::after{ position: absolute; content: ''; width: calc(100% - 400px); height: 5px; background: #d1cbb3;   left: 0; bottom: 0;}


.services_block2 .flexcon{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;}

.services_blockleft{ width: 595px;}

.services_blockleft img{ width: 100%;}

.services_blockright{ width: calc(100% - 650px);}
.qa-testing-title{margin-top: 30px;}
.services_blockright label, .qa-testing-title label{    font-size: 18px;
   line-height: 30px;
   color: #19191a; border-left: solid 5px #f25444; padding-left: 30px; display: block; margin-bottom: 50px;}

.services_blockright p{    font-size: 18px;
   line-height: 30px;
   color: #19191a; padding-bottom: 30px; margin: 0 !important;}

.services_blockright p:last-of-type{ padding: 0;}


.services_blockright ul {
    margin: 10px 0 0 0;
    padding: 0;
}

.services_blockright ul li{list-style: none; margin: 0 0 10px 0; position: relative; padding-left:30px;}

.services_blockright ul li::before{ content: ''; width: 15px; height: 15px; background: #f25444; position: absolute; left: 0; top: 4px;}

.services_blockright  strong{ display: block;   font-size: 18px;
   line-height: 30px;
   color: #19191a;}

.services_blockright h2{ font-size: 24px !important; color: #f25444; font-weight: normal; padding-bottom: 10px;}


.services_block3{ margin-top: 50px; position: relative; padding-bottom: 50px;}

.services_block3::after{ position: absolute; content: ''; width: calc(100% - 400px); height: 5px; background: #d1cbb3;   right: 0; bottom: 0;}

.services_block3 .flexcon{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; flex-direction: row-reverse;}


.services_block4{ margin-top: 50px; position: relative; padding-bottom: 50px;}

.services_block4::after{ position: absolute; content: ''; width: calc(100% - 400px); height: 5px; background: #d1cbb3;   left: 0; bottom: 0;}

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


.services_block5{ margin-top: 50px; position: relative; padding-bottom: 50px;}

/* .services_block5::after{ position: absolute; content: ''; width: calc(100% - 400px); height: 5px; background: #d1cbb3;   right: 0; bottom: 0;} */

.services_block5 .flexcon{ display: flex; flex-wrap: wrap; justify-content: space-between;  align-items: center; flex-direction: row-reverse;  }


.services_block6{   position: relative; padding-bottom: 50px;}

.services_block6::after{ position: absolute; content: ''; width: calc(100% - 400px); height: 5px; background: #d1cbb3;   right: 0; bottom: 0;}

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

.services_block7{ padding: 50px 0;}

.services_block7 h2{ font-size: 42px !important; color: #607c87;}
.services_block7 label{ font-size:30px; color: #515252; font-weight: 500;}

.services_block7 ul{ margin: 0; padding: 50px 0 0 0;}
.services_block7 ul li{ list-style: none; display: inline-block; margin: 5px; margin-right: 10px;}

.services_block8{ background: #f15343; padding: 15px; font-size: 30px; color: #fff; font-weight: 600;
    padding: 50px 0; width: 85%; position: relative; }

    .services_block8 p{
        font-size: 30px !important; line-height: 34px !important; color: #fff; font-weight: 600 !important; margin: 0 !important;
    }


.contact_avter{ width: 470px; height: 398px; position: absolute; bottom: 0; left: 40%; overflow: hidden;}

.contact_avter img{ display: block; margin: 0 auto; position: relative; z-index: 2;}

.contact_avter span{ display: block; background: #e5edf3; width: 470px; height: 470px; position: absolute; left: 0; bottom: -110px; border-radius: 100%;} 


@media only screen and (max-width: 1600px) {
  .services_block2 .services_blockright label{ margin-left: -630px;}
  .contact_avter{left: 38%;}
}

@media only screen and (max-width: 1560px) { 
   .contact_avter{left: 35%;}
}

@media only screen and (max-width: 1460px) { 
   .contact_avter{left: 32%;}
}


@media only screen and (max-width: 1366px) {
    .block6_con_img {
        margin-top: -70px;
        margin-bottom: -40px;
    }
}
@media only screen and (max-width: 1199px) {

   .footerconIMG{ display: none;}
   .services_block2 .services_blockright label{ margin-left: 0px;}

   .services_block2 .flexcon{ display: block;}
   .services_block3 .flexcon{ display: block;}
   .services_block4 .flexcon{ display: block;}
   .services_block5 .flexcon{ display: block;}
   .services_block6 .flexcon{ display: block;} 

   .services_blockleft {  width: auto;  margin-bottom: 20px; }
   .services_blockleft img{ width: auto; max-width: 100%; display: block; margin: 0 auto;}

   .services_blockright {  width: auto;     margin-bottom: 35px; }


   .services_block2::after{ width: 100%;}
   .services_block3::after{ width: 100%;}
   .services_block4::after{ width: 100%;}
   .services_block5::after{ width: 100%;}
   .services_block6::after{ width: 100%;} 

   .services_block2{ padding-bottom: 10px;}
   .services_block3{ padding-bottom: 10px;}
   .services_block4{ padding-bottom: 10px;}
   .services_block5{ padding-bottom: 10px;}
   .services_block6{ padding-bottom: 10px;}

   .services_banner_block{ display: block;}

   .Sbanner_IMG { width: auto;  }
   .Sbanner_IMG img{ width: auto; max-width: 100%; display: block; margin: 0 auto;}
   .Sbanner_text { width: auto;  padding: 15px 0; }

   .services_block8{ width: 100%;}
}

@media only screen and (max-width: 767px) {
   .services_banner_bottom::after{ display: none;}
   .Sbanner_text h2{ font-size: 40px !important;}
   .Sbanner_text p{ font-size: 30px;}
}

.topBar.navbar_scrolled {
   position: fixed;
   /* top: -200px; */
   z-index: 99;
   left: 0;
   width: 100%;
   background: #fff;
   margin: 0;
   padding: 16px 0px;
   opacity: 0;
   animation-name: navAnimation;
   animation-duration: 1s;
   animation-fill-mode: forwards;
   box-shadow: 1px 1px 37px #0000005e;
}
@keyframes navAnimation{
   0%{
       top: -200px;
       opacity: 0;
   }
   100%{
       top: 0;
       opacity: 1;
   }
}

.navbar_scrolled .logo {
   width: 245px;
   transition: all 0.3s;
}

.menuIcon{display: none;}


@media only screen and (max-width: 1800px) {
   .bannerleft {
       width: calc(100% - 770px);
   }
   .bannerright {
       width: 730px;
   }
}

@media only screen and (max-width: 1560px) {
   .bannerleft {
       width: calc(100% - 670px);
   }
   .bannerright {
       width: 630px;
   }
}

@media only screen and (max-width: 1620px) {
   .contact_left {
       width: calc(100% - 770px);
   }
   .contact_block {
       background-position: 48% bottom ;
   }
}
@media only screen and (max-width: 1440px) {
   .block3Sub a{
       padding: 8px 23px 10px 23px;
       border: solid 5px #fff;
       max-width: 205px;
   }
}
@media only screen and (max-width: 1420px) {
   .bannerleft h1 {
       font-size: 36px;
       line-height: 45px;
   }
   .bannerleft p {
       font-size: 32px;
       line-height: 36px;
       padding: 30px 0 0 0;
   }
   .bannerleft {
       width: calc(100% - 580px);
   }
   .bannerright {
       width: 560px;
   }
}
@media only screen and (max-width: 1400px) {
    .numbvercol {
        padding: 10px 20px;
        margin: 10px 20px;
    }
    .numbvercol::after{
        right: -20px;
    }
   .logo {
       width: 260px;
   }
   .navbar {
       width: calc(100% - 280px);
   }
}
@media only screen and (max-width: 1366px) {
   .block3Sub {width: calc(33.33% - 6px);}
   .contact_right {
       width: 385px;
   }
   .contact_block {
       background-position: 55% bottom;
   }
   .contact_left {
       width: calc(100% - 682px);
   }
}
@media only screen and (max-width: 1300px) {
   .navbar ul li {
       margin: 0 20px;
   }
   .blck4flex .block4_sub .block4-inner-wrapper {
    border-right: solid 1px #c4c6ca !important;
}
.blck4flex .block4_sub:nth-last-child(-n + 4) {
    border-bottom: solid 1px #c4c6ca;
}
.blck4flex .block4_sub {
    width: 33.33%;
}
.blck4flex .block4_sub:nth-child(3) .block4-inner-wrapper, 
.blck4flex .block4_sub:nth-child(6) .block4-inner-wrapper, 
.blck4flex .block4_sub:nth-child(9) .block4-inner-wrapper, .blck4flex .block4_sub:nth-child(12) .block4-inner-wrapper{border-right: 0 !important;}

.blck4flex .block4_sub:nth-last-child(1), .blck4flex .block4_sub:nth-last-child(2), .blck4flex .block4_sub:nth-last-child(3){border: 0;}
}
@media only screen and (max-width: 1199px) {
    .numbvercol h1 {
        font-size: 54px !important;
        line-height: 46px !important;
    }
    .numbvercol {
        padding: 10px 10px;
        margin: 10px 10px;
    }
    .numbvercol::after {
        right: -10px;
    }
    .block6_bottom {
        margin: 0 0%;}
    .numbvercol h3{font-size: 16px !important;}
    .navbar ul li {
        margin: 0 8px;
    }
   .block2abLeft {
       width: 100%;
   }
   .block2abRight {
       width: calc(100%);
   }
   .block2_sub {
       width: auto;
       flex: 1 0 33.33%;
   }
   .block2about{
       padding-top: 0;
   }
   .contact_left{
       border: solid 8px #c0cddc;
       width: calc(100% - 624px);
   }
   .contact_block {
       background-position: 48% bottom;
   }
   .footer2 .wrapper{
       flex-direction: column;
   }
   .footeeSub2 {
       width: calc(100% - 615px);
   }
   .navbar {
    width: calc(100% - 260px);
}
.navbar ul {
    width: 100%;
    text-align: right;
}
}
@media only screen and (max-width: 1024px) {
    .logo {
        width: 170px;
    }
    .navbar {
        width: calc(100% - 170px);
    }
}
@media only screen and (max-width: 1100px) {

   .contact_avter{ left: 0;}
   .contact_left {
       border: solid 8px #c0cddc;
       width: calc(100%);
   }
   .contact_right {
       width: 385px;
       margin: 34px 0 0 auto;
   }
   .contact_block {
       background-position: 12% bottom;
   }
   .footer2 .wrapper label{text-align: center;}
}
@media only screen and (max-width: 991px) {
   .footeeSub3 {
       width: 180px;
   }
   .footeeSub2 {
       width: calc(100% - 485px);
   }
   .contact_block {
       background-position: 2% bottom;
   }    
   .topBar, .topBar.navbar_scrolled {
    margin-top: 0;
    background: #ffffff;
    padding: 15px 0;
    position: relative;
    box-shadow: 1px 1px 8px rgba(0,0,0,0.2);
   }
   .navbar_scrolled .logo, .logo {
       width: 100%;
       transition: all 0.3s;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   .navbar {
       width: calc(100%);
       display: block;
       padding: 14px 0;
   }
   .navbar ul li {
       margin: 10px 20px;
       display: block;
       border-bottom: 1px solid #e7e7e7;
       padding-bottom: 10px;
       text-align: center;
   }
   .navbar ul li:last-child{border: 0;}
   .navbar_scrolled .logo img, .logo img{width: 180px;}
   .block3Sub {width: calc(50% - 6px);}
   .menuIcon {
       display: block;
       background: #e1dec8;
       padding: 10px;
       border-radius: 8px;
       width: fit-content;
       font-size: 26px;
   }
   .navbar{display: none;}
   .navbar.show{display: block;}
   .bannerwrapper{
       flex-direction: column-reverse;
   }
   .bannerleft {
       width: calc(100%);
   }
   .bannerleft p {
       padding: 14px 0 0 0;
   }
   .bannerright {
       width: 100%;
       border-bottom: 4px solid #d2ccb5;
       padding-bottom: 0px;
       margin-bottom: 15px;
   }
   .bannerLine{display: none;}
   .topContain {
    padding-bottom: 20px;

}
.block-6-numberwrapper{flex-wrap: wrap;}
.numbvercol {
    padding: 10px 10px;
    margin: 10px 10px;
    width: calc(50% - 40px);
}
.numbvercol:nth-child(even)::after{display: none;}
.block6_con_img {
    margin-top: 0px;
    margin-bottom: -10px;
}
.bannerleft a{    margin-top: 25px;}
}
@media only screen and (max-width: 940px) {
   .block6_bottom {
       /* margin-top: 422px; */
   }
}
@media only screen and (max-width: 840px) {
   .contact_block {
       background-position: -27% bottom;
   }
}

@media only screen and (max-width: 767px) {
    .block2_sub {
        width: auto;
        flex: 1 0 50%;
    }
   .contact_avter{ display: none;}
   .blck4flex .block4_sub .block4-inner-wrapper, .blck4flex .block4_sub{
       border: 0 !important;
   }
   .blck4flex .block4_sub {
       width: calc(50% - 20px);
       padding: 26px;
       background: #fff;
       box-shadow: 7px 9px 22px #e7e0e0;
       margin: 10px;
   }
   .blck4flex .block4_sub div{    height: 197px;}
   .block6 h2{
       font-size: 32px !important;
   }
   .block6_bottom {
       /* margin-top: 512px; */
   }
   .contact_block {
       background-position: -27% bottom;
       background: none;
   }
   .block3Sub {width: calc(100% - 6px);}
   .contact_right {
       width: auto;
       margin: 34px 0 0 auto;
       padding: 31px;
       background: #f4f0ed;
       border-radius: 5px;
       border: 1px solid #dadad9;
   }
   .footeeSub1 {
       width: 100%;
       margin-bottom: 20px;
   }
   .footeeSub2 {
       width: calc(100%);
       margin-bottom: 20px;
   }
   .footeeSub3 {
       width: 100%;
   }   

   .block5 h2{
       font-size: 32px !important;
       line-height: 36px !important;
   }
}

@media only screen and (max-width: 580px) {
    .block6_con_img {
        margin-top: 0px;
        margin-bottom: 0;
    }
    .block-6-numberwrapper{
        margin-bottom: 60px;
    }
    .numbvercol {
        padding: 10px 0px;
        margin: 10px 0px;
        width: 100%;
    }
    .numbvercol::after{display: none;}
}
@media only screen and (max-width: 520px) {
   .blck4flex .block4_sub {
       width: calc(100% - 20px);}
}

.image-modal-wrapper {
    padding: 20px;
    background: #fff;
    border: 7px solid #ff7b00;
    border-radius: 4px;
    max-height: 90vh;
    overflow: hidden;
    overflow-y: auto;
}


.image-modal-wrapper::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.image-modal-wrapper::-webkit-scrollbar
{
	width: 5px;
	background-color: #F5F5F5;
}

.image-modal-wrapper::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #1f0505;
}
.image-modal-wrapper img{display: block;max-width: 100%;}

.closButton {
    position: absolute;
    right: -10px;
    top: -10px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 3px solid #ff7b00;
    background: #fff;
    cursor: pointer;
    outline: none;
}
.ImageModal .mat-mdc-dialog-surface{
overflow: inherit;
}

.img-wrapper{background:#fff;padding:5px;box-shadow:1px 2px 6px #e7d7cd;cursor: pointer;}
.img-wrapper img{display:block;max-width:100%}
.title h2{text-align:center;margin-top:10px;color:#9a7159;font-size:33px !important}
.portfolio-item-mainwrapper{display:flex;justify-content:center;flex-wrap:wrap}
.portfolio-item{width:calc(33.33% - 30px);margin:15px}

@media only screen and (max-width: 1199px) {
    .portfolio-item{width:calc(50% - 30px);margin:15px}
    
}


@media only screen and (max-width: 767px) {
    .portfolio-item {
        width: calc(100% - 30px);
        margin: 15px;
    }
    
}


.ck-editor__editable_inline {
    min-height: 200px;
  }


  /* ------------------------- form css start ------------------------------- */
.form-wrapper {
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    /* box-shadow: 5px 5px 20px #0000001c; */
  }
  .modal-form-subwrapper {
    width: min(90%, 1000px);
    display: block;
    margin: 0 auto;
}
  .form-col-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0px;
    padding: 20px;
    background: #cfdbe0;
    border: 1px solid #a1afb4;
    border-radius: 8px;
    box-shadow: 5px 5px 20px #0000001c;
  }
  .submitBtn{
    background-color: #d23504 !important;
    padding: 15px 60px !important;
    color: #fff !important;
  }
  
  .input-wrapper {  
    margin: 2px 10px;
  }
  .input-wrapper.col-1{width: calc(100% - 20px);}
  .input-wrapper.col-2{width: calc(50% - 20px);}
  .input-wrapper.col-3{width: calc(33.33% - 20px);}
  .input-wrapper .mat-mdc-form-field{width: 100%;}
  .input-wrapper .mdc-line-ripple{display: none;}
  .input-wrapper .mat-mdc-text-field-wrapper{
    background-color: #f3f6fa !important;
      border: 1px solid #d1d4d9;
      border-radius: 5px;
      box-shadow: 3px 3px 8px #31548330;
  }
  .form-button-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .form-button-wrapper button {
    height: auto !important;
    padding: 13px 30px;
    font-size: 20px;
    background-color: #f25444 !important;
    color: #ffffff !important;
    box-shadow: var(--form-button-shadow);
    margin: 0 5px;
  }
  .mat-mdc-form-field-focus-overlay{display: none !important;}

  .uploader-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f3f6fa;
    padding: 10px;
    background-color: #f3f6fa !important;
    border: 1px solid #d1d4d9;
    border-radius: 5px;
    box-shadow: 3px 3px 8px #31548330;
    margin-bottom: 20px;
  }
  .modal-main-style .mat-mdc-dialog-title{
    background: var( --modal-title-bg);
    text-align: center;
    padding: 15px 15px;
    text-transform: uppercase;
    margin: 0;
  }
  .modal-main-style .mat-mdc-dialog-title::before{display: none;}
  .modal-main-style .mat-mdc-dialog-container .mat-mdc-dialog-surface{
    border: 8px solid var(--modal-border-color);
    border-radius: 8px;
    overflow: inherit;
  }



  input[type="file"] {
    position: relative;
  }
  
  input[type="file"]::file-selector-button {
    width: 136px;
    color: transparent;
  }
  
  /* Faked label styles and icon */
  input[type="file"]::before {
    position: absolute;
    pointer-events: none;
    top: 10px;
    left: 16px;
    height: 20px;
    width: 20px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
  }
  
  input[type="file"]::after {
    position: absolute;
    pointer-events: none;
    top: 11px;
    left: 40px;
    color: #0964b0;
    content: "Upload File";
  }
  
  /* ------- From Step 1 ------- */
  
  /* file upload button */
  input[type="file"]::file-selector-button {
    border-radius: 4px;
    padding: 0 16px;
    height: 40px;
    cursor: pointer;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
    margin-right: 16px;
    transition: background-color 200ms;
  }
  
  /* file upload button hover state */
  input[type="file"]::file-selector-button:hover {
    background-color: #f3f4f6;
  }
  
  /* file upload button active state */
  input[type="file"]::file-selector-button:active {
    background-color: #e5e7eb;
  }
  .add-blog-title{
    background: #3c6474;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
  }
  .add-blog-title h2{
    text-align: center;
    margin: 0 !important;
    font-size: 30px !important;
    text-transform: uppercase;
    color: #fff;
  }
 

  /* ------------------------- form css End -------------------------------- */