/*----------------------
PROWEB CSS
Author : Öztürk Ekinci, A. Fatih SEZER (BRO)
------------------------*/
/* IMPORTS ve FONTLAR */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('../vendor/font-awesome/css/font-awesome.min.css');
/* ROOT */
:root{
  --font-poppin:'Poppins', sans-serif;
  --font-roboto:'Roboto', sans-serif;
  --primary-color:#0f50ff;
  --transition1:0.4s all;
  --light-purple: #edf0ff;
  --color-title: #413E69;
  --color-description: #969ba7;
  --color-hover: #738dff;
  --color-small:#738dff;
  --btn-more:#dce2ff;
  --white:#fff;
}

/* components */
html{
 max-width: 100%;
 overflow-x: hidden;
}
body{}
a{
 text-decoration: none;
}
p{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
h1{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;

}
li{
 list-style: none;
}
.carousel-indicators li{
 background-color: var(--light-purple);
}
.carousel-indicators li.active{
 background-color: var(--primary-color);
}
.hidden{
 opacity: 0;
 visibility: hidden;
 width: 0;
 height: 0;
 position: absolute;
 transition: 0.4s all;
}
.text-right{
 text-align: right;
}
.text-left{
 text-align: left;
}
.text-center{
 text-align: center;
}
.link-secondary{
 text-decoration: none;
}
.bg-purplelight{
 background-color: var(--light-purple);
}
.btn{
  border-radius: 23px;
  min-width: 174px;
  font-size: 14px;
  letter-spacing: -0.8235294px;
  transition: var(--transition1);
}
.btn-primary{
 background-color:var(--primary-color);
 border-color: var(--primary-color);
}
.btn-more{
 position: relative;
 width: 34px;
 height: 34px;
 border-radius: 22px;
 background: var(--btn-more);
 display: block;
 text-align: center;
 line-height: 34px;
 margin: 1.25em auto;
}
.btn-more img{
 position: absolute !important;
 width: 17px !important;
 top: 9px;
 left: 0px;
 right: 0px;
 margin: 0 auto;
}
.btn-accordion{
 position: absolute;
 right: 1em;
 top: 0px;
 width: 34px;
 height: 34px;
 border-radius: 22px;
 background: var(--btn-more);
 font-size: 10px;
 display: block;
 text-align: center;
 line-height: 34px;
}
.btn-play{
 width: 64px;
 height: 64px;
 border-radius: 16px;
 background: var(--btn-more);
 display: block;
 position: absolute;
 text-align: center;
 line-height: 59px;
 bottom: 0px;
 top: 0px;
 left: 0;
 right: 0;
 margin: auto;
 z-index: 1;
 transition: 0.4s all;
}
.btn-play:hover{
 background: var(--light-purple);
}
.btn-submit{
 position: relative;
 width: 100%;
 height: 46px;
}
.btn-submit img{
 position: absolute;
 left: 1.5em;
 top: 1em;
 width: 17px;
}
.btn-download{
 width: 228px;
 height: 46px;
 border-radius: 23px;
 border: solid 1px var(--primary-color);
 line-height: 46px;
 color:var(--primary-color);
 font-family:var(--font-poppin);
 font-size: 17px;
 font-weight: 500;
 letter-spacing: -1px;
 text-align: center;
 position: relative;
 display: block;
}
.btn-download::before{
 content: "";
 position: absolute;
 left:1.5em;
 top: 1em;
 width: 17px;
 height: 14px;
 background: url(../images/icons/icon-download.svg) no-repeat;
 background-size: cover;
}
.btn-doc {
 float: right;
 font-size: 12px;
 transition: all 0.4s;
}
.btn-border{
 border-radius: 12px;
 border: solid var(--primary-color);
 background: var(--white);
 color: var(--primary-color);
 font-size: 14px;
 font-weight: 500;
}
input,
select,
textarea{
 border-radius: 8px !important;
 background: var(--light-purple) !important;
 border:none !important;
 color: var(--color-description) !important;
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
}

input,
select{
 height: 50px !important;
}
textarea{
 min-height: 94px !important;
}
select{
 background: #edf0ff url(../images/icons/icon-arrow-down.svg) 98% center no-repeat !important;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 color: var(--color-description) !important;
}
::-moz-placeholder { /* Firefox 19+ */
 color: var(--color-description) !important;
}
:-ms-input-placeholder { /* IE 10+ */
 color: var(--color-description) !important;
}
:-moz-placeholder { /* Firefox 18- */
 color: var(--color-description) !important;
}
.form-group{
 margin: 1em 0;
}
hr.divider-full{
 background: url(../images/bg-lines-str.svg) repeat-x;
 height: 49px;
 opacity: 1;
}
/*Modal*/
.modal-open .modal{background: rgb(237 240 255 / 64%);}
.modal-open .container-fluid, .modal-open .container {
 -webkit-filter: blur(2px);
 -moz-filter: blur(2px);
 -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}
.modal-content{
 background: #ffffff;
 box-shadow: 0px 10px 40px rgba(2,10,44,0.15);
 border-radius: 16px;
 padding: 1em;
}
.modal-content .btn-close{
 width: 17px !important;
 padding: 0px;
 height: 17px !important;
 background-size: cover;
 float: right;
}
.modal-content h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 24px;
 font-weight: 700;
 line-height: 24px;
 letter-spacing: -1.2px;
}
.cookie_quest{
 position: fixed;
 bottom: 0;
 z-index: 99999;
 width: 100%;
 opacity: 1 !important;
}
/*Header*/
.logo {
 width: auto;
 max-height: 50px;
}
#offcanvaser{
 display: none;
 position: absolute;
 right: 15px;
 top: 15px;
}
#offcanvaser i{
 font-size: 1.5em;
}
#offcanvaser:focus{box-shadow: none;}
.header-content {
 position: relative;
 z-index: 99;
 background: rgb(255 255 255 / 0%);
 box-shadow: 0px 10px 40px rgb(2 10 44 / 0%);
}
.header-content.sticky {
 position: fixed;
 width: 100%;
 z-index: 99;
 background: rgb(255 255 255 / 100%);
 box-shadow: 0px 10px 40px rgb(2 10 44 / 15%);
}
.header-content.sticky .py-1{
 padding: 0 !important;
 transition:0.2s all;
}
.header-content.sticky .py-4{
 padding-top: 0.5rem !important;
 padding-bottom: 0.5rem !important;
 transition:0.2s all;
}
nav.main-header .mheader-item,
nav.main-header .mheader-item .mheader-a{
 font-family: var(--font-poppin);
 color: var(--color-title);
 font-size: 17px;
 font-weight: 600;
 line-height: 50px;
 letter-spacing: -1px;
 text-decoration: none;
}
nav.main-header .mheader-item:hover,
nav.main-header .mheader-item:hover .mheader-a{
 color: var(--color-hover);
}
nav.main-header .mheader-item.has-sub .mheader-sub::before{
 content: "";
 width: 0;
 height: 0;
 position: absolute;
 left: 0;
 right: 0;
 margin: 0 auto;
 top: -20px;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-bottom: 20px solid white;
}
nav.main-header .mheader-item.has-sub .mheader-sub{
 position: absolute;
 margin-top: 20px;
 margin-left: 30px;
 max-width: 873px;
 opacity: 0;
 background: #ffffff;
 box-shadow: 0px 0px 10px rgba(2,10,44,0);
 padding: 15px;
 border-radius: 23px;
 visibility: hidden;
 transform: translateX(-50%);
 transition: var(--transition1);
}
nav.main-header .mheader-item.has-sub:hover .mheader-sub{
 position: absolute;
 visibility: visible;
 box-shadow: 0px 10px 40px rgba(2,10,44,0.15);
 opacity: 1;
}
nav.main-header .mheader-sub .mheader-subitem{
 padding: 15px;
 list-style: none;
 width: 33%;
 display: inline-block;
 transition: var(--transition1);
}
nav.main-header .mheader-sub .mheader-subitem a{
 text-decoration:none;
}
nav.main-header .mheader-item.has-sub .mheader-subitem:hover{
 background: var(--light-purple);
 border-radius: 23px;
}
nav.main-header .mheader-sub .mheader-subicon{
 margin-bottom: 20px;
 display: block;
 position: relative;
 text-align: center;
 width: 44px;
}
nav.main-header .mheader-sub .mheader-subicon::before{
 position: absolute;
 content: "";
 display: block;
 width: 44px;
 height: 44px;
 background: var(--btn-more);
 z-index: -1;
 border-radius: 100%;
 left: 0;
 right: 0;
 top: 3px;
 text-align: center;
}
nav.main-header .mheader-sub .mheader-subtitle{
 font-family: var(--font-poppin);
 color: var(--color-title);
 font-size: 18px;
 font-weight: 700;
 line-height: 24px;
 letter-spacing: -0.9px;
 display: block;
}
nav.main-header .mheader-sub .mheader-subtitle::after{
 content: "";
 width: 34px;
 height: 2px;
 display: block;
 border-radius: 1px;
 background: var(--color-title);
 margin: 10px 0;
}

