/*
Theme Name: GameBuffer
Theme URI: https://www.organiclick.com/
Author: Organiclick Team
Author URI: https://www.organiclick.com/
Description: Bu tema GameBuffer web sitesi için hazırlanmıştır.
Tags: 
Version: 1
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gamebuffer
Domain Path: /languages
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@import url('https://fonts.googleapis.com/css2?family=Work+Sans: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');

* {
	font-family: 'Work Sans', sans-serif;
}

body, html {
	font-size: 16px;
}

.menu{ 
	height: 190px;
}

.white-bg{
	background-color: rgba(243,243,243, 1);
}

.menu .link{
    font-style: normal;
    font-weight: bold;
    font-size: 1.55rem;
    color: rgba(12,19,26,1);
	text-decoration: none;
	padding: 0 20px;
}

.menu .login{
    font-weight: normal;
    font-size: 1.4rem;
    color: rgba(12,19,26,1);
	height: 50px;
	line-height: 50px;
	border: 2px solid rgba(12,19,26,1);
	border-radius: 25px;
	margin-left: 15px;
}

.menu .signup{
	font-weight: normal;
    font-size: 1.4rem;
    color: white;
	height: 50px;
	line-height: 50px;
	border: 2px solid white;
	border-radius: 25px;
	background-color: #c60012;
	margin-left: 15px;
}

.slider{
	height: 100vh;
}

.slider > .row{
	position: relative;
	height: 100%;
}

.slider .slider-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	z-index: -10;
}

.slider .slider-img-overlay {
	width: 100%;
	height: 100%;
	object-fit:scale-down;
	position: absolute;
	opacity: 0.24;
	z-index: -8;
}

.slider .title {
	width: 80%;
	left: 10%;
	top: 30%;
    position: absolute;
    line-height: 100px;
    text-align: center;
    font-style: normal;
    font-weight: normal;
    font-size: 5.3rem;
    color: rgba(255,255,255,1);
    letter-spacing: 1px;
	vertical-align: middle;
}
 
.slider .gamebuffer{
	width: 300px;
}

.slider .down{
	width: 60px;
	margin-top: 100px;
}

.slider .image-wrapper {
	top: auto;
	bottom: 0px;	
	height: 100%;
	padding-bottom: 50px;
}

.desc{
	margin-bottom: 150px;
}

.desc .title{
    text-align: center;
    font-style: normal;
    font-weight: bold;
    font-size: 2.8rem;
    color: rgba(12,19,26,1);
    letter-spacing: 1px;
	margin: 150px 0 50px;
}

.desc .infos > div{
    display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 90px 30px;
}

.desc .infos > div img{
    width: 45px;
}

.desc .infos > div .mini-title{
	text-align: center;
	font-style: normal;
	font-weight: normal;
	font-size: 1.9rem;
	color: rgba(12,19,26,1);
	margin: 20px 0 40px;
}

.desc .infos > div .details{
    text-align: center;
    font-style: normal;
    font-weight: lighter;
    font-size: 1.25rem;
    color: rgba(12,19,26,1);
}

.about-us{
	height: 90vh;
	background: #c81a22;
}

.about-us > .row{
	height: 100%;
	position: relative;
}

.about-us .about-us-img {
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	position: absolute;
	z-index: 2;
	opacity: 0.15;
}

.about-us .about-us-wrapper{
	height: 100%;
}

.about-us .title{
    text-align: center;
    font-style: normal;
    font-weight: bold;
    font-size: 2.8rem;
    color: rgba(255,255,255,1);
	padding-bottom: 70px;
}

.about-us .describ{
    line-height: 58px;
    text-align: center;
    font-style: normal;
    font-weight: lighter;
    font-size: 2.2rem;
    color: rgba(255,255,255,1);
}

#faq .card h5 .btn{
	line-height: 58px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    font-size: 2.2rem;
    color: rgba(24,31,37,1);
	text-decoration: none;
	white-space: normal;
}

#faq .card .card-header{
	background-color: rgba(246,246,246,1);
	border: unset;
}

#faq .card{
	border: unset;
	margin-bottom: 30px;
}

#faq {
	width: 80%;
}

#faq .card .card-body{
	padding: 40px;
	border: 1px solid rgba(0, 0, 0, 0.374);
	border-top: 0;
    font-style: normal;
    font-weight: normal;
    font-size: 1.8rem;
    color: rgba(120,120,120,1);
}

.footer {
	background-color: rgba(12,19,26,1);
	height: 90px;
}

.footer > div {
	height: 100%;
}

.footer .footer-img{
	width: 150px;
}

.footer .copyright{
    text-align: left;
    font-style: normal;
    font-weight: normal;
    font-size: 1.15rem;
    color: rgba(255,255,255,1);
}

.footer .social a img{
	width: 33px;
	margin-left: 20px;
}

.pricing{
	height: auto;
	position: relative;
	background:rgba(12,19,26,1);
}

.pricing .title{
    text-align: center;
    font-style: normal;
    font-weight: bold;
    font-size: 2.8rem;
    color: rgba(255,255,255,1);
	padding: 150px 0 30px;
}

.pricing .describ{
	line-height: 58px;
    text-align: center;
    font-style: normal;
    font-weight: normal;
    font-size: 2.2rem;
    color: rgba(255,255,255,1);
}

.pricing .describ-2{
    line-height: 58px;
    text-align: center;
    font-style: normal;
    font-weight: lighter;
    font-size: 2.2rem;
    color: rgba(255,255,255,1);
}

.pricing .sign-up{
	margin: 100px 0 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 550px;
	background-color: rgba(197,0,19,1);
	color: white;
	height: 70px;
	border-radius: 35px; 
    text-align: center;
    font-style: normal;
    font-weight: lighter;
    font-size: 2.5rem;
    color: rgba(255,255,255,1);
    letter-spacing: 2px;
	text-decoration: none;
}

.pricing .total{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	width: 300px;
	background-color: rgba(0,197,99,1);
    text-align: left;
    font-style: normal;
    font-weight: normal;
    font-size: 1.25rem;
    color: rgba(255,255,255,1);
	border-radius: 10px;
	margin-bottom: 100px;
	position: relative;
	left: auto;
	right: 0px;
}

.pricing .calculator{
	margin: 40px 0;
}

.pricing .calculator .title-calc{
	text-align: left;
	font-style: normal;
	font-weight: normal;
	font-size: 1.25rem;
	color: rgba(174,174,174,1);
}

.pricing .calculator .count{
	text-align: right;
	font-style: normal;
	font-weight: bold;
	font-size: 1.55rem;
	color: rgba(255,255,255,1);
}

.pricing .slider-form{
	-webkit-appearance: none;
	background-color: rgba(242,184,26,1);
	width: 100%;
	height: 10px;
}

.pricing .slider-form::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 30px;
	width: 30px;
	border-radius: 15px;
	background: #ffffff;
	cursor: pointer;
}

.pricing .slider-form::-moz-range-thumb {
	height: 30px;
	width: 30px;
	border-radius: 15px;
	background: #ffffff;
	cursor: pointer;
}  

.pricing #total-price{
	margin-left: 20px;
	font-weight: bold;
}

@media screen and (max-width: 600px) {
	body, html {
		font-size: 12px;
	}

	.menu{ 
		height: auto;
		padding: 20px 0;
	}

	.slider .title {
		font-size: 3rem;
		line-height: 3.3rem;
	}

	.desc .infos > div {
		padding: 0 10px 35px;
	}

	.desc {
		margin-bottom: 80px;
	}

	.pricing .sign-up {
		width: 90%;
	}

	#faq .card .card-body {
		padding: 20px;
	}

	#faq .card h5 .btn {
		line-height: 2.2rem;
		font-weight: normal;
		font-size: 1.9rem;
		white-space: normal;
	}

	.footer {
		height: auto;
	}
}