/*========================================================
	Main Style for Portfolio 2022
=========================================================*/
/* colors declaration */
:root {
  --white: #fff;
  --black: #111;
  --light-black: #333;
  --blue: #3147f4; /* old purple color #9331f4 */
  --grey: #707070;
  --formgrey: #f4f4f4;
  --bloghead: #555;
  --line-white: #eee;
}

/* fonts declaration */
@font-face {
  font-family: barricada;
  src: url('../fonts/barricada.ttf');
}

/* reset */
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
abbr,
address,
em,
img,
sub,
sup,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption,
article,
aside,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

*:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

input[type='submit'] {
  -webkit-appearance: none;
  border-radius: 0;
}

/* end reset */

/***********************************************************************************************/

/* common layout sections  - ALL common layouts for frame exist in this section */
body {
  font-size: 21px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  color: #111;
}

p {
  line-height: 1.2;
  font-family: 'Barlow', arial, sans-serif;
}


/***********************************************************************************************/

/* common styling */
h1,
h2,
h3 {

}

h1 {

}

h2,
h3 {

}
a {
    transition: background-color 0.25s ease-in, border-color ease-in, transform 0.75s cubic-bezier(0.44, 0.51, 0.24, 0.99), box-shadow 1s cubic-bezier(0.44, 0.51, 0.24, 0.99);
}