nav.main-header .mheader-sub .mheader-subdescr{
 display: block;
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 13px;
 font-weight: 300;
 line-height: 22px;
}
/* FOOTER */
.footer a{
 color: var(--color-title);
}
.footer .social-link a{
 font-size: 24px;
 color: var(--color-title);
 margin-right: 15px;
}
.footer .copyright,
.footer .copyright .copyright-menu a{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 14px;
 text-decoration: none;
 font-weight: 300;
 line-height: 14px;
}
.footer .copyright-menu a{
 margin-left: 15px;
}

.footer .mfooter-item,
.footer .mfooter-item .mfooter-a{
 font-family: var(--font-poppin);
 color: var(--color-title);
 font-size: 17px;
 font-weight: 600;
 line-height: 50px;
 letter-spacing: -1px;
 text-decoration: none;
}
.footer .mfooter-item:hover,
.footer .mfooter-item:hover .mfooter-a{
 color: var(--color-hover);
}
/*---------------
ANA ALANLAR
---------------*/
/*PROWEB SLİDER*/
#proweb_slider::before {
 content: "";
 background: url(../images/bg-lines-cross.svg) no-repeat;
 background-position:center 20vh;
 height: 100%;
 width: 100%;
 display: block;
 position: absolute;
 z-index: -1;
}
#proweb_slider .carousel-item{
 min-height: 80vh;
 opacity: 0;
 transition: 0.6s opacity;
}
#proweb_slider .carousel-item.active{
 opacity: 1;
 transition: 0.6s opacity;
}
#proweb_slider small{
 color: var(--color-small);
 font-family: var(--font-roboto);
 font-size: 24px;
 font-weight: 300;
 line-height: 24px;
}
#proweb_slider h1{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 40px;
 font-weight: 700;
 line-height: 50px;
 letter-spacing: 0px;
 max-width: 571px;
 margin: 0 auto;
 margin-bottom: 1em !important;
}
#proweb_slider p{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
 max-width: 571px;
 margin: 0 auto;
 margin-bottom: 2em !important;
}
#proweb_slider .carousel-caption{
 position: relative;
 bottom: inherit;
 left: 0;
 right: 0;
 margin: 0 auto;
 margin-top: 10vh;
}
#proweb_slider .slider-image{
 position: relative;
 width: 100%;
}

