@import url('bootstrap.min.css');
@import url('swiper.min.css');
@import url('materialdesignicons.min.css');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap');
/*font-family: 'Inter', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700&display=swap');
/*font-family: 'Nunito', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800&display=swap');
/*font-family: 'Outfit', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
/*font-family: 'Quicksand', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
/*font-family: 'DM Sans', sans-serif;*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
input,
select,
textarea,
button,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

body {
  line-height: 1 !important; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  text-decoration: none; }

img {
  border: 0; }

:focus {
  outline: 0; }

a:active,
a:focus,
input,
button {
  background-color: transparent;
  outline: 0;
  outline-style: none;
  outline-width: 0; }

a:hover {
  text-decoration: none; }

input::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border: 0; }

button,
input[type=submit] {
  cursor: pointer;
  border: 0;
  padding: 0; }

img {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden; }

em {
  font-style: italic; }

a,
input[type=submit],
button[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

a[href^=tel] {
   text-decoration:inherit;
   color: inherit;
}
a[href^=mailto] {
   text-decoration:inherit;
   color: inherit;
}


@font-face{font-family:galano;src:url(../fonts/GalanoGrotesqueBold.otf) format("otf"),url(../fonts/GalanoGrotesqueBold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:galano;src:url(../fonts/GalanoGrotesqueRegular.otf) format("otf"),url(../fonts/GalanoGrotesqueRegular.otf) format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:galano;src:url(../fonts/GalanoGrotesqueMedium.otf) format("otf"),url(../fonts/GalanoGrotesqueMedium.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:galano;src:url(../fonts/GalanoGrotesqueLight.otf) format("otf"),url(../fonts/GalanoGrotesqueLight.otf) format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:galano;src:url(../fonts/GalanoGrotesqueExtraLight.otf) format("otf"),url(../fonts/GalanoGrotesqueExtraLight.otf) format("opentype");font-weight:200;font-style:normal;font-display:swap}


@font-face{font-family:averta;src:url(../fonts/Light.ce061605.woff) format("woff"),url(../fonts/Light.842d6e4e.otf) format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:averta;src:url(../fonts/Regular.e6d63720.woff) format("woff"),url(../fonts/Regular.a510837c.otf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:averta;src:url(../fonts/Semibold.fb2a5272.woff) format("woff"),url(../fonts/Semibold.1c9f2afb.otf) format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:averta;src:url(../fonts/Bold.a55f4f24.woff) format("woff"),url(../fonts/Bold.23f4afe1.otf) format("truetype");font-weight:700;font-style:normal;font-display:swap}

body{
font-family:averta;
    overflow-x: hidden;
}

.phone-script a, .whatsapp-script a {
    color: #fff;
    font-size: 30px
}

.whatsapp-script {
    bottom: 30px;
    background: #4cc147;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    -ms-transition: .5s
}
.phone-script, .whatsapp-script {
    position: fixed;
    right: 23px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    z-index: 50;
    font-size: 30px;
    box-shadow: rgb(2 58 81) 0 0 31px -7px;
    animation: 2s infinite pulse
}
header{
    width: 100%;
    float: left;
    padding: 15px 0;
        background: #143072;
        border-bottom: 1px solid #1e3979;
}
header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .logo{
    float: left;
}
header .logo img{
    width: 180px;
}
header .menu {
    float: left;
}
header .menu ul li{
    float: left;
    margin-right: 40px;
    position: relative;
    padding: 20px 0;
}
header .menu ul li ul{
    position: absolute;
    width: 250px;
    left: 0;
    top: 80%;
    background: #fff;
    z-index: -1;
    visibility: hidden;
        border-left: 2px solid #ff5d68;
    opacity: 0;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
    border-radius: 4px;
}
header .menu ul li:hover ul{
    opacity: 1;
    visibility: visible;
    z-index: 10;
    top: 100%;
}
header .menu ul li ul li{
    width: 100%;
    margin-right: 0;
    padding: 0;
}
header .menu ul li ul li:last-child{
    display: block;
}
header .menu ul li ul li a{
      color: #343434;
    letter-spacing: 0;
    font-size: 14px;
    display: block;
    padding: 20px;
    display: block;
    width: 100%;
    border-bottom: 1px solid #f7f7f7;
}
header .menu ul li ul li a:after{
    display: none;
}
header .menu ul li ul li:last-child a{
    border-bottom: none;
}
header .menu ul li a{
    color: #fff;
    font-size: 16px;
    font-weight: 200;
    letter-spacing: 1px;
    position: relative;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
header .menu ul li a:after{
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0%;
    height: 1px;
    background: #ff5d68;
    content: '';
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
header .menu ul li a:hover:after{
    width: 100%;
}
header .menu ul li a:hover{
    color: #ff5d68;
}
header .right{
    float: right;
}
header .right a.catalog{
color: #ffffff;
    border-radius: 4px;
    font-weight: 300;
    background: #ffffff0d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    float: left;
}
header .right a.catalog:hover i{
    BACKGROUND: #ff5d68; 
}
header .right a.catalog i{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #183577;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
header .right .language{
float: left;
    position: relative;
    padding: 10px 10px;
    font-weight: 300;
    margin-top: 9px;
    margin-left: 15px;

}
header .right .language span{
    color: #fff;
}
header .right .language ul{
    position: absolute;
    top: 70%;
    left: 0;
    width: 65px;
    background: #fff;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
header .right .language ul li a{
    padding: 10px;
    display: block;
    color: #343434;
        transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
header .right .language ul li a:hover{
    color: #e30614;
}
header .right .language:hover ul{
    visibility: visible;
    opacity: 1;
    top: 100%;
    z-index: 3;
}
header .right .search{
    float: left;
    width: 40px;
    height: 40px;
    margin-top: 9px;
    margin-right: 15px;
    color: #fff;
    border-radius: 50%;
    border: 1px solid #ffffff1c;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    position: relative;
}
header .right .search .search-box{
    position: absolute;
    width: 250px;
    height: 50px;
    background: #213b79;
    right: -3px;
    display: none;
}
header .right .search .search-box form{
    position: relative;
}
header .right .search .search-box input{
    width: 100%;
    float: left;
    height: 50px;
    padding: 0 15px;
    color: #fff;
}
header .right .search .search-box input::placeholder{
    font-size: 14px;
    color: #c3cada;
}
header .right .search .search-box button{
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    font-size: 14px;
    height: 50px;
    width: 50px;
}
.main-slider{
    width: 100%;
    background: #fcfcfc;
    float: left;
    height: 670px;
}
.main-slider .swiper{
       padding:110px 0;
}
.main-slider .left h4{
    font-size: 46px;
    letter-spacing: -1px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #143072;
}
.main-slider .left h4 span{
        color: #ff5d68;
    text-decoration: underline;
}
.main-slider .left p{
    font-size: 16px;
    font-weight: 300;
    line-height: 150%;
        color: #7e828d;
}
.main-slider .left a{
    display: inline-block;
    margin-top: 30px;
    text-decoration: underline;
    color: #e30614;
    font-weight: 700;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.main-slider .left a:hover{
        color: #ff5d68;
}
.main-slider .right{
    float: left;
    width: 100%;
    position: relative;
}
.main-slider .right:after{
       position: absolute;
    left: -50px;
    top: 50px;
    width: 250px;
    height: 250px;
    border: 8px solid #c7d1e700;
    content: '';
    z-index: -1;
    border-radius: 50%;
    background: #1835770f;
    animation: 2s ease-in-out infinite pulse;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.main-slider .right img{
    width: 75%;
    height: 500px;
    position: relative;
    border-radius: 4px;
    top: -20px;
    float: right;
}
.main-slider .right .small-img{
position: absolute;
    left: 0px;
    bottom: 50px;
    width: 200px;
    border-radius: 4px;
    height: 250px;
    box-shadow: 0px 0px 26px -9px #060606eb;
}
.main-slider .right .small-img img{
    height: 100%;
    object-fit: cover;
    width: 100%;
    top: 0;
}
.main-slider .swiper-pagination{
    text-align: left;
    bottom:140px;
}
.main-slider .swiper-pagination .swiper-pagination-bullet{
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    background: #143072;
}
.product{
    width: 100%;
    float: left;
    padding: 150px 0;
}
.product .title{
    width: 100%;
    text-align: center;
    float: left;
    margin-bottom: 50px;
}
.product .title span{
 font-size: 18px;
    color: #143072;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 10px;
        display: inline-block;
    position: relative;
}
.product .title span:before{
    width: 100px;
    height: 1px;
    background: #eaeaea;
    content: '';
    position: absolute;
    left: -120px;
    top: 8px;
    content: '';
}
.product .title span:after{
    width: 100px;
    height: 1px;
    background: #eaeaea;
    content: '';
    position: absolute;
    right: -120px;
    top: 8px;
    content: '';
}
.product .title h4{
    font-size: 46px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #343434;
}
.product .swiper{
    float: left;
    width: 100%;
}
.product .swiper .swiper-button {
    width: 100%;
    float: left;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.product .swiper .swiper-button .btn {
    margin: 0 10px;
    float: left;
    color: #143072;
    font-size: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.03);
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.product .swiper .swiper-button .btn:hover{
        background: #143072;
    color: #fff;
}
.product .box{
    float: left;
    width: 100%;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.product .box:hover img{
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -o-transform: scale(1.01);
    -ms-transform: scale(1.01);
}
.product img{
    width: 100%;
    margin-bottom: 15px;
}
.product .text{
    float: left;
    width: 100%;
}
.product .text h4{
    float: left;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
    color: #123072;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.product .box:hover .text h4{
    color: #e30614;
}
.product .text p{
    float: left;
    font-size: 16px;
    font-weight: 300;
    line-height: 150%;
        color: #34343499;
}
.popular{
    width: 100%;
    float: left;
    padding-bottom: 150px;
}
.popular .title{
    width: 100%;
    text-align: center;
    float: left;
    margin-bottom: 50px;
}
.popular .title span{
 font-size: 18px;
    color: #143072;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 10px;
        display: inline-block;
    position: relative;
}
.popular .title span:before{
    width: 100px;
    height: 1px;
    background: #eaeaea;
    content: '';
    position: absolute;
    left: -120px;
    top: 8px;
    content: '';
}
.popular .title span:after{
    width: 100px;
    height: 1px;
    background: #eaeaea;
    content: '';
    position: absolute;
    right: -120px;
    top: 8px;
    content: '';
}
.popular .title h4{
    font-size: 46px;
    font-weight: 500;
    color: #343434;
    letter-spacing: -1px;
}
.popular .swiper{
    float: left;
    width: 100%;
    padding:  0 20px;
}
.popular .swiper .box{
    width: 100%;
    float: left;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    overflow: hidden;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.popular .swiper .box:hover{
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -o-transform: scale(1.02);
    -ms-transform: scale(1.02);
}
.popular .swiper .box .image{
    width: 100%;
    height: 220px;
    overflow: hidden;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popular .swiper .box .image img{
    height: 200px;
    object-fit: contain;
    float: left;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.popular .swiper .box:hover .image img{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
   
}
.popular .swiper .box .text{
    padding: 30px;
    float: left;
}
.popular .swiper .box .text h4{
    width: 350px;
    overflow: hidden; /* taşanları gizle */
    white-space: nowrap; /* alt satıra hiç inme */
    text-overflow: ellipsis; /* eğer uzunsa üç nokta koy */

        float: left;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
    color: #123072;
}
.popular .swiper .box .text p{
        float: left;
    font-size: 16px;
    font-weight: 300;
    line-height: 150%;
    color: #34343499;
}
.popular .swiper .box .text span{
        display: block;
    margin-top: 30px;
    float: left;
    text-decoration: underline;
    color: #123072;
    font-weight: 700;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.popular .swiper .box:hover .text span{
    color:#e30614;
}
.popular .swiper .swiper-button{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 2;
}
.popular .swiper .swiper-button .left{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.03);
    float: left;
    background: #fff;
    border-radius: 50%;
        transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.popular .swiper .swiper-button .right{
    width: 40px;
    height: 40px;
    display: flex;
        transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.03);
    float: right;
    background: #fff;
    border-radius: 50%;
}.popular .swiper .swiper-button > div:hover{
    background: #123072;
    color: #fff;
}
.about{
    float: left;
    width: 100%;
    background: url(../img/about.jpeg) center center no-repeat;
    background-size: cover;
    position: relative;
    height: 650px;
}
.about .filter{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fffffff0;
    padding: 100px 0;
}
.about .title {
    float: left;
    width: 100%;
    margin-bottom: 30px;
}
.about .title span{
    color: #ff5d68;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
}
.about .title h4{
font-size: 46px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #343434;
}
.about p{
    font-size: 16px;
    line-height: 150%;
    margin-bottom: 20px;
    font-weight: 300;
    color: #6a6a6a;
    float: left;
    width: 100%;
}
.about a{
        display: inline-block;
    border: 1px solid #143072;
    color: #143072;
    font-weight: 700;
    padding: 20px 32px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
    margin-top: 15px;
}
.about a:hover{
    background: #143072;
    color: #fff;
}
.about img{
    width: 100%;
    position: relative;
    top: -212px;
    object-fit: cover;
    height: 650px;
}
.sss{
    width: 100%;
    float: left;
    padding: 150px 0;
}
.sss .title{
    width: 100%;
    text-align: center;
    float: left;
    margin-bottom: 50px;
}
.sss .title span{
 font-size: 18px;
    color: #143072;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 10px;
        display: inline-block;
    position: relative;
}
.sss .title span:before{
    width: 100px;
    height: 1px;
    background: #eaeaea;
    content: '';
    position: absolute;
    left: -120px;
    top: 8px;
    content: '';
}
.sss .title span:after{
    width: 100px;
    height: 1px;
    background: #eaeaea;
    content: '';
    position: absolute;
    right: -120px;
    top: 8px;
    content: '';
}
.sss .title h4{
    font-size: 46px;
    letter-spacing: -1px;
    font-weight: 500;
    color: #343434;
}
.sss .sss-box{
    width: 100%;
    float: left;
    padding: 0 150px;
}
.sss .sss-box .box{
float: left;
    width: 100%;
    background: #fafafa;
    margin-bottom: 20px;
}
.sss .sss-box h3{
    padding: 30px;
    float: left;
    width: 100%;
    font-size: 22px;
    display: block;
    color: #343434;
    position: relative;
}
.sss .sss-box h3.active{
        background: #143072;
    color: #fff;
}
.sss .sss-box h3 i{
    position: absolute;
    top: 30px;
    right: 20px;
}
.sss .sss-box p{
    padding: 30px;
    font-weight: 300;
    color: #868686;
        border-top: 1px solid #ececec;
    font-size: 16px;
    float: left;
    line-height: 150%;
    display: none;
}
.reference{
    width: 100%;
    float: left;
    padding:0 0 150px 0;
}
.reference .title{
    width: 100%;
    text-align: center;
    float: left;
    margin-bottom: 50px;
}
.reference .title span{
 font-size: 18px;
    color: #143072;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 10px;
        display: inline-block;
    position: relative;
}
.reference .title span:before{
    width: 100px;
    height: 1px;
    background: #eaeaea;
    content: '';
    position: absolute;
    left: -120px;
    top: 8px;
    content: '';
}
.reference .title span:after{
    width: 100px;
    height: 1px;
    background: #eaeaea;
    content: '';
    position: absolute;
    right: -120px;
    top: 8px;
    content: '';
}
.reference .title h4{
    font-size: 46px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #343434;
}
.reference .swiper{
    float: left;
    width: 100%;
}
.reference .swiper .box{
    float: left;
    width: 100%;
    height: 100px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reference .swiper .box img{
    width: 100%;
    height: 50px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
    object-fit: contain;
}
.reference .swiper .box img:hover{
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -o-transform: scale(1.02);
    -ms-transform: scale(1.02);
}
.reference .swiper .swiper-button{
    width: 100%;
    float: left;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.reference .swiper .swiper-button .btn{
    margin:0 10px;
    float: left;
    color: #143072;
    font-size: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.03);
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.reference .swiper .swiper-button .btn:hover{
    background:  #143072;
    color: #fff;
}
.contact-form{
    width: 100%;
    float: left;
    background: #143072;
    padding: 150px 0;
}
.contact-form .title{
    width: 100%;
    text-align: center;
    float: left;
    margin-bottom: 50px;
}
.contact-form .title span{
    font-size: 18px;
    color: #ff5d68;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
}
.contact-form .title span:before{
    width: 100px;
    height: 1px;
    background: #eaeaea1f;
    content: '';
    position: absolute;
    left: -120px;
    top: 8px;
    content: '';
}
.contact-form .title span:after{
    width: 100px;
    height: 1px;
    background: #eaeaea1f;
    content: '';
    position: absolute;
    right: -120px;
    top: 8px;
    content: '';
}
.contact-form .title h4{
    font-size: 46px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #fff;
}
.contact-form label.error{
        font-size: 12px;
    color: #fff;
        margin-bottom: 15px;
}
.contact-form input{
    width: 100%;
    height: 60px;
        padding: 0 20px;
       font-weight: 300;
    margin-bottom: 10px;
    background: #ffffff0f;
    color: #fff;
    border-radius: 4px;
}
.contact-form input::placeholder{
    font-size: 14px;
    color: #fff;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.contact-form input:focus::placeholder{
    letter-spacing: 1px;
}
.contact-form .nice-select{
    width: 100%;
    color: #fff;
    font-weight: 300;
     border-radius: 4px;
    padding: 0 20px;
    border: none;
    line-height: 60px;
    height: 60px;
    background: #ffffff0f;
}
.nice-select:after{
    right: 20px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}
.contact-form .nice-select .list{
    width: 100%;
    color: #363636;
}
.contact-form textarea{
    width: 100%;
    height: 120px;
    padding: 20px;
     margin-bottom: 10px;
     border-radius: 4px;
    color: #fff;
    font-weight: 300;
    background: #ffffff0f;
}
.contact-form textarea::placeholder{
    font-size: 14px;
    color: #fff;
       transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.contact-form textarea:focus::placeholder{
    letter-spacing: 1px;
}
.contact-form button{
    float: right;
    padding: 20px 40px;
    background: #ff5d68;
    margin-top: 15px;
    color: #fff;
    border-radius: 4px;
     transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.contact-form button:hover{
        background: #10275f;
}
.contact-form p{
    color: #ffffffc9;
    line-height: 150%;
    margin-bottom: 20px;
    font-weight: 300;
    margin-bottom: 30px;
    border-radius: 4px;
}
.contact-form p i{
    color: #fff;
    margin-right: 5px;
}
.brands{
    width: 100%;
    float: left;
    padding: 150px 0;
}
.brands .title{
    width: 100%;
    float: left;
}
.brands .title span{
    font-size: 18px;
    color: #143072;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 10px;
        display: inline-block;
    position: relative; 
}
.brands .title h4{
        font-size: 46px;
    font-weight: 500;
    color: #343434;
    letter-spacing: -1px;
}
.brands .swiper{
    margin-top: 40px;
}
.brands img{
    width: 100%;
    height:65px;
    object-fit: contain;
}
footer{
    width: 100%;
    float: left;
    background: #fafafa;
    padding: 150px 0 50px 0;
}
footer .center .row .col-lg-3:nth-child(3n){
    padding-left: 40px;
}
footer img{
    width: 170px;
    margin-bottom: 30px;
}

footer h3{
    font-size: 22px;
    color: #343434;
    line-height: 150%;
    margin-bottom: 20px;

}
footer form{
    width: 400px;
    position: relative;
 
}
footer form input{
    background: #fff;
    float: left;
    width: 100%;
    padding: 20px;
           box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.03);
}
footer form button{
    position: absolute;
    padding: 20px;
    right: 0;
    top: 0;
    background: #143072;
    color: #fff;
    border-radius: 20px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
footer form button:hover{
    background: #ff5d68;
}
footer form input{
    border-radius: 10px;
    width: 100%;
        transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
footer form input:focus{
        background: #eef3fe;
    
}
footer form input::placeholder{
    font-weight: 300;
        transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
footer form input:focus::placeholder{
    color: #143072;
}
footer .center{
    width: 100%;
    float: left;
    padding-bottom: 30px;
}
footer .container{
    position: relative;
}
footer .box{
        padding: 50px 30px;
    background: #143072;
    float: left;
    border-radius: 10px;

    width: 100%;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.03);
}
footer .box p{
    margin-bottom: 30px;
}
footer .subs{
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ededed;
    margin-bottom: 50px;
    padding-bottom: 20px;
}
footer p:nth-child(2) i{
    margin-bottom: 15px;
}
footer p{
    font-size: 14px;
    line-height: 150%;
    margin-bottom: 15px;
    font-weight: 300;
    color: #ffffff;
    float: left;
    width: 100%;
}
footer p i{
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    margin-right: 15px;

    font-size: 20px;
    /* width: 30px; */
    /* height: 30px; */
    border-radius: 50%;
}
footer p:last-child{
    margin-bottom: 0;
}
footer .right{
    padding-left: 40px;
}
footer h4{
    margin-bottom: 20px;
    font-size: 18px;
    color: #143072;
    font-weight: 600;
}
footer ul li{
       font-size: 15px;
    display: block;
    font-weight: 300;
    color: #6a6a6a; 
    text-align: left;
}
footer ul li a{
    font-size: 15px;
    margin-bottom:20px;
    display: block;
    font-weight: 300;
    color: #343434;
    position: relative;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
footer ul li a:before{
    position: absolute;
    top: 5px;
    left: -15px;
    content: '';
    background: #143072;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
        transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
footer ul li a:hover{
    color: #143072;
}
footer ul li a:hover:before{
     color: #143072;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
}

footer ul li .icon{
    margin-right: 10px;
    float: left;
}
footer ul.cnt li{
        float: left;
    line-height: 150%;
    font-size: 14px;
    margin-bottom: 15px;
}
footer ul.cnt li a{
     float: left;
    line-height: 150%;
    font-size: 14px;
    margin-bottom: 0;
    width: 35px;
    height: 35px;
    display: flex;
    color: #143072;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 50%;
    margin-right: 10px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
footer ul.cnt li a:before{
    display: none;
}
footer ul.cnt li a:hover{
    background: #143072;
    color: #fff;
}
footer .col-lg-3{
    padding-left: 80px;
}
.footer-bottom{
    width: 100%;
    background: #fff;
    float: left;
    padding: 20px 0;
    border-top: 1px solid #f7f7f7;
}
.footer-bottom h4{
    font-size: 14px;
    float: left;
    color: #343434;
    font-weight: 300;
}
.footer-bottom a{
    font-size: 14px;
    float: right;
        font-weight: 300;
    color: #343434;
}
header .menu .cls{
    display: none;
}
header .menu ul li:last-child{
    display: none;
}
header .menu-toggle{
    float: right;
    margin-top: 18px;
    display: none;
}
header .menu-toggle span{
   display: block;
    width: 25px;
    height: 2px;
    margin-bottom: 5px;
    background:#fff;
    position: relative;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
header .menu-toggle.active span:first-child{
      top: 7px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
}
header .menu-toggle span:nth-child(2){
    right: 0px;
    opacity: 1;
}
header .menu-toggle.active span:nth-child(2){
    right: 50px;
    opacity: 0;
}
header .menu-toggle.active span:last-child{
   top: -7px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    width: 25px;
}
.bread{
        width: 100%;
    padding: 40px 0;
    background: #143072;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.bread h4{
    text-align: center;
    width: 60%;
    font-size: 32px;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 600;
}
.bread .bottom{
        color:#ffffffb0;
    display: flex;
    align-items: center;
}
.bread .bottom i{
    margin: 0 5px;
}
.bread .bottom a{
    color: #ffffffb0;
    font-size: 14px;
    font-weight: 300;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.bread .bottom a:hover{
    color: #fff;
}
.about-page{
    width: 100%;
    float: left;
    padding: 150px 0 50px 0;
}
.about-page .left{
    float: left;
    width: 100%;
    position: relative;
}
.about-page .left:after{
    position: absolute;
    left: -35px;
    top: -35px;
    width: 80%;
    height: 100%;
    background: #14307212;
    content: '';
    z-index: -1;
}
.about-page .left .small-img{
    position: absolute;
    right: 50px;
    bottom: -40px;
    border-radius: 4px;
}
.about-page .left .small-img img{
    width: 200px;
    height: 250px;
    border: 10px solid #fff;
}
.about-page .left img{
    width: 85%;
    object-fit: cover;
    height: 600px;
}
.about-page .right{
    width: 100%;
    float: left;
}
.about-page .right span{
    font-size: 16px;
    color: #143072;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
}
.about-page .right h3{
        font-size: 38px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #343434;
    margin-bottom: 15px;
}
.about-page .right p{
        font-size: 16px;
    line-height: 150%;
    margin-bottom: 20px;
    font-weight: 300;
    color: #6a6a6a;
    float: left;
    width: 100%;
}
.about-page .right ul li{
    width: 100%;
    float: left;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.about-page .right ul li .icon{
       width: 40px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    margin-right: 15px;
    justify-content: center;
    background: #ff5d681a;
    color: #ff5d68;
    float: left;
}
.about-page .bottom{
    width: 100%;
    float: left;
    padding: 150px 0 50px 0;
}
.about-page .bottom .title{
    width: 100%;
    float: left;
    text-align: center;
    margin-bottom: 40px;
}
.about-page .bottom .title span{
    font-size: 16px;
    color: #143072;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
}
.about-page .bottom .title h4{
       font-size: 38px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #343434;
    margin-bottom: 15px;
}
.about-page .bottom .left-box{
        padding: 100px;
    background: #143072;
    border-radius: 4px;
    width: 100%;
}
.about-page .bottom .left-box h5{
        color: #fff;
    font-size: 34px;
    font-weight: 600;
    margin-bottom: 20px;
}
.about-page .bottom .left-box p{
        font-size: 16px;
    line-height: 150%;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 300;
}
.about-page .bottom .right-box{
    width: 100%;
    float: left;
}
.about-page .bottom .right-box .icon{
    width: 70px;
    height: 70px;
    background: #12307212;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    margin-right: 20px;
}
.about-page .bottom .right-box .icon img{
      width: 30px;
    height: 30px;
    object-fit: contain;
}
.about-page .bottom .right-box .box{
      padding: 35px;
    border-right: 1px solid #eff0f6;
}
.about-page .bottom .right-box .col-lg-3:last-child .box{
    border-right: none;
}
.about-page .bottom .right-box .box h6{
        color: #143072;
    font-weight: 600;
    font-size: 42px;
}
.about-page .bottom .right-box .box p{
    color: #959ba9;
    font-weight: 300;
    font-size: 16px;
    line-height: 150%;
}
.contact-page{
    width: 100%;
    float: left;
    padding: 100px 0;
}
.contact-page .right {
    width: 100%;
    float: left;
}
.contact-page .right ul li{
    margin-bottom: 15px;
    float: left;
    width: 100%;
}
.contact-page .right ul li .icon{
    width: 45px;
    height: 45px;
    background: #12307212;
    border-radius: 50%;
    display: flex;
    align-items: center;
    float: left;
    margin-right: 15px;
    justify-content: center;
    color: #143072;
}
.contact-page .right ul li p{
    font-size: 16px;
    font-weight: 300;
    line-height: 150%;
    color: #6a6a6a;
}
.contact-page .right ul li a{
    color: #6a6a6a;
    font-size: 16px;
    font-weight: 300;
    line-height: 270%;
}
.contact-page .right .title{
    width: 100%;
    float: left;
    text-align: left;
    margin-bottom: 20px;
}
.contact-page .right .title span{
    font-size: 16px;
    color: #143072;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
}
.contact-page .right .title h4{
  float: left;
    font-size: 18px;
    font-weight: 600;
    color: #143072;
    margin-top: 20px;
    margin-bottom: 15px;
}
.contact-page .right h6{
        float: left;
    font-size: 16px;
    font-weight: 600;
    color: #143072;
    margin-top: 20px;
    margin-bottom: 15px;
}
.contact-page .right .social{
    width: 100%;
    float: left;
}
.contact-page .right .social a{
        width: 35px;
    height: 35px;
    border: 1px solid #12307212;
    display: flex;
    align-items: center;
        color: #143072;
    justify-content: center;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.contact-page .right .social a:hover{
    background: #143072;
    color: #fff;
}
.contact-page .cnt-form{
    width: 100%;
    padding-top: 100px;
    float: left;
}
.contact-page .cnt-form .title{
    width: 100%;
    float: left;
    text-align: center;
    margin-bottom: 20px;
}
.contact-page .cnt-form .title span{
    font-size: 16px;
    color: #143072;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
}
.contact-page .cnt-form .title span:before {
    width: 100px;
    height: 1px;
    background: #eaeaea;
    content: '';
    position: absolute;
    left: -120px;
    top: 8px;
    content: '';
}
.contact-page .cnt-form .title span:after {
    width: 100px;
    height: 1px;
    background: #eaeaea;
    content: '';
    position: absolute;
    right: -120px;
    top: 8px;
    content: '';
}
.contact-page .cnt-form .title h4{
       font-size: 38px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #343434;
    margin-bottom: 15px;
}
.contact-page .cnt-form label{
        color: #586580;
    display: block;
    margin-bottom: 10px;
}
.contact-page .cnt-form input{
    width: 100%;
    height: 60px;
    background: #fafafa;
    padding: 0 20px;
    border: 1px solid #fafafa;
    margin-bottom: 20px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.contact-page .cnt-form input:focus{
       border: 1px solid #8e99b4;
}
.contact-page .cnt-form input::placeholder{
    color:#8e99b4;
    font-weight: 300;
}
.contact-page .cnt-form textarea{
    width: 100%;
    height: 150px;
    background: #fafafa;
        border: 1px solid #fafafa;
    padding:  20px;
    margin-bottom: 20px;
        transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.contact-page .cnt-form textarea:focus{
       border: 1px solid #8e99b4;
}
.contact-page .cnt-form button{
        border: 2px solid #143072;
    padding: 20px 30px;
    float: right;
    font-weight: 600;
    color: #143072;
    font-size: 16px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.contact-page .cnt-form button:hover{
    background: #143072;
    color: #fff;
}
.blog-page{
    width: 100%;
    float: left;
    padding: 100px 0;
}
.blog-page .box{
    width: 100%;
    float: left;
    margin-bottom: 40px;
}

.blog-page .box .image{
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
}
.blog-page .box .image:before{
    position: absolute;
    left: 0;
    top: 20px;
    width: 100%;
    z-index: 6;
    height: 1px;
    background: #fff;
    content: '';
}
.blog-page .box .image:after{
    position: absolute;
    left: 20px;
    top: 0px;
    width: 1px;
    z-index: 6;
    height: 100%;
    background: #fff;
    content: '';
}
.blog-page .box .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.blog-page .box:hover .image img{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}
.blog-page .box .text{
    padding: 30px 20px;
    width: 100%;
    float: left;
}

.blog-page .box .text span{
        font-size: 14px;
    font-weight: 300;
    line-height: 150%;
    margin-bottom: 5px;
    color: #34343499;
}
.blog-page .box .text h4{
    font-size: 22px;
        color: #343434;
    line-height: 150%;
}
.blog-page .box .text small{
        display: block;
    margin-top: 20px;
    float: left;
    text-decoration: underline;
    color: #123072;
    font-weight: 700;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.blog-page .box:hover .text small{
    color: #e30614;
}
.pagination{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.pagination li a{
    margin: 0 5px;
    color: #143072;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
        transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.pagination li span{
    border: none!important;
    background: #fff!important;
    padding: 0!important;
    margin: 0!important;
}
.pagination li.active a{
    background: #123072!important;
    color: #fff!important;
    border: none!important;
}
.pagination li a:hover{
    background: #123072!important;
    color: #fff!important;
}
.blog-detail{
    width: 100%;
    float: left;
    padding: 100px 0;
}
.blog-detail .left{
    width: 100%;
    float: left;
}
.blog-detail .left span{
    padding: 10px 15px;
    background: #f8faff;
    color: #143072;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
    display: inline-block;
}
.blog-detail .left h4{
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #343434;
    margin-bottom: 20px;
}
.blog-detail .left img{
    width: 100%;
    height: 450px;
    object-fit: cover;
        margin-bottom: 30px;
}
.blog-detail .left p{
        font-size: 16px;
    line-height: 150%;
    margin-bottom: 20px;
    font-weight: 300;
    color: #6a6a6a;
    float: left;
    width: 100%;
}
.blog-detail .left .bottom{
        float: left;
    width: 100%;
    border-top: 1px solid #f1f1f1;
    padding-top: 20px;
}
.blog-detail .left .bottom .social{
    float: left;
}
.blog-detail .left .bottom .social a{
    color: #143072;
    font-size: 16px;
    margin-right: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    border-radius: 50%;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.blog-detail .left .bottom .social a:hover{
    background:  #143072;
    color: #fff;
}
.blog-detail .left .bottom .tag{
    float: right;
}
.blog-detail .left .bottom .tag a{
    padding: 10px 15px;
    background: #f8faff;
    color: #143072;
    border-radius: 4px;
    font-size: 14px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;
        transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.blog-detail .left .bottom .tag a:hover{
    background:  #143072;
    color: #fff;
}
.blog-detail .right{
    width: 100%;
    float: left;
}
.blog-detail .right form{
    position: relative;
    width: 100%;
    float: left;
    margin-bottom: 30px;
}
.blog-detail .right input{
    width: 100%;
    height: 60px;
    background: #fafafa;
    padding: 0 20px;
    border: 1px solid #fafafa;
        transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.blog-detail .right input:focus{
    background: #fff;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid #f7f7f7;
}
.blog-detail .right button{
    position: absolute;
    right: 15px;
    top: 19px;
    font-size: 20px;
    color: #143072;
}
.blog-detail .right h4{
        color: #143072;
    font-size: 20px;
    font-weight: 600;
    float: left;
    margin-bottom: 25px;
    width: 100%;
}
.blog-detail .right .box{
    width: 100%;
    float: left;
    margin-bottom: 20px;
    border-bottom: 1px solid #f7f7f7;
    padding-bottom: 20px;
}
.blog-detail .right .box:last-child{
    border-bottom: none;
}
.blog-detail .right .box img{
    width: 65px;
    height: 65px;
    float: left;
    margin-right: 10px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.blog-detail .right .box h6{
    font-size: 18px;
    font-weight: 500;
    color: #343434;
    margin-bottom: 5px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.blog-detail .right .box:hover h6{
        color: #143072;
}
.blog-detail .right .box:hover img{
    transform: scale(1.04);
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -o-transform: scale(1.04);
    -ms-transform: scale(1.04);
}
.blog-detail .right .box span{
        font-weight: 300;
    color: #6a6a6a;
    font-size: 14px;
}
.product-page{
    width: 100%;
    float: left;
    padding: 100px 0;
}
.product-page .box{
    float: left;
    width: 100%;
    margin-bottom: 60px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.03);
}
.product-page .box .image{

    display: flex;
    align-items: center;
    justify-content: center;

}
.product-page .box img{
    height: 300px;
    /*box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;*/
    object-fit: contain;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.product-page .box .text{
        float: left;
    width: 100%;
    padding: 40px;
}
.product-page .box .text h4{
    width: 360px;
    overflow: hidden; /* taşanları gizle */
    white-space: nowrap; /* alt satıra hiç inme */
    text-overflow: ellipsis; /* eğer uzunsa üç nokta koy */

    float: left;
    width: 100%;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
    color: #123072;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.product-page .box .text p {
    float: left;
    font-size: 16px;
    font-weight: 300;
    line-height: 150%;
    color: #34343499;
}
.product-page .box:hover img {
    transform: scale(1.04);
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -o-transform: scale(1.04);
    -ms-transform: scale(1.04);
}

.product-page .box .text span{
    display: block;
    margin-top: 20px;
    float: left;
    text-decoration: underline;
    color: #123072;
    font-weight: 700;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.product-page .box:hover .text span{
       color: #e30614
}
.category{
    width: 100%;
    padding: 100px 0;
    float: left;
}
.category .box{
    float: left;
    padding: 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    width: 100%;
    border: 1px solid #f2f2f4;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.03);
}
.category .box .image{
        width: 45%;
    height: 200px;
    display: block;
        float: left;
        margin-right: 5%;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.category .box .image .filter{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgb(3 7 24 / 49%) 0%, rgba(5, 16, 54, 0) 63.5%);
    z-index: 5;
}
.category .box .image .filter small{
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    position: absolute;
    left: 20px;
    top: 20px;
}
.category .box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.category .box:hover img{
    transform: scale(1.08);
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -o-transform: scale(1.08);
    -ms-transform: scale(1.08);
}
.category .box .text{
    width: 50%;
    float: left;
}
.category .box .text h3{
 font-size: 20px;
    margin-bottom: 15px;
    FONT-WEIGHT: 600;
    color: #143072;
    margin-top: 20px;
}
.category .box .text p{
    float: left;
    font-size: 16px;
    font-weight: 300;
    line-height: 150%;
    color: #34343499;
}
.category .box .text span{
        display: block;
    margin-top: 20px;
    float: left;
    font-size: 14px;
    text-decoration: underline;
    color: #123072;
    font-weight: 700;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.category .box:hover .text span{
        color: #e30614;
}
.category .box:hover{
        transform: scale(1.04);
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -o-transform: scale(1.04);
    -ms-transform: scale(1.04);
}
.product-detail{
    width: 100%;
    float: left;
    padding: 100px 0;
}
.product-detail .top{
    width: 100%;
    float: left;
}
.product-detail .top .swiper img{
    width: 100%;
    height: 400px;
    object-fit: contain;
}
.product-detail .top .swiper a{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.product-detail .top .swiper a .icon{
animation: 2s ease-in-out infinite ani;
    position: absolute;
    left: 25px;
    top: 25px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #143072;
    font-size: 25px;
    border-radius: 50%;
    font-size: 25px;
    background: #ffffff;
    z-index: 5;
    display: flex;
    align-items: center;
    box-shadow: 0px 0px 28px 8px #00000017;
    justify-content: center;
}

@keyframes ani{0%,100%{transform:scale(1)}50%{transform:translateY(1.02)}}


.product-detail .top .swiper .swiper-button-next:after{
    color: #fff;
    font-size: 20px;
}

.product-detail .top .swiper .swiper-button-prev:after{
    color: #fff;
    font-size: 20px;
}
.product-detail .right{
    width: 100%;
    float: left;
}
.product-detail .right h4{
        font-size: 24px;
    margin-bottom: 15px;
    FONT-WEIGHT: 600;
    color: #143072;
    margin-top: 20px;
}
.product-detail .right p{
        float: left;
    font-size: 16px;
    font-weight: 300;
    line-height: 150%;
    color: #34343499;
}
.product-detail .right h6{
        font-size: 16px;
    margin-top: 30px;
    margin-bottom: 15px;
    FONT-WEIGHT: 600;
    color: #143072;
    float: left;
    width: 100%;
    position: relative;
}
.product-detail .right h6:after{
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 25px;
    height: 2px;
    background: #123072;
    content: '';
    border-radius: 12px;
}
.product-detail .right .bottom p{
    width: 100%;
    float: left;
    padding: 10px 0;
}
.product-detail .right p b{
    color: #363636;
    font-weight: 600;
    width: 80px;
    display: block;
    float: left;
}
.product-detail .bottom-tab{
    width: 100%;
    float: left;
    margin-top: 100px;
}
.product-detail .bottom-tab .tabs{
       width: 100%;
    float: left;
}
.product-detail .bottom-tab .tabs ul{
    border-bottom: 1px solid #f7f7f7;
    float: left;
    width: 100%;
}
.product-detail .bottom-tab .tabs ul li{
    float: left;
    padding: 25px 30px;
    cursor: pointer;
    display: block;
}
.product-detail .bottom-tab .tabs ul li.active{
    background: #143072;
    color: #fff;
}
.product-detail .bottom-tab .tabs .tabs-boxs{
    width: 100%;
    float: left;
    padding: 30px;
    background: #fcfcfc;
}
.product-detail .bottom-tab .tabs .tabs-boxs .box{
    width: 100%;
    float: left;
    display: none;
}
.product-detail .bottom-tab .tabs .tabs-boxs .box p{
        /*float: left;*/
    font-size: 16px;
    font-weight: 300;
    line-height: 150%;
    color: #34343499;
    margin-bottom: 20px;
}
.product-detail .bottom-tab .tabs .tabs-boxs .box .file-box{
    width: 100%;
    border: 1px solid #f7f7f7;
    padding: 15px;
    border-radius: 4px;
    float: left;
    background: #fff;
    margin-bottom: 30px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.03);
}
.product-detail .bottom-tab .tabs .tabs-boxs .box .file-box i{
    font-size: 62px;
    float: left;
    margin-right: 10px;
    color: #143072;
}
.product-detail .bottom-tab .tabs .tabs-boxs .box .text{
    float: left;
    padding: 6px 0;
}
.product-detail .bottom-tab .tabs .tabs-boxs .box .text h4{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}
.product-detail .bottom-tab .tabs .tabs-boxs .box .text p{
    font-size: 14px;
}
.product-detail .bottom-tab .tabs .tabs-boxs .box .butons{
    float: right;
    border-top: 1px solid #f7f7f7;
    width: 100%;
    padding-top: 15px;
}
.product-detail .bottom-tab .tabs .tabs-boxs .box .butons a{
     padding: 15px;
    background: #ffffff;
    border: 1px solid #f7f7f7;
    color: #454545;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47%;
    float: left;
    margin-right: 6%;
    text-align: center;
    font-size: 14px;
    margin-bottom: 5px;
    border-radius: 4px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.product-detail .bottom-tab .tabs .tabs-boxs .box .butons a:last-child{
    background: #f7f9ff;
    float: right;
    margin-right: 0;
    color: #143072;
}
.product-detail .bottom-tab .tabs .tabs-boxs .box .butons a:hover{
    background: #143072;
    color: #fff;
}
.product-detail .bottom-tab .tabs .tabs-boxs .box .butons a i{
    font-size: 16px;
    float: left;
    margin-right: 10px;
        transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
}
.product-detail .bottom-tab .tabs .tabs-boxs .box .butons a:hover i{
    color: #fff;
}

@media screen and (max-width:1100px){
    .product-page .box .text p {
        display: none;
    }
    .product-page .box .text h4 {
        white-space: unset;
        font-size: 16px;
    }
    .product-page .box {
        margin-bottom: 30px;
    }
    .product-page .box .text span{
        font-size: 14px;
    }
    .mobile-slider-image {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }

    .mobile-slider-image img {
        width: 48%;
        height: auto;
        border-radius: 5px;
        max-height: 150px;
    }
    .main-slider .swiper {
        margin-bottom: 20px;
    }
    html, body{
        overflow-x: hidden;
    }
    header .logo img{
        width: 130px;
    }
    header .right a.catalog{
        display: none;
    }
    header .container{
        display: inherit;
    }
    header .menu-toggle{
        display: block;
    }
    header .menu{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background: #fff;
    
    padding: 20px;
        visibility: hidden;
        opacity: 0;
        z-index: -1;
        transition: .2s;
        -webkit-transition: .2s;
        -moz-transition: .2s;
        -o-transition: .2s;
        -ms-transition: .2s;
    }
    header .menu.active{
         visibility: visible;
        opacity: 1;
        z-index:500;
    }
    header .menu ul li{
        padding: 20px 0;
        width: 100%;
        float: left;
    }
    header .menu ul {
        margin-top: 40px;
    }
    header .menu ul li:last-child{
        display: block;
    }
    header .menu ul li:last-child a{
            width: 100%;
    display: block;
    border: 1px solid #143072;
    padding: 20px;
    text-align: center;
    color: #143072;
    }
    header .menu ul li a{
        color: #363636;
        font-size: 18px;
    }
    header .menu .cls{
            display: block;
    position: absolute;
    right: 30px;
    top: 30px;
    font-size: 20px;
    }
    header .right .language{
        margin-top: 8px;
    }
    .main-slider .left h4{
        font-size: 30px;
    }
    .main-slider .right{
        display: none;
    }
    .main-slider{
        height: 500px;
    }
    .main-slider .swiper{
            padding: 60px 0;
    }
    .main-slider .swiper-pagination{
        bottom: 0;
    }
    .product{
        padding: 90px 0 20px 0;
    }
    .product .title{
        margin-bottom: 30px;
    }
    .product .title h4{
        font-size: 22px;
    }
    .product .title span{
        font-size: 14px;
        letter-spacing: 2px;
    }
    .product img{
        height: 200px;
    }
    .product .text p {
        display: none;
    }
    .product .box{
        margin-bottom: 40px;
        float: left;
    }
    .product .text h4{
        font-size: 18px;
    }
    .popular .title {
        margin-bottom: 30px;
    }
    .popular .title h4{
        font-size: 22px;
    }
    .popular .title span{
        font-size: 14px;
        letter-spacing: 2px;
    }
    .popular .swiper .box .text span{
        font-size: 14px;
    }
    .popular{
        padding-bottom: 50px;
    }
    .about {
        height: 950px;
    }
    .about .title h4{
        font-size: 22px;
    }
    .about p{
        font-size: 14px;
    }
    .about .title span{
        font-size: 14px;
        letter-spacing: 2px;
    }
    .about img{
        top: 0;
        height: 300px;
        margin-top: 50px;
        object-fit: cover;
    }
    .about .filter{
        padding: 50px 0;
    }
    .sss{
        padding: 50px 0;
    }
    .sss .title span{
        font-size: 14px;
        letter-spacing: 2px;
    }
    .sss .title h4{
        font-size: 22px;
    }
    .sss .title{
        margin-bottom: 30px;
    }
    .sss .sss-box{
        padding: 0;
    }
    .sss .sss-box h3{
        padding: 20px;
        font-size: 16px;
    }
    .sss .sss-box p{
        font-size: 14px;
    }
    .sss .sss-box h3 i{
        top: 20px;
    }
    .reference .title span{
        font-size: 14px;
        letter-spacing: 2px;
    }
    .reference .title span:after{
        width: 20px;
        right: -30px;
    }
    .reference .title span:before{
        width: 20px;
        left: -30px;
    }
    .reference .title h4{
        font-size: 22px;
    }
    .reference .title{
        margin-bottom: 30px;
    }
    .reference .swiper .swiper-button{
        margin-top: 20px;
    }
    .reference{
        padding-bottom: 50px;
    }
    .contact-form .title{
        margin-bottom: 30px;
    }
    .contact-form .title h4{
        font-size: 22px;
    }
    .contact-form .title span{
        font-size: 14px;
        letter-spacing: 2px;
    }
    .contact-form .title span:before{
        width: 40px;
         left: -50px;
    }
    .contact-form .title span:after{
        width: 40px;
        right: -50px;
    }
    .contact-form p{
        margin-bottom: 20px;
        margin-top: 25px;
        font-size: 14px;
    }
    .contact-form iframe{
        height: 300px!important;
    }
    .contact-form .nice-select{
        margin-bottom: 15px;
    }
    .contact-form{
        padding: 50px 0;
    }
    .brands{
        padding: 50px 0;
    }
    .brands .title{
        text-align: center;
    }
    .brands .title h4{
        font-size: 22px;
        text-align: center;
    }
    .brands .title span{
        font-size: 14px;
        text-align: center;
        letter-spacing: 2px;
    }
    footer .box{
        padding: 30px;
    }
    footer .right{
        padding-left: 0;
    }
    footer .subs{
        margin-top: 30px;
        display: inherit;
        float: left;
        margin-bottom: 30px;
    }
    footer{
        padding-top: 0;
    }
    footer h3{
        font-size: 16px;
    }
    footer form{
        width: 100%;
        float: left;
    }
    footer ul{
        margin-bottom: 30px;
    }
    .footer-bottom h4{
        font-weight: 300;
        text-align: center;
        width: 100%;
        margin-bottom: 10px;
    }
    .footer-bottom a{
        font-weight: 300;
        text-align: center;
        width: 100%;
    }
    .about a{
        padding: 15px 25px;
        font-size: 14px;
    }
    .about-page{
            padding: 70px 0 50px 0;
    }
    .about-page .left img{
        width: 100%;
        height: 400px;
    }
    .about-page .left .small-img{
        right: 0;
        
    }
    .about-page .right{
        padding-top: 50px;
    }
    .about-page .right h3{
        font-size: 22px;
    }
    .about-page .right p{
        font-size: 14px;
    }
    .about-page .left .small-img img{
            width: 150px;
    height: 200px;
    }
    .about-page .bottom{
        padding: 50px 0 0 0;
    }
    .about-page .bottom .title{
        margin-bottom: 20px;
    }
    .about-page .bottom .title{
        text-align: left;
    }
    .about-page .bottom .title h4{
        font-size: 22px;
    }
    .about-page .bottom .title span{
        font-size: 14px;
        letter-spacing: 2px;
    }
    .about-page .bottom .right-box .box{
        padding: 20px 0;
    }
    .about-page .bottom .right-box .box h6{
        font-size: 26px;
    }
    .about-page .bottom .right-box .icon{
        width: 55px;
        height: 55px;
    }
    .about-page .bottom .right-box .icon img{
        width: 25px;
        height: 25px;
    }
    .bread h4{
        width: 100%;
        font-size: 24px;
    }
    header .menu ul li ul{
       position: inherit;
    transition: 0s;
    float: left;
    margin-top: 20px;
    width: 100%;
    border-left: none;
    -webkit-transition: 0s;
    -moz-transition: 0s;
    -o-transition: 0s;
    -ms-transition: 0s;
    visibility: visible;
    opacity: 1;
    z-index: 5;
    display: none;
    }
    header .menu ul li ul li:last-child a{
        border: none;
            color: #343434;
            padding: 20px;
        text-align: left;
    }
    .contact-page{
        padding: 50px 0;
    }
    .contact-page .map iframe{
        height: 300px;
    }
    .contact-page .cnt-form .title h4{
        font-size: 28px;
    }
    .contact-page .cnt-form .title span{
        font-size: 14px;
        letter-spacing: 2px;
    }
    .blog-page{
        padding: 50px 0;
    }
    .blog-page .box .text h4{
        font-size: 18px;
    }
    .pagination{
        margin-top: 0;
    }
    .blog-detail{
        padding: 50px 0;
    }
    .blog-detail .left img{
        height: 250px;
    }
    .blog-detail .left h4{
        font-size: 22px;
    }
    .blog-detail .left p{
        font-size: 14px;
    }
    .blog-detail .right{
        margin-top: 40px;
    }
    .product-page{
        padding: 50px 0;
    }
    .product-page .box .image{
        height: 200px;
    }
    .product-page .box .text{
        padding: 20px;
    }
    .bread h4{
        font-size: 16px;
    }
    .bread .bottom{
            padding: 0 20px;
    text-align: center;
        display: initial;
    }
    .bread .bottom a{
        font-size: 12px;
    }
    .product-page .box img{
        height: 200px;
        width: 100%;
    }
    .category{
        padding: 50px 0;
    }
    .category .box{
        padding: 15px;
    }
    .category .box .image{
        width: 100%;
        margin-right: 0;
    }
    .category .box .text h3{
        font-size: 18px;
    }
    .category .box .text{
        width: 100%;
        padding: 15px;
    }
    .category .box .text p{
        font-size: 15px;
    }
    .product-detail{
        padding: 50px 0;
    }
    .product-detail .top .swiper img{
        height: 300px;
    }
    .product-detail .bottom-tab{
        margin-top: 50px;
    }
    header .right .search{
        display: none;
    }
    .product-detail .bottom-tab .tabs ul li{
        font-size: 14px;
        width: 50%;
        text-align: center;
        padding: 25px 0;
    }
    .product-detail .bottom-tab .tabs .tabs-boxs{
        padding: 20px;
    }
}