@font-face {
    font-family: 'StevieSansThin';
    src: url('../fonts/StevieSansThin.woff2') format('woff2'),
        url('../fonts/StevieSansThin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'StevieSans';
    src: url('../fonts/StevieSans.woff2') format('woff2'),
        url('../fonts/StevieSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'StevieSansMedium';
    src: url('../fonts/StevieSansMedium.woff2') format('woff2'),
        url('../fonts/StevieSansMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}





body { padding: 0; line-height:30px; margin: 0; background: #fff; font-size:20px;  font-family: 'StevieSans'; }
.container { max-width: 1400px; margin: 0 auto; padding-left: 15px; padding-right: 15px;  }
.headerbox {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0;
    justify-content: space-between;
}
header { padding:15px 0; }
header .logo { line-height: 0; padding: 10px 0 5px 0; }
header .logo img{ max-width: 100%;  line-height: 0;  }
header ul.menu {
    padding: 0;
    margin: 0;
    display: flex;
    list-style: none;
}
header ul.menu li a { color: #514b2d; text-decoration: none; }
header ul.menu li a:hover {color: #000;}
header ul.IconRight {
    padding: 0 20px;
    margin: 0 -20px 0 0;
    display: flex;
    align-items: center;
    list-style: none;
    background: #7db1ed;
}
header ul.IconRight li a { padding:23px 20px; display: inline-block; color: #000; }
header ul.IconRight li a:hover { color: #999; }
.MainMenu {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 30px;
}

.MainBanner {  width: 100%;  }
.BannerContent {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: center;
}
.TechnologyLeft,.TransformingDiv { width: 50%;  }
.Bannerbox { display: flex; text-align: left; align-items: center; width: 100%; min-height:100vh; justify-content: center; }
.Bannerbox h1 {
    position: relative;
    line-height: 80px;
    font-size: 60px;
    margin: 0;
    padding: 0;
}
.Bannerbox h1 span {
    position: relative;
    display: inline-block;
}

.Bannerbox h1 span:before {
    bottom: 0;
    content: "";
    position: absolute;
    background: #fbab32;
    width: 100%;
    height:60px;
    z-index: -1;
    left: 70px;
    opacity: 0.5;
}
.Bannerbox h1 span.lefticon:before {left: 0; }

.Bannerbox p,.fontsiz { font-size:30px; line-height:40px;  }
.btn { color: #000; text-decoration: none; border: 1px #000 solid; border-radius: 5px; padding: 10px 20px; display: inline-block; }
.btn:hover { background: #fbab32; color: #fff; border: solid 1px #fbab32; }

.MyStory { position: relative; }
.MyStorybg {    background-size: cover !important; background: url(../img/bg1.jpg) no-repeat left top; height: 80vh;  width: 100%; background-attachment: fixed;  }

.MyStoryContent .fontsiz { line-height:40px; }
.MyStoryContent {
    position: absolute;
    right: 0;
    max-width: 630px;
    top: -100px;
    background: #FFF;
    padding: 40px 40px 20px 40px;
    text-align: left;
    border: solid 1px #333;
}
 h2 { font-size: 50px; color: #fbab32; margin: 0 0 20px 0; display: inline-block; }
section.WhatOffer {
    float: left;
    width: 100%;
    padding:100px 0 50px 0;
}
section.WhatOffer h2 { display: block; text-align: center; }
.WhatOfferBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px #a1a1a1;
    padding: 30px 10px;
}
.leftdiv {
    display: flex;
    align-items: center;
    gap: 50px;
    width: 30%;
}
.leftdiv svg {
    width: 50px;
    height: auto;
}
.Generative { font-size:30px; line-height: 35px;}
.RightDiv {
    width: 44%;
}
.RightDiv ul {
    list-style: auto;
    padding: 0;
    margin: 0 0 0 15px;
}
.row { display: flex; justify-content: space-between; width: 100%; }
.Letw50 { width: 50%; padding: 100px; }
.Letbg img { max-width: 100%; }


.Testimonialsbg {
    width: 100%;
    float: left;
    background: #4982c3;
    height: 50vh;
    margin-bottom: -150px;
}
.LetTalk {
    position: relative;
    float: left;
    width: 100%;
    padding-top: 0;
}

.LetTalk .container { position: relative; }
.LetTalk:before {
    top: 0;
    content: "";
    position: absolute;
    background: #fff;
    width: 50%;
    height: 100%;
    z-index: auto;
    left: 0;
    border: solid 1px #333;
}
.reductionDiv { padding-top: 210px; }
.email a { color: #000;  }
.email a:hover { color: #000; text-decoration: none; }

footer {
    float: left;
    width: 100%;
    padding: 10px 0;
    color: #000;
    text-align: center;
    border-top: solid 1px #333;
    margin-top: 1px;
}

section.Adaptively {
    float: left;
    width: 100%;
    padding-bottom:80px;
    padding-top: 100px;
}
.compGridbox { display: flex; justify-content:space-between; position: relative; }
.Adaptively .compGrid { width: 25%; position: relative; }
.Adaptively .compGrid span {
    font-size: 250px;
    opacity: 0.2;
    font-weight: bold;
    position: absolute;
    top:40px;
}
.Adaptively .compGrid.color03 span { color:#fbab32; }
.Adaptively .compGrid.color02 span { color:#4982c3; }
.Adaptively .compGrid p {
    position: relative;
    font-size: 30px;
    line-height: 40px;
    padding-left: 30px;
}
.reductionDiv a { color:#000;  }
.reductionDiv a:hover { color:#000; text-decoration: none; }

@media (max-width: 991px) {
  body {
    font-size: 17px;
  }
  p { font-size: 17px; }

  .Bannerbox h1 { font-size: 40px; line-height: 50px; }
  .Bannerbox p, .fontsiz { font-size: 17px; line-height: 25px;}
  .Adaptively .compGrid p { font-size: 17px; line-height: 25px; }


} 


@media (max-width:1400px) { 
.MyStoryContent p {
    width: 100% !important;
}
}

@media (max-width: 1024px) { 

.Bannerbox { min-height: 60vh; padding-bottom: 130px;  }
.Adaptively .compGrid span { font-size: 140px; }
.Adaptively .compGrid { width: 30%; }
section.WhatOffer h2 { line-height: 55px; }
section.Adaptively {
    padding-bottom: 60px;
    padding-top: 50px;
}
.Letw50 { padding: 20px; }
.Letw50 h2 { line-height: 55px; }

.MyStoryContent p {
    width: 100% !important;
}

}


/* iPads */
@media (max-width: 768px) {
.Bannerbox { min-height:100%; padding: 80px 0; }
.headerbox { flex-wrap: wrap;  border-bottom: solid 1px #333; }
.headerbox p { margin-top:5px; }
.BannerContent { flex-wrap: wrap; gap: 0; }
.TechnologyLeft, .TransformingDiv { width: 100%; }
.MyStoryContent {
    position: relative;
    top: 0;
    padding: 20px;
    margin: -50px 15px 0 15px;
}
.MyStoryContent p { width: 100% !important; }

.WhatOfferBox .leftdiv,.WhatOfferBox .RightDiv {width: 100%;}
.WhatOfferBox { flex-wrap: wrap; }
section.WhatOffer h2 { line-height: 55px; }
.compGridbox { flex-wrap: wrap; }
section.Adaptively { padding-bottom: 0; }
.Adaptively .compGrid { width: 100%; margin-bottom: 100px; }
.Adaptively .compGrid span { font-size: 200px; }
.row { flex-wrap: wrap; }
.Letw50 { width: 100%; padding: 0; }
.LetTalk:before { display: none; }
section.LetTalk { padding-bottom:80px; }

}




@media (max-width: 430px) {

.headerbox { flex-wrap: wrap;  border-bottom: solid 1px #333; }
.headerbox p { margin-top:5px; }
.BannerContent { flex-wrap: wrap; gap: 0; }
.TechnologyLeft, .TransformingDiv { width: 100%; }
.MyStoryContent {
    position: relative;
    top: 0;
    padding: 20px;
    margin: -50px 15px 0 15px;
}
.MyStoryContent p { width: 100% !important; }

.WhatOfferBox .leftdiv,.WhatOfferBox .RightDiv {width: 100%;}
.WhatOfferBox { flex-wrap: wrap; }
section.WhatOffer h2 { line-height: 55px; }
.compGridbox { flex-wrap: wrap; }
section.Adaptively { padding-bottom: 0; }
.Adaptively .compGrid { width: 100%; margin-bottom: 100px; }
.Adaptively .compGrid span { font-size: 200px; }
.row { flex-wrap: wrap; }
.Letw50 { width: 100%; padding: 0; }
.LetTalk:before { display: none; }
section.LetTalk { padding-bottom:80px; }


}


/* iPhone SE */
@media (max-width: 320px) {

.headerbox { flex-wrap: wrap;  border-bottom: solid 1px #333; }
.headerbox p { margin-top:5px; }
.BannerContent { flex-wrap: wrap; gap: 0; }
.TechnologyLeft, .TransformingDiv { width: 100%; }
.MyStoryContent {
    position: relative;
    top: 0;
    padding: 20px;
    margin: -50px 15px 0 15px;
}
.MyStoryContent p { width: 100% !important; }

.WhatOfferBox .leftdiv,.WhatOfferBox .RightDiv {width: 100%;}
.WhatOfferBox { flex-wrap: wrap; }
section.WhatOffer h2 { line-height: 55px; }
.compGridbox { flex-wrap: wrap; }
section.Adaptively { padding-bottom: 0; }
.Adaptively .compGrid { width: 100%; margin-bottom: 100px; }
.Adaptively .compGrid span { font-size: 200px; }
.row { flex-wrap: wrap; }
.Letw50 { width: 100%; padding: 0; }
.LetTalk:before { display: none; }
section.LetTalk { padding-bottom:80px; }
}