/* PROWEB PRODUCTS*/
#proweb_products {}
#proweb_products .product-icon{
 width: 44px;
 height: 44px;
 border-radius: 22px;
 background: var(--light-purple);
 text-align: center;
 line-height: 42px;
 margin-bottom: 1em;
 transition: 0.4s all;
}
#proweb_products .products-title{
  max-width: 572px;
}

#proweb_products .product-item{
 border-radius: 16px;
 border: solid #f7f7f8;
 margin: 0.5%;
 width: 32%;
 padding: 2em;
 transition: 0.4s all;
}
#proweb_products .product-item:hover{
 border-radius: 16px;
 background: #ffffff;
 border:solid rgba(0,0,0,0);
 box-shadow: 0px 10px 40px rgba(2,10,44,0.15);
}
#proweb_products .product-item h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 18px;
 font-weight: 700;
 line-height: 24px;
 letter-spacing: -0.9px;
}
#proweb_products .product-item h2:after{
 content:"";
 width: 34px;
 height: 2px;
 border-radius: 1px;
 display: block;
 margin: 1em 0;
 background-color: var(--light-purple);
 transition: 0.4s all;
}

#proweb_products .product-item:hover h2:after{
 content:"";
 background-color: var(--color-title);
}
#proweb_products .product-item .btn-more{
 opacity: 0;
 transition: 0.4s all;
}
#proweb_products .product-item:hover .btn-more{
 opacity: 1;
 transition: 0.4s all;
}
/* PROWEB LOGOS*/
#proweb_logos .logo-item{
 filter: grayscale(1);
 transition: 0.4s all;
}
#proweb_logos .logo-item:hover{
 filter: grayscale(0);
 transition: 0.4s all;
}
/* PROWEB Description*/
#proweb_description .description-image{
 width: 50%;
 position:relative;
}

#proweb_description .description-caption{
 width: 50%
}
#proweb_description .description-icon{
 width: 100px;
 height: 100px;
 background: var(--btn-more);
 line-height: 100px;
 text-align: center;
 border-radius: 16px;
 display: inline-block;
 margin-right: 15px;
 vertical-align: top;
 margin-bottom: 4em;
}
#proweb_description .description-icon img{
 width: 44px;
 height: 44px;
}
#proweb_description .description-content{
 display: inline-block;
 width: calc(100% - 120px);
 vertical-align: center;
}
#proweb_description .description-caption h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;

}
#proweb_description .description-caption h2:after{
 content:"";
 width: 34px;
 height: 2px;
 border-radius: 1px;
 display: block;
 margin: 1em 0;
 background-color: var(--color-title);
 transition: 0.4s all;
}