/* end common styling */
@media only screen and (min-width: 1920px) and (max-width: 2559px) {

}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {

}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  h2, h3 {
  	font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {

}
@media only screen and (max-width: 767px) {

}
@media only screen and (max-width: 479px) {

}

/*========================================================
									TOP & NAVIGATION
=========================================================*/
/* not display on large screen */
.smobitrigger,
.mnuclose,
.menu ul li.mlogo,
.logoMob,
.telMob,
.menu ul li.mphone,
.menu ul li.madr,
.menu ul li.mhours,
.menu ul li.msocial,
.menu ul li.mmlink,
.menu ul li.maddress,
.fooRight ul li.mlogo,
.fooRight ul li.mphone,
.fooRight ul li.madr,
.fooRight ul li.mhours,
.fooRight ul li.msocial,
.fooRight ul li.mmlink,
.fooRight ul li.maddress {
  display: none;
}

/* end not display */

/* main frames */
.pageFull {
  width: 100%;
}
.centerSize,
.pageSize {
  width: 75%;
  margin: 0 auto;
  max-width: 1200px;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .centerSize,
  .pageSize {
    width: 90%;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .centerSize,
  .pageSize {
    width: 90%;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .centerSize,
  .pageSize {
    width: 90%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .centerSize,
  .pageSize {
    width: 90%;
  }
}

@media only screen and (max-width: 767px) {
  .centerSize,
  .pageSize {
    width: 90%;
  }
}

/* above top section */


/* top section  */
.top {
  width: 100%;
  display: block;
  position: static;
}

.boxesWrap {
  width: 75%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
}

.one {
  width: 20%;
  display: flex;
    justify-content: flex-start;
  align-items: center;
  height: 90px;
}
.one img {
  width: 170px;
  display: block;
}

.two {
  width: 63%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 90px;
}

.three {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  height: 90px;
}
.topPhone a {
  font-size: 16px;
    color: var(--blue);
    border: 2px solid var(--blue);
    box-shadow: 0 0 0 rgb(0 0 0 / 24%);
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    padding: 16px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transform: translate3d(0, 0, 0);
}
.topPhone a:hover {
    background: var(--blue);
    border-color: var(--blue);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
    color: var(--formgrey);
    text-decoration: none;
    transform: translate3d(0, -3px, 0);
    border: 2px solid var(--blue);
}
/*** menu section ***/
.menu ul li.mlink,
.menu ul li.m1link,
.menu ul li.m2link,
.menu ul li.m3link,
.menu ul li.mmlinks {
  display: none;
}

.menu ul li.dlink {
  font-size: 16px;
  display: inline-block;
  text-transform: capitalize;
  padding: 5px 15px;
  font-weight: 600;
  border: 2px solid transparent;
}
.menu ul li.dlink a {
  color: var(--black);
}
.menu ul li.dlink a:hover {
   color: var(--blue);
}
/*** end menu section ***/
/* end top section  */
@media only screen and (min-width: 1920px) and (max-width: 2559px) {

}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .boxesWrap {
        width: 90%;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .boxesWrap {
        width: 90%;
    }
    .two {
        width: 58%;
    }
    .three {
        width: 20%;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 2559px) {
 
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    
}
@media only screen and (max-width: 767px) {
   
}
@media only screen and (max-width: 479px) {
    
}

/*========================================================
									Buttons
=========================================================*/
.secLeftBtn {
    box-shadow: 0 0 0 rgb(0,0,0, .24);
    background: var(--blue);
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    padding: 16px 24px; 
    cursor: pointer;
    text-transform: capitalize;
    transform: translate3d(0, 0, 0);
    display: inline-block;
}
.secLeftBtn:hover {
    box-shadow: inset 0 0 200px rgba(230, 230, 230, 0.25), 0 6px 24px rgba(0, 0, 0, 0.14);
    transform: translate3d(0, -3px, 0);
    transition: background-color 0.25s ease-in, border-color ease-in, transform 0.75s cubic-bezier(0.44, 0.51, 0.24, 0.99), box-shadow 1s cubic-bezier(0.44, 0.51, 0.24, 0.99);
}
.blogBtn {
    display: inline-block;
    background-color: transparent;
    border: 2px solid var(--blue);
    padding: 13px 28px;
    color: var(--blue);
    box-shadow: 0 0 0 rgb(0,0,0,.24);
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    transform: translate3d(0, 0, 0);
}
.blogBtn:hover {
    box-shadow: inset 0 0 200px rgba(230, 230, 230, 0.25), 0 6px 24px rgba(0, 0, 0, 0.14);
    transform: translate3d(0, -3px, 0);
    transition: background-color 0.25s ease-in, border-color ease-in, transform 0.75s cubic-bezier(0.44, 0.51, 0.24, 0.99), box-shadow 1s cubic-bezier(0.44, 0.51, 0.24, 0.99);
}
.fooMore {
    display: inline-block;
    background-color: transparent;
    border: 2px solid var(--blue);
    padding: 13px 28px;
    color: var(--blue);
    box-shadow: 0 0 0 rgb(0 0 0 / 24%);
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    margin-right: 10px;
    transform: translate3d(0, 0, 0);
}
.fooMore:hover {
    box-shadow: inset 0 0 200px rgba(230, 230, 230, 0.25), 0 6px 24px rgba(0, 0, 0, 0.14);
    transform: translate3d(0, -3px, 0);
    transition: background-color 0.25s ease-in, border-color ease-in, transform 0.75s cubic-bezier(0.44, 0.51, 0.24, 0.99), box-shadow 1s cubic-bezier(0.44, 0.51, 0.24, 0.99);
    background: var(--blue);
    color: var(--white);
}
.fooStart {
    box-shadow: 0 0 0 rgb(0 0 0 / 24%);
    background: var(--blue);
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    padding: 16px 24px;
    cursor: pointer;
    text-transform: capitalize;
    display: inline-block;
    transform: translate3d(0, 0, 0);
}
.fooStart:hover {
    box-shadow: inset 0 0 200px rgba(230, 230, 230, 0.25), 0 6px 24px rgba(0, 0, 0, 0.14);
    transform: translate3d(0, -3px, 0);
    transition: background-color 0.25s ease-in, border-color ease-in, transform 0.75s cubic-bezier(0.44, 0.51, 0.24, 0.99), box-shadow 1s cubic-bezier(0.44, 0.51, 0.24, 0.99);
}
@media only screen and (min-width: 1920px) and (max-width: 12559px) {
    
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    
}
@media only screen and (max-width: 767px) {

}
@media only screen and (max-width: 479px) {
    
}

/*========================================================
		INDEX BANNER
=========================================================*/
.bannerWrap {
    width: 100%;
    background: url('../images/index/banner-half.jpg') repeat-y;
    background-position: center center;
    background-size: cover;
    margin: 200px auto 160px; 
    display: flex;
}
.bannerLeft {
    width: 55%;
}
.bannerRight {
    width: 45%;
    position: relative;
}
.bannerLeft h1 {
    font-size: 52px;
    line-height: 1;
    font-weight: 900;
    width: 580px;
    padding: 20px 0 35px;
}
.bannerLeft p {
    padding: 0 0 0 35px;
    font-size: 16px;
    line-height: 1.5;
    font-family: 'Libre Baskerville',arial,sans-serif;
    width: 550px;
    color: var(--light-black);
}
.bannerSubs {
    padding-left: 35px;
}
.subsLab {
    margin: 24px 0 8px;
    width: 100%;
    color: var(--grey);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
}
.subsFrame {
    background: #fff;
    border: 1px solid var(--formgrey);
    box-shadow: 0 10px 60px rgb(0,0,0,.14);
    padding: 23px 24px;
    position: relative;
    width: 550px;
}
.subsForm input[type="email"] {
    color: var(--black);
    font-size: 18px;
    width: 100%;
    border: none;
}
.subsForm input[type="submit"] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 145px;
    background: var(--blue);
    height: 52px;
    line-height: 52px;
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    border: none;
    transform: translate3d(0, 0, 0);
}
.subsForm input[type="submit"]:hover {
      background-color: #000cff;
    box-shadow: inset 0 0 200px rgba(230, 230, 230, 0.25), 0 6px 24px rgba(0, 0, 0, 0.14);
    transform: translate3d(0, -3px, 0);
    transition: background-color 0.25s ease-in, border-color ease-in, transform 0.75s cubic-bezier(0.44, 0.51, 0.24, 0.99), box-shadow 1s cubic-bezier(0.44, 0.51, 0.24, 0.99);
}
.bannerImg {
    border: 10px solid var(--white);
    box-shadow: 0 20px 80px rgb(0,0,0,.2);
    width: 100%;
    max-width: 400px;
    display: block;
    position: absolute;
    top: -50px;
    left: 0;
}
.bannerImgCap {
    margin-top: -30px;
    transform: rotateZ(-90deg) translateX(100%);
    transform-origin: right bottom;
    font-size: 12px;
    letter-spacing: 2px;
    bottom: 10px;
    right: 115px;
    position: absolute;
    text-transform: uppercase;
    font-weight: 600;
}
.blueLine {
    width: 40px;
    height: 5px;
    border-bottom: 5px solid var(--blue);
}
.bannerLine {
    position: absolute;
    top: 50px;
    right: -15px;
}
@media only screen and (min-width: 1920px) and (max-width: 12559px) {
    
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .bannerWrap {
        margin: 120px auto 160px;
    }
    .bannerImgCap {
            right: 105px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .bannerLeft h1 {
        font-size: 42px;
        width: 484px;
    }
    .bannerLeft p,
    .subsFrame {
        width: 450px;
    }
    .bannerImg {
        max-width: 350px;
    }
    .bannerWrap {
            margin: 130px auto 80px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .bannerWrap {
            margin: 60px auto 60px;
        flex-direction: column;
        background: none;
    }
    .bannerLeft,
    .bannerRight {
        width: 100%;
    }
    .bannerLeft h1 {
        width: 100%;
        font-size: 32px;
        padding: 20px 0;
    }
    .bannerLeft p,
    .bannerSubs {
        padding-left: 0;
    }
    .bannerLeft {
        margin-bottom: 50px;
    }
    .bannerImg {
        position: static;
        margin: 0 auto;
    }
    .subsFrame {
        width: 100%;
    }
    .bannerSubs {
        padding-top: 20px;
    }
    .bannerLine {
        display: none;
    }
    .bannerImgCap {
            transform: rotateZ(0deg) translateX(100%);
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        margin: 20px auto 0;
        width: 100%;
        right: auto;
        text-align: center;
        
    }
}
@media only screen and (max-width: 767px) {
    .bannerWrap {
            margin: 35px auto 60px;
        flex-direction: column;
        background: none;
    }
    .bannerLeft,
    .bannerRight {
        width: 100%;
    }
    .bannerLeft h1 {
        width: 100%;
        font-size: 32px;
        padding: 20px 0;
    }
    .bannerLeft p,
    .bannerSubs {
        padding-left: 0;
        width: 100%;
    }
    .bannerLeft {
        margin-bottom: 50px;
    }
    .bannerImg {
        position: static;
        margin: 0 auto;
    }
    .subsFrame {
        width: 100%;
    }
    .bannerSubs {
        padding-top: 20px;
    }
    .bannerLine {
        display: none;
    }
    .bannerImgCap {
            transform: rotateZ(0deg) translateX(100%);
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        margin: 20px auto 0;
        width: 100%;
        right: auto;
        text-align: center;
        
    }
}
@media only screen and (max-width: 479px) {
    
}
/*========================================================
		INDEX logos section
=========================================================*/
.logosbg {
    padding: 60px 0 90px;
    text-align: center;
}
.logosTit h2 {
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    color: var(--grey);
    font-weight: 700;
}
.logosWrap {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 50px;
}
.logosBox {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logosBox img {
    width: 100%;
    opacity: .5;
}
.arrowDown {
    width: 40px;
    margin: 50px auto 0;
}
@media only screen and (min-width: 1920px) and (max-width: 12559px) {
    
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .logosbg {
        padding: 30px 0 50px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .logosbg {
        padding: 60px 0 50px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .logosbg {
        padding-bottom: 0;
    }
}
@media only screen and (max-width: 767px) {
 .logosbg {
        padding-bottom: 0;
    }
    .logosWrap {
        flex-direction: column;
        margin-top: 20px;
    }
    .logosBox {
        width: 100%;
    }
    .logosBox img {
        max-width: 200px;
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 479px) {
    
}
/*========================================================
		INDEX  section left image
=========================================================*/
.secleftbg {
    padding: 0;
}
.mainTit {
    text-align: center;
}
.mainTit h3 {
    padding: 40px 0 20px;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 900;
    text-transform: capitalize;
}
.mainTit p {
    color: var(--light-black);
    font-size: 16px;
    font-family: 'Libre Baskerville',arial,sans-serif;
    line-height: 1.5;
    width: 580px;
    margin: 0 auto 28px;
}
.secLast {
    border-bottom: 1px solid var(--line-white);
    padding-bottom: 100px;
}
.secLeftWrap {
    width: 100%;
    background: url('../images/index/sec-bg-left.jpg') repeat-y;
    background-position: center center;
    background-size: cover;
    margin: 200px auto 160px;
    display: flex;
    height: 400px;
    
}
.secLeftOne {
    width: 45%;
    position: relative;
}
.secLeftTwo {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 60px;
}
.secLeftLine {
    position: absolute;
    left: -15px;
    top:  50px;
}
.secLeftImg {
    border: 10px solid var(--white);
    box-shadow: 0 20px 80px rgb(0,0,0,.2);
    width: 100%;
    max-width: 400px;
    display: block;
    position: absolute;
    top: -50px;
    right: 50px;
}
.secLeftTwo h3 {
    font-size: 42px;
    line-height: 1.1;
    text-align: left;
    padding-bottom: 20px;
    width: 595px;
}
.secLeftTwo h3 span {
    text-transform: uppercase;
    color: var(--blue);
    font-size: 14px;
    font-weight: 700;
    display: block;
    padding-bottom: 40px;
}
.secLeftTwo p {
    padding: 0 0 28px 35px;
    font-size: 16px;
    font-family: 'Libre Baskerville',arial,sans-serif;
    line-height: 1.5;
    width: 560px;
}
.secLeftBtnPlace {
    margin-left: 35px;
}
@media only screen and (min-width: 1920px) and (max-width: 12559px) {
    
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .secLeftImg {
        right: 10px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .secLeftImg {
        max-width: 350px;
            right: -35px;
    }
    .secLeftTwo h3 {
        width: 400px;
    }
    .secLeftTwo p {
        width: 435px;
    }
    .secLeftTwo {
        margin-left: 80px;
    }
    .secLast {
        padding-bottom: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .secLeftTwo h3,
    .secLeftTwo p  {
        width: 90%;
    }
    .mainTit h3,
    .secLeftTwo h3 {
        font-size: 32px;
    }
    .secLeftWrap {
        margin: 120px auto 80px;
        background: none;
        height: auto;
    }
    .secLeftLine {
        display: none;
    }
    .secLeftImg {
        position: static;
        max-width: 100%;
    }
    .secLeftTwo p {
        padding-left: 0;
    }
    .secLeftTwo {
        margin-left: 35px;
    }
    .secLeftBtnPlace {
        margin-left: 0;
    }
    .secLast {
        padding-bottom: 0;
    }
}
@media only screen and (max-width: 767px) {
    .secLeftTwo h3,
    .secLeftTwo p  {
        width: 90%;
    }
    .mainTit h3,
    .secLeftTwo h3 {
        font-size: 32px;
    }
    .secLeftWrap {
        margin: 50px auto 70px;
        background: none;
        height: auto;
        flex-direction: column;
    }
    .secLeftOne,
    .secLeftTwo {
        width: 100%;
    }
    .secLeftLine {
        display: none;
    }
    .secLeftImg {
        position: static;
        margin: 0 auto 50px;
    }
    .secLeftTwo p {
        padding-left: 0;
    }
    .secLeftTwo {
        margin-left: 0;
    }
    .secLeftBtnPlace {
        margin-left: 0;
    }
    .secLast {
        padding-bottom: 0;
        padding-top: 60px;
    }
    .mainTit p {
        width: 90%;
    }
}
@media only screen and (max-width: 479px) {
    
}
/*========================================================
		INDEX  section quote
=========================================================*/
.quoteWrap {
    text-align: center;
}
.quoteWrap p {
    font-size: 20px;
    font-style: italic;
    line-height: 1.8;
    font-family: 'Libre Baskerville',arial,sans-serif;
    position: relative;
    color: var(--light-grey);
}
.quoteWrap p span {
    display: block;
    padding-top: 40px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 900;
    font-style: normal;
    font-family: 'Source Sans Pro',arial,sans-serif;
}
.quoteWrap p::before {
    content: '';
    background: url('../images/index/quote.png');
    background-size: 35px 26px;
    width: 35px;
    height: 26px;
    position:absolute;
    top: -5px;
    left: 0;
}
@media only screen and (min-width: 1920px) and (max-width: 12559px) {
    
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .quoteWrap p {
        width: 800px;
        margin: 0 auto;
        padding-left: 40px;
    }
    .quoteWrap p::before {
        margin-right: 10px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .quoteWrap p {
        padding-left: 40px;
    }
    .quoteWrap p::before {
        margin-right: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .quoteWrap p {
        padding-left: 40px;
    }
    .quoteWrap p::before {
        margin-right: 10px;
    }
}
@media only screen and (max-width: 479px) {
    
}
/*========================================================
		INDEX  section right image
=========================================================*/
.secrightbg {
    padding: 30px 0 90px;
}
.secRightWrap {
    width: 100%;
    background: url(../images/index/banner-half.jpg) repeat-y;
    background-position: center center;
    background-size: cover;
    margin: 200px auto 160px;
    display: flex;
    height: 400px;
}
.secRightOne {
    width: 55%;
}
.secRightTwo {
    width: 45%;
    position: relative;
}
.secRightOne h3 {
    font-size: 42px;
    line-height: 1.1;
    text-align: left;
    padding-bottom: 20px;
    width: 595px;
}
.secRightOne h3 span {
    display: block;
    text-transform: uppercase;
    color: var(--blue);
    font-size: 14px;
    font-weight: 700;
    display: block;
    padding: 60px 0 40px;
}
.secRightOne p {
    padding: 0 0 28px 35px;
    font-size: 16px;
    font-family: 'Libre Baskerville',arial,sans-serif;
    line-height: 1.5;
    width: 560px;
}
.secRightLine {
    position: absolute;
    top: 50px;
    right: -15px;
}
.secRightImg {
    border: 10px solid var(--white);
    box-shadow: 0 20px 80px rgb(0 0 0 / 20%);
    width: 100%;
    max-width: 400px;
    display: block;
    position: absolute;
    top: -50px;
    left: 0;
}
@media only screen and (min-width: 1920px) and (max-width: 12559px) {
    
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .secRightWrap {
        margin: 150px auto 160px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .secrightbg {
        padding: 0 0 50px;
    }
    .secRightWrap {
        margin: 160px auto 60px;
        background: none;
        height: auto;
    }
    .secRightLine {
        display: none;
    }
    .secRightImg {
        max-width: 100%;
        position: static;
    }
    .secRightOne h3 {
        font-size: 32px;
        width: 90%;
    }
    .secRightOne p {
        padding-left: 0;
        width: 90%;
    }
}
@media only screen and (max-width: 767px) {
    .secrightbg {
        padding: 0 0 50px;
    }
    .secRightWrap {
        margin: 60px auto 60px;
        background: none;
        height: auto;
        flex-direction: column-reverse;
    }
    .secRightOne,
    .secRightTwo {
        width: 100%;
    }
    .secRightLine {
        display: none;
    }
    .secRightImg {
        position: static;
        margin: 0 auto;
    }
    .secRightOne h3 {
        font-size: 32px;
        width: 90%;
    }
    .secRightOne p {
        padding-left: 0;
        width: 90%;
    }
}
@media only screen and (max-width: 479px) {
    
}
/*========================================================
		INDEX  section blog
=========================================================*/
.secblogbg {
    padding: 160px 0;
}
.blogTitWrap {
    width: 100%;
    display: flex;
    align-items: center;
}
.blogLeft {
    width: 70%;
}
.blogRight {
    width: 30%;
    text-align: right;
}
.blogLeft h3 {
    font-size: 42px;
    font-weight: 900;
    text-transform: capitalize;
    line-height: 1.1;
    padding-bottom: 20px;
}
.blogLeft p {
    font-size: 16px;
    color: var(--light-black);
    padding-left: 35px;
    line-height: 1.5;
    width: 800px;
    font-family: 'Libre Baskerville',arial,sans-serif;
}

.blogWrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 90px;
}
.blogBox {
    width: 32%;
}
.blogImgLink {
    position: relative;
    z-index: 1;
    display: inline-block;
}
.blogImgLink::before {
    height: calc(100% + 10px);
    background: #f4f4f4;
    content: "";
    left: -30px;
    position: absolute;
    top: 30px;
    width: calc(100% + 60px);
    z-index: -1;
}
.blogImg {
    display: block;
    width: 100%;
    box-shadow: 0 16px 65px rgb(0,0,0,.18);
    position: relative;
}
.blogBox h3 {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    margin: 35px 0 25px;
}
.blogBox h3 span {
    padding-top: 15px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    color: var(--bloghead);
}
.blogBox p {
    font-size: 16px;
    font-family: 'Libre Baskerville',arial,sans-serif;
    padding-bottom: 15px;
    line-height: 1.5;
}
.arrowRight {
    font-size: 12px;
    color: var(--blue);
}
.blogItemBtn {
    border-bottom: 1px solid var(--blue);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--blue);
    font-weight: 700;
    display: inline-block;
    position: relative;
}
@media only screen and (min-width: 1920px) and (max-width: 12559px) {
    
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .secblogbg {
        padding: 120px 0 90px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .secblogbg {
            padding: 80px 0;
    }
    .blogLeft p {
        width: 640px;
    }
    .blogImg {
        width: 90%;
        margin: 0 auto;
    }
    .blogImgLink::before {
            width: calc(90% + 60px);
        left: -15px;
    }
    .blogBox {
        width: 30%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
     .blogLeft p {
        width: 90%;
         padding-left: 0;
    }
    .secblogbg {
        padding: 50px 0 0;
    }
    .blogLeft h3 {
        font-size: 32px;
    }
    .blogWrap {
        margin-top: 60px;
        flex-direction: column;
    }
    .blogBox {
        width: 440px;
        margin: 0 auto 75px;
    }
}
@media only screen and (max-width: 767px) {
    .blogLeft p {
        width: 100%;
         padding-left: 0;
    }
    .secblogbg {
        padding: 50px 0 0;
    }
    .blogLeft h3 {
        font-size: 32px;
    }
    .blogWrap {
        margin-top: 60px;
        flex-direction: column;
    }
    .blogBox {
        width: 440px;
        margin: 0 auto 75px;
    }
    .blogTitWrap {
        flex-direction: column;
    }
    .blogLeft,
    .blogRight {
        width: 100%;
        text-align: left;
    }
    .blogLeft {
        padding-bottom: 28px;
    }
    .blogImg {
        width: 440px;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 479px) {
    .blogBox {
        width: 100%;
    }
    .blogImg {
        width: 280px;
    }
}
/*========================================================
		INDEX more section
=========================================================*/
.secmorebg {
    margin: 0 auto 90px;
    background: var(--formgrey);
}
.secmoreWrap {
    padding: 70px 0;
    text-align: center;
}
.fooBtnsWrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.secmoreWrap h3 {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--blue);
    padding-bottom: 20px;
}
.secmoreWrap p {
    font-size: 16px;
    font-family: 'Libre Baskerville',arial,sans-serif;
    line-height: 1.3;
    color: var(--light-black);
    padding-bottom: 28px;
}
@media only screen and (min-width: 1920px) and (max-width: 12559px) {
    
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .secmorebg {
        margin-bottom: 0;
    }
}
@media only screen and (max-width: 767px) {
    .secmorebg {
        margin-bottom: 0;
    }
}
@media only screen and (max-width: 479px) {
    
}
/*========================================================
		Footer
=========================================================*/
.foobg {
    margin: 70px auto 0;
}
.fooWrap {
    padding: 35px 0;
    display: flex;
    align-items: center;
}
.fooLeft,
.fooRight {
    width: 50%;
}
.fooLeft p {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 2px;
    color: var(--light-grey);
}
.fooRight {
    text-align: right;
}
.fooRight ul li {
    display: inline-block;
    padding-left: 35px;
}
.fooRight ul li a {
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 2px;
}
.fooRight ul li a:hover {
    color: var(--blue);
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
    
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .fooLeft {
        width: 40%;
    }
    .fooRight {
        width: 60%;
    }
    .fooLeft p span {
        display: block;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .foobg {
        margin-top: 35px;
    }
    .fooWrap {
        flex-direction: column-reverse;
    }
    .fooLeft, .fooRight {
        width: 100%;
    }
    .fooLeft p,
    .fooRight {
        text-align: center;
    }
    .fooRight {
        margin-bottom: 35px;
    }
    .fooRight ul li {
        padding: 0 30px;
    }
}
@media only screen and (max-width: 767px) {
    .foobg {
        margin-top: 35px;
    }
    .fooWrap {
        flex-direction: column-reverse;
    }
    .fooLeft, .fooRight {
        width: 100%;
    }
    .fooLeft p,
    .fooRight {
        text-align: center;
    }
    .fooRight {
        margin-bottom: 35px;
    }
    .fooRight ul li {
        padding: 10px 0;
        display: block;
    }
    .fooLeft p span {
        display: block;
    }
}
@media only screen and (max-width: 479px) {
    .fooBtnsWrap {
        flex-direction: column;
    }
    .fooMore {
        margin-bottom: 20px;
    }
    .secmoreWrap h3  {
        font-size: 32px;
    }
}

/*========================================================
    Mobile Menu
=========================================================*/
@media only screen  and (max-width: 1023px) {
	.smobitrigger,
	.mnuclose {
		display: inline-block;
	}
	.smobitrigger {
	color: transparent;
	width: 30%;
		margin: 0 auto;
	}
	.smobitrigger {
		background: url("../images/menuopen.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 40px 40px;
		width: 40px;
		height: 40px;
	}
	.mnuclose {
		background: url('../images/menuclose.png');
        background-position: right top;
        background-repeat: no-repeat;
        background-size: 45px 45px;
		color: transparent;
		height: 45px;
		margin: 0 0 10px 0;
		width: 100%;
		text-align: right;
		display: inline-block;
	}
	.menu  ul {
		padding: 0 10px 20px;
		overflow-y: auto;
		margin: 0 auto;
        text-align: center;
	}
    .menu li {
        line-height: inherit;
    }
    .menu ul li.dlink {
        display: block;
    }
    .menu ul li a {
        font-size: 18px;
    }

	.menu ul li.mlogo {
        margin: 20px auto 0;
        display: block;
        text-align: center;
	}
	.menu ul li.mlogo  img {
		width: 240px;
        margin: 0 auto 30px;
        position: static;
	}
	.menu ul li.mphone {
		display: block;
        margin-bottom: 10px;
	}
    .menu ul li.mphone span {
        display: block;
        font-size: 16px;
        font-weight: 300;
        color: #777;
    }
	.menu ul li.mphone a {
		font-size: 26px;
        color: #e34831!important;
	}
	.menu ul li.maddress {
		display: block;
		font-size: 16px;
		line-height: 1.5;
		text-transform: capitalize;
		margin: 35px auto 20px;
		 color: #777;
	}
	.menu ul li.maddress span {
			display: block;
	}
    .menu ul li.mhours {
        display: block;
		font-size: 14px;
		line-height: inherit;
        margin: 0 auto 30px;
        color: #fff;
        font-family: barlowmedium,arial,sans-serif;
    }
    .menu ul li.mhours span {
        display: block;
    }
	.menu ul li.msocial {
		display: flex;
        justify-content: center;
        align-items: center;
		width: 100%;
        margin: 35px auto 20px;
	}
    .menu ul li.msocial a {
        padding: 0 5px;
        margin: 0;
    }
    .menu ul li.msocial img {
        width: 40px;
    }



		.mobimenu {
			padding: 0;
			margin: 0px;
			width: 14.9375em;
			position: fixed;
			height: 100%!important;
			top: 0px;
			left: -24.625em;
	 }
	.mnuopn {
		left: 0px !important;
	}
	.ovrActv {
		position: fixed;
		background: rgba(0, 0, 0, 0.79);
		width: 100%;
		height: 100%;
		z-index: 9998;
			-webkit-transition: 0.5s;
			-moz-transition: 0.5s;
			-ms-transition: 0.5s;
			-o-transition: 0.5s;
		transition: 0.5s;
	}
    .boxesWrap {
        width: 90%;
    }
    .one {
        width: 70%;
    }
    .two {
        width: 30%;
    }
    .three {
        display: none;
    }
    nav,
    .telMob {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .telMob img {
        width: 40px;
    }
}
@media only screen and (max-width: 479px) {
    .one {
        width: 60%;
    }
    .two {
        width: 40%;
    }
}