#proweb_description .description-caption p{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
/* PROWEB VIDEO AREA*/
#proweb_video {
 position: relative;
}
#proweb_video .video-bg{
 position: relative;
 border-radius: 16px;
 overflow: hidden;
 padding: 0px;
}
#proweb_video .video-bg::before{
 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 z-index: 0;
 background: linear-gradient(180deg, rgba(0 2 10 / 48%), rgb(2 10 44 / 76%));
}
#proweb_video .video-bg img{
 width: 100%;
 border-radius: 16px;
 overflow: hidden;
}
#proweb_video .video-bg .caption{
 position: absolute;
 bottom: 5px;
 z-index: 5;
 padding: 3em;
}
#proweb_video .video-bg .caption h2{
 color: #ffffff;
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;

}
#proweb_video .video-bg .caption p{
 color: #ffffff;
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
/* Noyax Services*/
#proweb_services .services-title{
 max-width: 578px;
}
#proweb_services .services-title h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;

}
#proweb_services .services-title p{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
#proweb_services .service-item{
 width: 25%;
 padding: 2em;
}
#proweb_services .service-item .service-icon{
 width: 44px;
 height: 44px;
 border-radius: 22px;
 background: var(--light-purple);
 text-align: center;
 line-height: 42px;
 margin-bottom: 1em;
 transition: 0.4s all;
}
#proweb_services .service-item:hover .service-icon{
 background: var(--color-title);
 transition: 0.4s all;
}
#proweb_services .service-item h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 18px;
 font-weight: 700;
 line-height: 24px;
 letter-spacing: -0.9px;
}
#proweb_services .service-item h2::after{
 content: "";
 width: 24px;
 height: 2px;
 border-radius: 1px;
 display: block;
 margin: 1em 0;
 background-color: var(--light-purple);
 transition: 0.4s all;
}
#proweb_services .service-item:hover h2::after{
 content: "";
 background-color: var(--color-title);
 transition: 0.4s all;
}
#proweb_services .service-item p{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
#proweb_services .service-extra{
 position: relative;
 width: 50%;
 padding: 2em;
}
#proweb_services .service-extra::before{
 content: "";
 position: absolute;
 border-radius: 16px;
 background: var(--light-purple);
 top: 0;
 left: 0;
 width: 50vw;
 height: 100%;
 display:block;
 z-index: -1;
}
#proweb_services .service-extra h2{
 color: var(--btn-more);
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;

}
/* testimonials*/
#proweb_testimonials .testimonial-title{
 max-width: 578px
}
#proweb_testimonials .testimonial-title h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;

}
#proweb_testimonials .testimonial-title p{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
#proweb_testimonials .testimonial-item{
 border-radius: 16px;
 border: solid #f7f7f8;
 background: #ffffff;
 width: 32%;
 margin: 0.5%;
 padding: 2em;
 transition: 0.4s all;
}
#proweb_testimonials .testimonial-item:hover{
 box-shadow: 0px 10px 40px rgba(2,10,44,0.15);
 border:solid rgba(0,0,0,0);
}
#proweb_testimonials .testimonial-item h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 18px;
 font-weight: 700;
 line-height: 18px;
 letter-spacing: -0.9px;
}
#proweb_testimonials .testimonial-person{
 position: relative;
 border-radius: 16px;
 background: #f7f7f8;
 padding:1em 3em;
}
#proweb_testimonials .testimonial-person .person-image{
 position: absolute;
 left: -15px;
 border-radius: 100%;
 overflow: hidden;
}
#proweb_testimonials .testimonial-person h4{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 18px;
 font-weight: 700;
 line-height: 18px;
 margin: 0;
 letter-spacing: -0.9px;
}
#proweb_testimonials .testimonial-person span{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 14px;
 font-weight: 300;
 margin: 0px;
}
/*Contact Form*/
#proweb_form .contact-form-wrap{
 position: relative;
 border-radius: 16px;
 background: var(--light-purple);
 padding: 1.8em;
}
#proweb_form .contact-info{
 position: relative;
 width: 100%;
 border-radius: 16px;
 overflow: hidden;
}
#proweb_form .contact-info::before{
 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 display: block;
 z-index: 0;
 background: linear-gradient(180deg, rgba(0 2 10 / 48%), rgb(2 10 44 / 76%));
}
#proweb_form .contact-info .contact-info-image{
 width: 100%;
 border-radius: 16px;
 overflow: hidden;
}
#proweb_form .contact-info .caption{
 position: absolute;
 width: 100%;
 bottom: 0px;
 z-index: 5;
 padding: 1em 3em;
}
#proweb_form .contact-info .caption h2{
 color: #ffffff;
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;

 margin-bottom: 0.5em;
}
#proweb_form .contact-info .caption p{
 color: #ffffff;
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
#proweb_form .contact-info .caption p a{
 color: #ffffff;
}
#proweb_form .contact-form {
 border-radius: 16px;
 background: #ffffff;
 padding: 1.7em;
}
#proweb_form .contact-form h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 24px;
 font-weight: 700;
 line-height: 24px;
 letter-spacing: -1.2px;
 margin-bottom: 1em;
}
/*Blog*/
#proweb_blog .blog-title{
 max-width: 578px;
}
#proweb_blog .blog-title h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;

}
#proweb_blog .blog-title p{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
#proweb_blog .blog-item{
 width: 23%;
 margin: 1%;
 padding: 1em;
 display: inline-block;
 transition: 0.4s all;
}
#proweb_blog .blog-item:hover{
 margin-top: 2%;
 margin-bottom: 0;
 border-radius: 16px;
 background: #ffffff;
 box-shadow: 0px 10px 40px rgba(2,10,44,0.15);
}
#proweb_blog .blog-item h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 18px;
 font-weight: 700;
 line-height: 18px;
 letter-spacing: -0.9px;
}
#proweb_blog .blog-item img{
 border-radius: 8px;
 width: 100%;
 margin-bottom: 1em;
}
#proweb_blog .blog-item .btn-more{
 opacity: 0;
 transition: 0.4s all;
}
#proweb_blog .blog-item:hover .btn-more{
 opacity: 1;
 transition: 0.4s all;
}
/*SSS*/
#proweb_sss .sss-title{
 max-width: 578px;
}
#proweb_sss .sss-title h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;

}
#proweb_sss .sss-title p{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
#proweb_sss .sss-item{
 position: relative;
 border-radius: 16px;
 border: solid #f7f7f8;
 background: #ffffff;
 padding: 2em 1em;
}
#proweb_sss .sss-header{
 position: relative;
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 18px;
 font-weight: 700;
 line-height: 27px;
}

/*Blog Details*/
#proweb_blog_detail .blog-image img{
 border-radius: 16px;
 width: 100%;
}
#proweb_blog_detail .blog-content h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;

}
#proweb_blog_detail .blog-content h2::after{
 content: "";
 width: 75px;
 height: 2px;
 display: block;
 margin: 1em 0;
 border-radius: 1px;
 background: #020a2c;
}
#proweb_blog_detail .blog-content p{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
/* PROWEB Product Description*/
#proweb_product_description .description-image{
 width: 50%;
 position:relative;
}
#proweb_product_description .description-image::after{
 content: "";
 position: absolute;
 top: 10%;
 left: 0px;
 width: 100%;
 height: 80%;
 transform: translateX(-30%);
 background: url(../images/orn-noyax.svg) no-repeat;
}
#proweb_product_description .description-image img{
  border-radius: 16px;
  width: 100%;
  /*max-width: 847px;
  transform: translateX(-25%);
  */
  max-height: 506px;
}
#proweb_product_description .description-caption{
 width: 50%
}
#proweb_product_description .description-caption h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;

}
#proweb_product_description .description-caption h2:after{
 content:"";
 width: 34px;
 height: 2px;
 border-radius: 1px;
 display: block;
 margin: 1em 0;
 background-color: var(--color-title);
 transition: 0.4s all;
}

#proweb_product_description .description-caption p{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
/*PROWEB Description*/
#proweb_description_slider .carousel-inner{
 border-radius: 16px;
 background: #738dff;
 width: 100%;
 height: 230px;
}
#proweb_description_slider .carousel-item{
 height: 100%;
 opacity: 0;
 transition: 0.6s opacity;
}
#proweb_description_slider .carousel-item.active{
 opacity: 1;
 transition: 0.6s opacity;
}

#proweb_description_slider h1{
 color: #ffffff;
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;

}

#proweb_description_slider p{
 font-family: var(--font-roboto);
 color: #ffffff;
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
#proweb_description_slider .carousel-controller{
 position: absolute;
 margin: 0 auto;
 left: 0;
 right:0;
 bottom:4em;
 width: 80px;
}
#proweb_description_slider .carousel-control-prev,
#proweb_description_slider .carousel-control-next{
 width: 34px;
 height: 34px;
 border-radius: 22px;
 background: #dce2ff;
 text-align: center;
 opacity: 1 !important;
}
#proweb_description_slider .carousel-control-prev-icon{
 background: url(../images/icons/icon-long-arrow-left.svg) center no-repeat;
}
#proweb_description_slider .carousel-control-next-icon{
 background: url(../images/icons/icon-long-arrow-right.svg) center no-repeat;
}
/* advantage*/
#proweb_advantages .advantage-items{
 position: relative;
 padding: 2em;
}
#proweb_advantages .advantage-icon{
 width: 44px;
 height: 44px;
 border-radius: 22px;
 background: #dce2ff;
 text-align: center;
 line-height: 42px;
 margin-bottom: 1em;
 transition: 0.4s all;
}
#proweb_advantages .advantage-items:before{
 content: "";
 top: 0;
 left: 0;
 width: 50vw;
 height: 100%;
 position: absolute;
 border-radius: 16px;
 background:var(--light-purple);
 z-index: -1;
}
#proweb_advantages .advantage-item{
 width: 49%;
 display: inline-block;
}
#proweb_advantages .advantage-item h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 18px;
 font-weight: 700;
 line-height: 24px;
 letter-spacing: -0.9px;
}
#proweb_advantages .advantage-item h2:after{
 content:"";
 width: 34px;
 height: 2px;
 border-radius: 1px;
 display: block;
 margin: 1em 0;
 background-color: var(--btn-more);
 transition: 0.4s all;
}
#proweb_advantages .advantage-item ul{
 padding: 0px;
 padding-left: 1em;
}
#proweb_advantages .advantage-item li{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
/* Pricer */
#proweb_price .container{
 padding: 4em;
 border-radius: 16px;
 background: #edf0ff;
}
#proweb_price .price-title h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;

 margin-bottom: 1em;
}
#proweb_price .price-list{
 width: 49%;
 display: inline-block;
 vertical-align: top;
}
#proweb_price .price-note{
 color: #738dff;
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
#proweb_price .price-list ul{
 color: var(--color-title);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 32px;
 padding: 0 !important;
}
#proweb_price .price-list li::before{
 content: "";
 background: url(../images/icons/icon-checked.svg) no-repeat;
 background-size: cover;
 width: 14px;
 height: 14px;
 margin-right: 10px;
 display: inline-block;
 position: relative;
 float: left;
 top:9px;
}
#proweb_price .price-card{
 border-radius: 16px;
 background: #ffffff;
 padding: 1em;
}
#proweb_price .switch{
 width: 192px;
 height: 38px;
 border-radius: 23px;
 border: solid #738dff;
 background: #ffffff;
 text-align: center;
 margin: 1em auto;
 margin-bottom: 2em;
 position: relative;
 overflow: hidden;
}
#proweb_price .switch span{
 width: 96px;
 height: 38px;
 color: #738dff;
 font-family: var(--font-poppin);
 font-size: 14px;
 font-weight: 500;
 line-height: 38px;
 letter-spacing: -0.8235294px;
 display: inline-block;
}
#proweb_price .switch span.monthly {
  position: absolute;
  left: -3px;
  top: -3px;
}
#proweb_price .switch span.yearly {
  position: absolute;
  right: -3px;
  top: -3px;
}
#proweb_price .switch span.active{
  background: #738dff;
  color:#ffffff;
}
#proweb_price .product-name{
 color: #738dff;
 font-family: var(--font-poppin);
 font-size: 13px;
 font-weight: 300;
 line-height: 13px;
 width: 100%;
 display:block;
 text-align: center;
}
#proweb_price .price{
 width: 100%;
 text-align: center;
 margin: 1em;
 display: block;
}
#proweb_price .price b{
 color: var(--color-title);
 font-family: Helvetica;
 font-size: 36px;
 font-weight: 600;
 margin-right: 5px;
 line-height: 24px;
}
#proweb_price .price small{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 13px;
 font-weight: 300;
 line-height: 13px;
}
#proweb_price .pricer{
 border-radius: 16px;
 background: #edf0ff;
 padding: 1em;
 margin: 2em 0;
}
#proweb_price .first-pricer{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 24px;
 text-align: center;
 display: block;
}
#proweb_price .first-pricer b{
 display: block;
}
#proweb_price .first-pricer small{
 font-size: 13px;
}
#proweb_price .second-pricer{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 13px;
 font-weight: 300;
 line-height: 24px;
 text-align: center;
 margin-top: 1em;
 display: block;
}
#proweb_price .second-pricer span{
 color: #738dff;
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 700;
 line-height: 24px;
 text-align: center;
 display: block;
}
/*Product Management*/
#proweb_management .management-title{
 max-width: 578px;
}
#proweb_management .management-title h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;
}
#proweb_management .management-title p{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
#proweb_management .management-item{
 width: 50%;
 padding: 2em;
}
#proweb_management .management-item ul{
 padding-left: 1em;
}
#proweb_management .management-item ul li{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
#proweb_management .management-item .management-icon{
 width: 44px;
 height: 44px;
 border-radius: 22px;
 background: var(--light-purple);
 text-align: center;
 line-height: 42px;
 margin-bottom: 1em;
 transition: 0.4s all;
}
#proweb_management .management-item:hover .management-icon{
 background: var(--color-title);
 transition: 0.4s all;
}
#proweb_management .management-item h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 18px;
 font-weight: 700;
 line-height: 24px;
 letter-spacing: -0.9px;
}
#proweb_management .management-item h2::after{
 content: "";
 width: 24px;
 height: 2px;
 border-radius: 1px;
 display: block;
 margin: 1em 0;
 background-color: var(--light-purple);
 transition: 0.4s all;
}
#proweb_management .management-item:hover h2::after{
 content: "";
 background-color: var(--color-title);
 transition: 0.4s all;
}
#proweb_management .management-item p{
 color: var(--color-description);
 font-family: var(--font-roboto);
 font-size: 17px;
 font-weight: 300;
 line-height: 27px;
}
/*Referanslar Sayfası*/
/* PROWEB VIDEO AREA*/
#proweb_refer {
 position: relative;
}
#proweb_refer .refer-item:nth-child(odd) .refer-image,
#proweb_refer .refer-item:nth-child(odd) .refer-caption{
 float: left;
}
#proweb_refer .refer-item:nth-child(even) .refer-image,
#proweb_refer .refer-item:nth-child(even) .refer-caption{
 float: right;
}
#proweb_refer .refer-image{
 position: relative;
 border-radius: 16px;
 overflow: hidden;
 padding: 15px;
 width: 50%;
}

#proweb_refer .refer-image>img{
 width: 100%;
 border-radius: 16px;
 overflow: hidden;
 transition: 0.4s all;
}
#proweb_refer .refer-image:hover>img{
 transform: scale(1.1);
 transition: 0.4s all;
}
#proweb_refer .refer-caption{
 position: relative;
 width: 50%;
 padding: 1.5rem;
}
#proweb_refer .refer-caption h2 {
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 28px;
 font-weight: 700;
 line-height: 30px;
}
#proweb_refer .refer-caption ul{
 color: var(--color-title);
 font-family: var(--font-roboto);
 font-size: 15px;
 font-weight: 300;
 line-height: 32px;
 padding: 0 !important;
}
#proweb_refer .refer-caption li::before{
 content: "";
 background: url(../images/icons/icon-checked.svg) no-repeat;
 background-size: cover;
 width: 14px;
 height: 14px;
 margin-right: 10px;
 display: inline-block;
 position: relative;
 float: left;
 top:9px;
}

/*Documents*/
.document-tree{
 padding: 0;
}
.doc-header{
 font-family: var(--font-poppin);
 color: var(--color-title);
 font-size: 17px;
 font-weight: 600;
 line-height: 30px;
 text-decoration: none;
 transition: all 0.4s;
}
.doc-header.activer{
 border-bottom: 1px solid rgb(0 0 0 /10%);
 transition: all 0.4s;
}
.doc-suberitem a,
.doc-suberitem{
 color: var(--color-title);
 font-family: var(--font-roboto);
 font-size: 14px;
 font-weight: 300;
 line-height: 25px;
 padding: 0 !important;
}
.doc-suberitem a:before {
 content: "";
 background: url(../images/icons/icon-calendar.svg) no-repeat;
 background-size: cover;
 width: 14px;
 height: 14px;
 margin-right: 5px;
 display: inline-block;
 position: relative;
 float: left;
 top: 5px;
}

.docer-title h2{
 color: var(--color-title);
 font-family: var(--font-poppin);
 font-size: 36px;
 font-weight: 700;
 line-height: 24px;
}

.docer-title h2:after {
 content: "";
 width: 34px;
 height: 2px;
 border-radius: 1px;
 display: block;
 margin: 1em 0;
 background-color: var(--color-title);
 transition: 0.4s all;
}
/**/
.page-banner{
 height: 30vh;
 overflow: hidden;
}
.banner-background{
 position: relative;
 width: 100vw;
 height: 30vh;
 vertical-align: middle!important;
 padding: 10vh;
}
.banner-background:before{
 content: "";
 position: absolute;
 width: 100%;
 top: 0;
 left: 0;
 height: 30vh;
 background-color: rgb(15 80 255 / 50%);
}
.banner-content{
 position: relative;
 display: block;
 width: 100%;
 height: 100%;
 text-align: center;
 vertical-align: middle!important;
 z-index: 1;
}
.banner-content h1,
.banner-content p {
 color: #fff;
}
/*Media Queries*/
@media (max-width: 991.98px) {
 #offcanvaser{
  display: block;
 }
 .offcanvas-collapse {
  position: fixed;
  top: 56px; /* Height of navbar */
  bottom: 0;
  left: 100%;
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  overflow-y: auto;
  visibility: hidden;
  background-color: rgba(255, 255, 255, 0.9);
  transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, visibility .3s ease-in-out;
  transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
 }
 .offcanvas-collapse.open {
  visibility: visible;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  height: 100vh;
  width: 100vw;
  padding: 10vh 2vh;
 }
 /*header-footer*/
 .mheader-sub{display: none}
 .copyright .d-block,
 .copyright-menu{
  text-align: center;
  margin: 1em 0;
 }
 /*components*/
 /*slider*/
 #proweb_slider .slider-image{
  width: 100%;
 }
 #proweb_slider small{
  font-size: 15px;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  display: block;
 }
 #proweb_slider h1{
  font-size: 30px;
  line-height: 36px;
  text-align: center;
 }
 #proweb_slider p{
  font-size: 15px;
  line-height: 20px;
  text-align: center;
 }
 #proweb_slider .carousel-caption{
  left: 5%;
  right: 5%;
  text-align: center;
 }
 /*Products*/
 #proweb_products .products-title{
  text-align: center;
 }
 #proweb_products .product-item{
  width: 90%;
  margin: 0.5em 5%;
 }
 /*Logolar*/
 #proweb_logos .logo-item{
  text-align: center;
 }
 /*Description*/
 #proweb_product_description .description-image,
 #proweb_product_description .description-caption,
 #proweb_product_description .description-image img,
 #proweb_description .description-image,
 #proweb_description .description-caption,
 #proweb_description .description-image img{
  width: 100%;
  transform: none;
 }
 /*noyax Video*/
 #proweb_video .video-bg .caption{
   padding: 2em;
   text-align: center;
 }
 #proweb_video .video-bg .caption p{
  display: none;
 }
 #proweb_video .video-bg .caption h2{
  font-size: 30px;
  line-height: 30px;
 }
 /*Services*/
 #proweb_services .services-title{
  text-align: center;
 }
 #proweb_services .service-item{
  width: 50%;
 }
 #proweb_services .service-item h2::after,
 #proweb_services .service-item .service-icon{
  margin: 1em auto;
 }
 #proweb_services .service-extra,
 #proweb_services .service-extra::before{
  width: 100%;
 }
 /*testimonial*/
 #proweb_testimonials .testimonial-title{
  width: 100%;
  text-align: center;
 }
 #proweb_testimonials .testimonial-item{
  width: 100%;
 }
 /*Blog*/
 #proweb_blog .blog-title{
  text-align: center;
 }
 #proweb_blog .blog-item{
  width: 100%;
 }
 /*product management*/
 #proweb_product_description .description-caption h2,
 #proweb_product_description .description-caption h2:after,
 #proweb_product_description .description-caption p,
 #proweb_product_description .description-caption a,
 #proweb_management .management-title,
 #proweb_management .management-icon,
 #proweb_management .management-item p,
 #proweb_management .management-item h2,
 #proweb_management .management-item h2:after{
  margin: 1em auto;
  display: block;
  text-align: center;
 }
 #proweb_management .management-item{
  width: 100%;
 }
 /*Carousel Description*/
 #proweb_description_slider .carousel-inner,
 #proweb_description_slider .carousel-caption{
  position: relative;
  padding: 1em;
  left:0;
  right: 0;
  bottom:0;
  height: auto;
 }
 #proweb_description_slider h1{
  font-size: 27px;
  line-height: 30px;
 }
 /*advantages*/
 #proweb_advantages .advantage-title{
  text-align: center;
 }
 #proweb_advantages .advantage-items:before,
 #proweb_advantages .advantage-item{
  width: 100%;
 }
 /*Price*/
 #proweb_price .price-list{
  width: 100%;
 }
 #proweb_price .price-card{
  margin-top: 2em;
 }
 #proweb_price .container{
  padding: 2em;
 }
 /*Contacts*/
 .contact-form-container,
 .contact-info-container{
  width: 100%;
  margin-bottom: 1em;
 }
 .contact-info .caption{
  padding: 1em !important;
 }
 .contact-info .caption h2{
  font-size: 30px !important;
  line-height: 32px !important;
 }
 .contact-info .caption p{
  font-size: 15px !important;
  line-height: 17px !important;
 }
 /*Reference Videos*/
 #proweb_refer .refer-item .refer-image,
 #proweb_refer .refer-item .refer-caption{
  float: none;
  width: 100%;
 }
}

@media (max-width: 578px) {
 nav.main-header .mheader-item, nav.main-header .mheader-item .mheader-a{
  line-height: 0;
  padding: 0;
 }
/*services*/
 #proweb_services .service-item{
  width: 100%;
  text-align:center;
 }
}