/**

* Template Name: Anyar - v2.2.1

* Template URL: https://bootstrapmade.com/anyar-free-multipurpose-one-page-bootstrap-theme/

* Author: BootstrapMade.com

* License: https://bootstrapmade.com/license/

*/

/*--------------------------------------------------------------

# General

--------------------------------------------------------------*/

body {

	/* font-family: "SatoshiLight"; */

	color: #444444;

}

p, h1,h2,h3,h4,h5 {

	margin-bottom: 0;

}

/* assets/css/custom.css */

/*@font-face {

    font-family: 'GambettaMedium';

    src: url('../fonts/gambetta/Gambetta-Medium.woff2') format('woff2');

    font-weight: normal;

    font-style: normal;

}*/

@font-face {

    font-family: 'GambettaLight';

    src: url('../fonts/gambetta/Gambetta-Light.woff2') format('woff2');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'GambettaReguler';

    src: url('../fonts/gambetta/Gambetta-Reguler.woff2') format('woff2');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'SatoshiLight';

    src: url('../fonts/gambetta/Satoshi-Variable.woff2') format('woff2');

    font-weight: normal;

    font-style: normal;

}

a {

	color: #0880e8;

}

a:hover {

	color: #2b99f8;

	text-decoration: none;

}

h1,

h2,

h3,

h4,

h5,

h6 {

	font-family: "Raleway", sans-serif;

}

/*--------------------------------------------------------------

# Back to top button

--------------------------------------------------------------*/

.back-to-top {

	position: fixed;

	display: none;

	right: 15px;

	bottom: 15px;

	z-index: 99999;

}

.back-to-top i {

	display: flex;

	align-items: center;

	justify-content: center;

	font-size: 20px;

	width: 40px;

	height: 40px;

	border-radius: 50px;

	background: #0880e8;

	color: #fff;

	transition: all 0.4s;

}

.back-to-top i:hover {

	background: #ffc412;

	color: #fff;

}

/*--------------------------------------------------------------

# Preloader

--------------------------------------------------------------*/

#preloader {

	position: fixed;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	z-index: 9999;

	overflow: hidden;

	background: #fff;

}

#preloader:before {

	content: "";

	position: fixed;

	top: calc(50% - 30px);

	left: calc(50% - 30px);

	border: 6px solid #000;

	border-top-color: #b9b9b9;

	border-radius: 50%;

	width: 60px;

	height: 60px;

	-webkit-animation: animate-preloader 1s linear infinite;

	animation: animate-preloader 1s linear infinite;

}

@-webkit-keyframes animate-preloader {

	0% {

		transform: rotate(0deg);

	}

	100% {

		transform: rotate(360deg);

	}

}

@keyframes animate-preloader {

	0% {

		transform: rotate(0deg);

	}

	100% {

		transform: rotate(360deg);

	}

}

/*--------------------------------------------------------------

# Disable aos animation delay on mobile devices

--------------------------------------------------------------*/

@media screen and (max-width: 768px) {

	[data-aos-delay] {

		transition-delay: 0 !important;

	}

}

/*--------------------------------------------------------------

# Top Bar

--------------------------------------------------------------*/

#topbar {

	height: 90px;

	font-size: 14px;

	transition: all 0.5s;

	overflow: hidden;

	color: rgba(255, 255, 255, 0.8);

}

#topbar.topbar-scrolled {

	top: -60px;

}

#topbar .contact-info ul {

	padding: 0;

	margin: 0;

	list-style: none;

}

#topbar .contact-info li {

	display: inline-block;

	padding: 0;

}

#topbar .contact-info li + li {

	margin-left: 18px;

}

#topbar .contact-info a {

	color: rgba(255, 255, 255, 0.8);

	transition: 0.3s;

}

#topbar .contact-info a:hover {

	color: #fff;

}

#topbar .contact-info i {

	color: #ffc412;

	padding-right: 4px;

}

#topbar .cta {

	background: transparent;

}

#topbar .cta a {

	color: #fff;

	background: #ffc412;

	padding: 6px 24px 8px 24px;

	display: inline-block;

	transition: 0.3s;

	border-radius: 50px;

}

#topbar .cta a:hover {

	background: #f1a40a;

}

/*--------------------------------------------------------------

# Header

--------------------------------------------------------------*/

#header {

	background-color: rgb(255, 255, 255);

	transition: all 0.5s;

	z-index: 997;

	padding: 10px 0;

}

#header .container{

	background: transparent;

}

#header.header-scrolled {

	top: 0;

	background: #FFFFFF !important;

}

#header .navbar-brand img {

	max-height: 40px;

	margin-left: -30px;

}

/* ========================START MENU======================================= */

.nav-link{

	display: flex;

	width: 100px;

	padding: 10px;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	gap: 10px;

}

.nav-link {

	font-family: 'GambettaLight';

	color: #131313;

	font-size: 18px;

	font-style: normal;

	font-weight: 500;

	line-height: normal;

	text-decoration: none;

	transition: all 0.3s ease-in-out;

  }

  .nav-item {

	display: table-cell;

	text-align: center;

	position: relative;

  }

  /* Gaya saat tautan dihover */

  .nav-link:hover {

	color: #131313; /* Mengubah warna teks saat dihover */

  }

  .nav-link.active::before {

	content: '';

	display: block;

	width: 0;

	position: absolute;

	bottom: 13px;

	height: 7px; /* Sesuaikan dengan keinginan Anda */

	background: #C2A058; /* Warna garis bawah saat tautan aktif */

	transition: all 0.3s ease-in-out;

  }

  .nav-link:hover::before {

	width: 40%;

  }

/* ========================END MENU======================================= */

/* Mobile Navigation */

.mobile-nav-toggle {

	position: fixed;

	right: 15px;

	top: 15px;

	z-index: 9998;

	border: 0;

	background: none;

	font-size: 24px;

	transition: all 0.4s;

	outline: none !important;

	line-height: 1;

	cursor: pointer;

	text-align: right;

}

.mobile-nav-toggle i {

	color: #fff;

}

.mobile-nav {

	position: fixed;

	top: 55px;

	right: 15px;

	bottom: 15px;

	left: 15px;

	z-index: 9999;

	overflow-y: auto;

	background: #fff;

	transition: ease-in-out 0.2s;

	opacity: 0;

	visibility: hidden;

	border-radius: 10px;

	padding: 10px 0;

}

.mobile-nav * {

	margin: 0;

	padding: 0;

	list-style: none;

}

.mobile-nav a {

	display: block;

	position: relative;

	color: #0665b7;

	padding: 10px 20px;

	font-weight: 500;

	outline: none;

}

.mobile-nav a:hover,

.mobile-nav .active > a,

.mobile-nav li:hover > a {

	color: #ffc412;

	text-decoration: none;

}

.mobile-nav .drop-down > a:after {

	content: "\ea99";

	font-family: IcoFont;

	padding-left: 10px;

	position: absolute;

	right: 15px;

}

.mobile-nav .active.drop-down > a:after {

	content: "\eaa1";

}

.mobile-nav .drop-down > a {

	padding-right: 35px;

}

.mobile-nav .drop-down ul {

	display: none;

	overflow: hidden;

}

.mobile-nav .drop-down li {

	padding-left: 20px;

}

.mobile-nav-overly {

	width: 100%;

	height: 100%;

	z-index: 9997;

	top: 0;

	left: 0;

	position: fixed;

	background: rgba(5, 74, 133, 0.6);

	overflow: hidden;

	display: none;

	transition: ease-in-out 0.2s;

}

.mobile-nav-active {

	overflow: hidden;

}

.mobile-nav-active .mobile-nav {

	opacity: 1;

	visibility: visible;

}

.mobile-nav-active .mobile-nav-toggle i {

	color: #fff;

}

/*--------------------------------------------------------------

# Hero Section

--------------------------------------------------------------*/

/*--------------------------------------------------------------

# Hero Section

--------------------------------------------------------------*/

/* ===================FONT NEW HERO=============================== */

h1,

h2,

h3,

h4,

h5,

h6 {

	font-family: "GambettaLight";

	color: #333333;

}

/* ===================NEW HERO=============================== */

.hero-new{

	/* padding-top: 150px; */

}

.bulatan {

	display: flex;

	padding: 30px;

}

.bulatan-tombol svg{

	width: 50px;

	height: 50px;

	color: #161616;

	margin-left: 20px; 

}

.bannertext{

	font-family: 'GambettaLight';

	font-size: 55px;

	font-weight: normal;

	font-style: normal;

	line-height:65px; /* 100% */

	letter-spacing: 2.55px;

	color: #161616;

	text-align: start;

}

/* Nex section 2 (hero-new-2) */

.hero-new2{

    width: 100%;

	 height: auto;

}

#hero-new3 {

    display: flex;

    width: 100%;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 80px;

    background-color: lightgray;

    background-size: cover;

    background-position: 50%;

    background-repeat: no-repeat;

}

.hero-new3 .brand-logo-gramercy {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 80px;

}

.hero-new3 .brand-logo-gramercy img {

    display: block;

    margin: 0 auto; 

}

.ourservice {

    display: flex;

    justify-content: center;

    text-align: center;

}

.ourservice .bagian {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

	margin-top: 30px;

}

.ourservice .bagian h3 {

    color: #FFF;

    font-family: 'GambettaLight';

    font-size: 28px;

    font-style: normal;

    font-weight: 400;

    line-height: 31px; /* 150% */

    letter-spacing: 1.02px;

    text-transform: uppercase;

	 margin-bottom: 16px;

}

.ourservice .bagian h5 {

    color: #B4B4B6;

    width: 320px;

    color: var(--foundation-dark-mode-light-active, #B4B4B6);

    text-align: center;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px; /* 150% */

}

.ourservice p {

    color: var(--foundation-dark-mode-light-active, #B4B4B6);

    text-align: center;

    font-size: 16px;

    font-weight: 400;

}

#hero-new4 {

	display: flex;

    width: 100%;

    /* height: 1373px; */

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 40px;

    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 8.85%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 24.73%, #000 62.34%), url(../../core-images/bersepeda.avif);

    background-color: lightgray;

    background-size: cover;

    background-position: 50%;

    background-repeat: no-repeat;

}

.lokasi p {

    color: #fafafa;

    font-size: 16px;

    line-height: 30px;

}

.lokasi .btn{

	color: #C2A058;;

	font-size: 20px;

	font-weight: 600;

}

.hero-new5 h2{

	color: #C2A058;

	font-size: 70px;

}

.hero-new5 .panah {

	line-height: 35px;

}

.hero-new5 .tombol-left a{

	color: #999999;

	width: 150px;

	font-size: 18px;

}

.hero-new5 .tombol-right span{

	color: #C2A058;

	width: 150px;

	font-size: 18px;

}

.hero-new5 .tombol-left svg{

	color: #999999;

}

.hero-new5 .tombol-right svg{

	color: #C2A058;

}

.hero-new5 .prenext .transparent-link {

    background: none; /* Menghapus latar belakang */

    border: none; /* Menghapus border */

    text-decoration: none; /* Menghapus efek underline pada tautan */

}

.hero-new6 button{

	margin:inherit;

	align-items: start;

	color: #C2A058;;

	font-size: 24px;

}

.hero-new6 .brand{

	margin:inherit;

	align-items: start;

}

.hero-new6 h1{

	font-size: 50px;

}

#hero-new7 {

	width: 100%;

	background: linear-gradient(279deg, rgba(0, 0, 0, 0.00) 43.67%, #000 100.01%), url(../../core-images/lush.png) center / cover no-repeat, lightgray 50% / cover no-repeat;

    /* Ganti '<path-to-image>' dengan URL gambar yang sesuai */

}

.hero-new7 h1{

	font-size: 65px;

	color: #ffffff;

}

.hero-new7 p{

	font-size: 18px;

	color: #333333;

	font-style: normal;

	font-weight: 400;

	line-height: 30px;

	align-self: stretch;

}

.hero-new7 .card{

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: flex-start;

	gap: 24px;

	width: 933px;

	background-color: #ffffff;

}

.hero-new7 .card button{

	margin: unset;

	padding: 0px;

	background: none;

	border: none;

	color: #C2A058;;

	font-size: 20px;

	font-weight: 500;

}

.hero-new8 p{

	line-height: 24px; 

	margin-top: 16px;

}

.hero-new8 button{

	margin: unset;

	padding: 0px;

	background: none;

	border: none;

	align-items: start;

	color: #C2A058;;

	font-size: 24px;

}

.hero-new8 .project-1{

	width: 100%;

	height: 700px;

	object-fit: cover;

}

.hero-new8 .project-2{

	width: 100%;

	padding-bottom: 24px;

	height: 350px;

	object-fit: cover;

}

.hero-new8 .project-3{

	width: 100%;

	height: 350px;

	object-fit: cover;

}

.arrowup{

	display: flex;

    align-items: center;

    gap: 9px;

	text-decoration: none;

}

.arrowup svg{

	width: 14px;

    height: 14px;

    fill: none;

    stroke: #5C5F66;

    stroke-width: 1.575;

    stroke-linecap: round;

    stroke-linejoin: round;

}

/* ====================================RESPONSIF HERO============================= */

@media (min-width: 991px) and (max-width: 1281px){

	#hero-new {

		padding-left: 15px;

		padding-right: 15px;

	}

	#hero-new4 {

		padding-left: 40px;

		padding-right: 40px;

	}

	#hero-new5 {

		padding-left: 40px;

		padding-right: 40px;

	}

	#hero-new6 {

		padding-left: 40px;

		padding-right: 40px;

	}

	#hero-new7 {

		padding-left: 40px;

		padding-right: 40px;

	}

	#hero-new8 {

		padding-left: 40px;

		padding-right: 40px;

	}

	.hero-new3 .brand-logo-gramercy {

		display: flex;

		flex-direction: column;

		justify-content: center;

		align-items: center;

		gap: 80px;

	}

	.hero-new3 .brand-logo-gramercy img {

		display: block;

		margin: 0 auto; 

	}

	#hero-new6 h1{

		font-size: 35px;

		justify-items: flex-end;

	}

	.ourservice {

		display: flex;

		justify-content: center;

		text-align: center;

	}

	.ourservice .col {

		display: flex;

		flex-direction: column;

		align-items: center;

		text-align: center;

		margin-top: 30px;

	}

	.ourservice .col h3 {

		color: #FFF;

		font-family: 'GambettaLight';

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 21px; /* 150% */

		letter-spacing: 0.50px;

		text-transform: uppercase;

	}

	.ourservice .col h5 {

		color: #B4B4B6;

		width: 200px;

		color: var(--foundation-dark-mode-light-active, #B4B4B6);

		text-align: center;

		font-family: 'SatoshiLight';

		font-size: 16px;

		font-style: normal;

		font-weight: 400;

		line-height: 20px; /* 150% */

	}

	.ourservice p {

		color: var(--foundation-dark-mode-light-active, #B4B4B6);

		text-align: center;

		font-family: 'SatoshiLight';

		font-size: 10px;

		font-style: italic;

		font-weight: 400;

		line-height: 38px; /* 342.857% */

	}

}

@media (min-width: 542px) and (max-width: 900px){

	#hero-new4 {

		padding-left: 30px;

		padding-right: 30px;

	}

	#hero-new6 {

		padding-left: 30px;

		padding-right: 30px;

	}

	#hero-new7 {

		padding-left: 30px;

		padding-right: 30px;

	}

	#hero-new8 {

		padding-left: 30px;

		padding-right: 30px;

	}

.bulatan {

	display: flex;

	padding: 30px;

}

.bulatan-tombol svg{

	width: 30px;

	height: 30px;

	color: #161616;

	margin-left: 20px; 

}

.bannertext{

	font-family: 'GambettaLight';

	font-size: 35px;

	font-weight: normal;

	font-style: normal;

	line-height: 65px; /* 100% */

	letter-spacing: 1.55px;

	color: #161616;

}

.baristwo .bannertext{

	text-align: right;

}

.baristwo .my-text {

    width: 1257px;

    color: #6D6D6D;

	margin-left: 71px;

	margin-right: 41px;

    font-family: 'Satoshi', sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

}

.baristree .bannertext{

	text-align: right;

}

#hero-new4 {

	display: flex;

    width: 100%;

    height: 1173px;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 40px;

    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 8.85%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 24.73%, #000 62.34%), url(../../core-images/bersepeda.avif);

    background-color: lightgray;

    background-size: cover;

    background-position: 50%;

    background-repeat: no-repeat;

}

.lokasi img{

	width: 100%;

	height: 300px;

}

.hero-new4 .brand-logo-gramercy img{

	width: 60%;

	height: 160px;

}

.row.lokasi p {

    color: var(--foundation-primary-green-light, #E6F6F4);

    text-align: center;

    font-family: 'SatoshiLight';

    font-size: 18px;

    font-style: normal;

    line-height: 26px; /* 150% */

}

.lokasi .btn{

	color: #C2A058;;

	font-size: 18px;

}

.hero-new5 h2{

	color: #C2A058;

	font-size: 50px;

}

.hero-new5 .panah {

	line-height: 25px;

}

.hero-new5 .tombol-left a{

	color: #999999;

	width: 100px;

	font-size: 16px;

}

.hero-new5 .tombol-right span{

	color: #C2A058;

	width: 100px;

	font-size: 16px;

}

.hero-new5 .tombol-left svg{

	color: #999999;

}

.hero-new5 .tombol-right svg{

	color: #C2A058;

}

.hero-new5 .prenext .transparent-link {

    background: none; /* Menghapus latar belakang */

    border: none; /* Menghapus border */

    text-decoration: none; /* Menghapus efek underline pada tautan */

}

.hero-new6 button{

	margin:inherit;

	align-items: start;

	color: #C2A058;;

	font-size: 18px;

}

.hero-new6 .brand{

	margin:inherit;

	width: 60%;

	height: 100px;

	align-items: start;

}

.hero-new6 h1{

	font-size: 22px;

}

.hero-new6 .unitalca{

	margin-top: 35px;

	width: 100%;

	justify-items: center;

	height: 200px;

}

#hero-new7 {

	width: 100%;

    height: 738px;

    background: linear-gradient(279deg, rgba(0, 0, 0, 0.00) 43.67%, #000 100.01%), url(../../core-images/lush.png) center / cover no-repeat, lightgray 50% / cover no-repeat;

    /* Ganti '<path-to-image>' dengan URL gambar yang sesuai */

}

.hero-new7 h1{

	font-size: 30px;

	color: #ffffff;

}

.hero-new7 p{

	font-size: 12;

	color: #333333;

	font-style: normal;

	font-weight: 400;

	line-height: 26px;

	align-self: stretch;

}

.hero-new7 .brand{

	width: 60%;

	height: 120px;

}

.hero-new7 .card{

	display: flex;

	padding: 2px;

	width: 450px;

	flex-direction: column;

	justify-content: start;

	align-items: flex-start;

	gap: 24px;

}

.hero-new7 .card button{

	margin: unset;

	padding: 0px;

	background: none;

	border: none;

	align-items: start;

	color: #C2A058;;

	font-size: 18px;

}

.hero-new8 h5{

	color: #6D6D6D;

    width: 550px;

    color: var(--foundation-dark-mode-light-active, #B4B4B6);

    text-align: center;

    font-family: 'SatoshiLight';

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 30px; 

	margin-top: 30px;

}

.hero-new8 button{

	margin: unset;

	padding: 0px;

	background: none;

	border: none;

	align-items: start;

	color: #C2A058;;

	font-size: 18px;

}

.hero-new8 .project-1{

	width: 100%;

	padding-bottom: 24px;

	height: 350px;

}

.hero-new8 .project-2{

	width: 100%;

	padding-bottom: 24px;

	height: 350px;

}

.hero-new8 .project-3{

	width: 100%;

	height: 350px;

}

.arrowup{

	display: flex;

    align-items: center;

    gap: 9px;

	text-decoration: none;

}

.arrowup svg{

	width: 10px;

    height: 10px;

    fill: none;

    stroke: #5C5F66;

    stroke-width: 1.575;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.hero-new8 .brand-logo-gramercy img{

	width: 45%;

	height: 120px;

}

}

/* ====================================RESPONSIF HERO============================= */

@media (min-width: 376px) and (max-width: 541px){

	#hero-new6 {

		padding-left: 30px;

		padding-right: 30px;

	}

	#hero-new8 {

		padding-left: 30px;

		padding-right: 30px;

	}

.bulatan {

	display: flex;

	padding: 30px;

}

.bulatan-tombol svg{

	width: 30px;

	height: 30px;

	color: #161616;

	margin-left: 20px; 

}

.bannertext{

	font-family: 'GambettaLight';

	font-size: 35px;

	font-weight: normal;

	font-style: normal;

	line-height: 65px; /* 100% */

	letter-spacing: 1.55px;

	color: #161616;

}

.baristwo .bannertext{

	text-align: right;

}

.baristwo .my-text {

    width: 1257px;

    color: #6D6D6D;

	margin-left: 71px;

	margin-right: 41px;

    font-family: 'Satoshi', sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

}

.baristree .bannertext{

	text-align: right;

}

/* Nex section 2 (hero-new-2) */

.hero-new2{

    height: 285px;

}

.hero-new3 .brand-logo-gramercy img {

    display: block;

    margin: 0 auto; 

}

.ourservice {

    display: flex;

    justify-content: center;

    text-align: center;

}

.ourservice .col {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

	margin-top: 30px;

}

.hero-new3 h3 {

    color: #FFF;

    font-family: 'GambettaLight';

    font-size: 40px;

    font-style: normal;

    font-weight: 400;

    line-height: 21px; /* 150% */

    letter-spacing: 0.50px;

    text-transform: uppercase;

}

.hero-new3 h5 {

    color: #B4B4B6;

    width: 220px;

    color: var(--foundation-dark-mode-light-active, #B4B4B6);

    text-align: center;

    font-family: 'SatoshiLight';

    font-size: 249px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px; /* 150% */

}

#hero-new4 {

	display: flex;

    width: 100%;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 40px;

    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 8.85%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 24.73%, #000 62.34%), url(../../core-images/bersepeda.avif);

    background-color: lightgray;

    background-size: cover;

    background-position: 50%;

    background-repeat: no-repeat;

}

.lokasi img{

	width: 100%;

	height: 300px;

}

.hero-new4 .brand-logo-gramercy img{

	width: 240px;

	margin-bottom: 32px;

}

.row.lokasi p {

    color: var(--foundation-primary-green-light, #E6F6F4);

    font-size: 18px;

}

.lokasi .btn{

	color: #C2A058;;

	font-size: 18px;

}

.hero-new5 h2{

	color: #C2A058;

	font-size: 50px;

}

.hero-new5 .panah {

	line-height: 25px;

}

.hero-new5 .tombol-left a{

	color: #999999;

	width: 100px;

	font-size: 16px;

}

.hero-new5 .tombol-right span{

	color: #C2A058;

	width: 100px;

	font-size: 16px;

}

.hero-new5 .tombol-left svg{

	color: #999999;

}

.hero-new5 .tombol-right svg{

	color: #C2A058;

}

.hero-new5 .prenext .transparent-link {

    background: none; /* Menghapus latar belakang */

    border: none; /* Menghapus border */

    text-decoration: none; /* Menghapus efek underline pada tautan */

}

.hero-new6 button{

	margin:inherit;

	align-items: start;

	color: #C2A058;;

	font-size: 18px;

}

.hero-new6 .brand{

	margin:inherit;

	width: 60%;

	height: 100px;

	align-items: start;

}

.hero-new6 h1{

	font-size: 22px;

}

.hero-new6 .unitalca{

	margin-top: 35px;

	width: 100%;

	justify-items: center;

	height: 200px;

}

#hero-new7 {

	width: 100%;

    background: linear-gradient(279deg, rgba(0, 0, 0, 0.00) 43.67%, #000 100.01%), url(../../core-images/lush.png) center / cover no-repeat, lightgray 50% / cover no-repeat;

    /* Ganti '<path-to-image>' dengan URL gambar yang sesuai */

}

.hero-new7 h1{

	font-size: 30px;

	color: #ffffff;

}

.hero-new7 p{

	font-size: 12;

	color: #333333;

	font-style: normal;

	font-weight: 400;

	line-height: 26px;

	align-self: stretch;

}

.hero-new7 .brand{

	width: 60%;

	height: 120px;

}

.hero-new7 .card{

	display: flex;

	padding: 2px;

	width: 300px;

	flex-direction: column;

	justify-content: start;

	align-items: flex-start;

	gap: 24px;

}

.hero-new7 .card button{

	margin: unset;

	padding: 0px;

	background: none;

	border: none;

	align-items: start;

	color: #C2A058;;

	font-size: 18px;

}

.hero-new8 h5{

	color: #6D6D6D;

    width: 550px;

    color: var(--foundation-dark-mode-light-active, #B4B4B6);

    text-align: center;

    font-family: 'SatoshiLight';

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 30px; 

	margin-top: 30px;

}

.hero-new8 button{

	margin: unset;

	padding: 0px;

	background: none;

	border: none;

	align-items: start;

	color: #C2A058;;

	font-size: 18px;

}

.hero-new8 .project-1{

	width: 100%;

	padding-bottom: 24px;

	height: 250px;

}

.hero-new8 .project-2{

	width: 100%;

	padding-bottom: 24px;

	height: 250px;

}

.hero-new8 .project-3{

	width: 100%;

	height: 250px;

}

.arrowup{

	display: flex;

    align-items: center;

    gap: 9px;

	text-decoration: none;

}

.arrowup svg{

	width: 10px;

    height: 10px;

    fill: none;

    stroke: #5C5F66;

    stroke-width: 1.575;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.hero-new8 .brand-logo-gramercy img{

	/* width: 45%; */

	height: 120px;

}

	}

.bulatan-tombol svg{

	width: 30px;

	height: 30px;

	color: #161616;

	margin-left: 20px; 

}

.bannertext{

	font-family: 'GambettaLight';

	font-size: 55px;

	font-weight: normal;

	font-style: normal;

	line-height: 75px; /* 100% */

	letter-spacing: 1.55px;

	color: #161616;

}

.baristwo .bannertext{

	text-align: right;

}

.baristwo .my-text {

    width: 1257px;

    color: #6D6D6D;

	margin-left: 71px;

	margin-right: 41px;

    font-family: 'Satoshi', sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

}

.baristree .bannertext{

	text-align: right;

}

#hero-new4 {

	display: flex;

    width: 100%;

    /* height: 1173px; */

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 20px;

    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 8.85%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 24.73%, #000 62.34%), url(../../core-images/bersepeda.avif);

    background-color: lightgray;

    background-size: cover;

    background-position: 50%;

    background-repeat: no-repeat;

}

.lokasi img{

	width: 100%;

	height: 300px;

}

.row.lokasi p {

    color: var(--foundation-primary-green-light, #E6F6F4);

    text-align: center;

    font-family: 'SatoshiLight';

    font-size: 18px;

    font-style: normal;

    line-height: 26px; /* 150% */

}

.lokasi .btn{

	color: #C2A058;;

	font-size: 18px;

}

.hero-new5 h2{

	color: #C2A058;

	font-size: 50px;

}

.hero-new5 .panah {

	line-height: 25px;

}

.hero-new5 .tombol-left a{

	color: #999999;

	width: 100px;

	font-size: 16px;

}

.hero-new5 .tombol-right span{

	color: #C2A058;

	width: 100px;

	font-size: 16px;

}

.hero-new5 .tombol-left svg{

	color: #999999;

}

.hero-new5 .tombol-right svg{

	color: #C2A058;

}

.hero-new5 .prenext .transparent-link {

    background: none; /* Menghapus latar belakang */

    border: none; /* Menghapus border */

    text-decoration: none; /* Menghapus efek underline pada tautan */

}

.hero-new6 button{

	margin:inherit;

	align-items: start;

	color: #C2A058;;

	font-size: 18px;

}

.hero-new6 .brand{

	margin:inherit;

	width: 60%;

	height: 100px;

	align-items: start;

}

.hero-new6 h1{

	font-size: 22px;

}

.hero-new6 .unitalca{

	margin-top: 35px;

	width: 100%;

	justify-items: center;

	height: 200px;

}

.hero-new7 .card button{

	margin: unset;

	padding: 0px;

	background: none;

	border: none;

	align-items: start;

	color: #C2A058;;

	font-size: 18px;

}

.hero-new8 h5{

	color: #6D6D6D;

    width: 550px;

    color: var(--foundation-dark-mode-light-active, #B4B4B6);

    text-align: center;

    font-family: 'SatoshiLight';

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 30px; 

	margin-top: 30px;

}

.hero-new8 button{

	margin: unset;

	padding: 0px;

	background: none;

	border: none;

	align-items: start;

	color: #C2A058;;

	font-size: 18px;

}

.hero-new8 .project-1{

	width: 100%;

	padding-bottom: 24px;

	height: 250px;

}

.hero-new8 .project-2{

	width: 100%;

	padding-bottom: 24px;

	height: 250px;

}

.hero-new8 .project-3{

	width: 100%;

	height: 250px;

}

.arrowup{

	display: flex;

    align-items: center;

    gap: 9px;

	text-decoration: none;

}

.arrowup svg{

	width: 10px;

    height: 10px;

    fill: none;

    stroke: #5C5F66;

    stroke-width: 1.575;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.hero-new8 .brand-logo-gramercy img{

	width: 240px;

	margin-bottom: 24px;

}

footer .social-links i{

	font-size: 28px;

	margin-left: 18px;

	color: #5C5F66;

}

footer .circle i{

	margin-bottom: 20px;

	font-size: 7px;

}

/* ===================END FOOTER=============================== */

#hero {

	width: 100%;

	height: 92vh;

	margin-top: 70px;

	background-color: rgba(63, 73, 83, 0.8);

	overflow: hidden;

	position: relative;

}

#hero .carousel,

#hero .carousel-inner,

#hero .carousel-item,

#hero .carousel-item::before {

	position: absolute;

	top: 0;

	right: 0;

	left: 0;

	bottom: 0;

}

#hero .carousel-item {

	background-size: cover;

	background-position: center;

	background-repeat: no-repeat;

}

#hero .carousel-item::before {

	content: "";

	/* background-color: rgba(194, 42, 42, 0.6); */

}

#hero .carousel-container {

	display: flex;

	justify-content: center;

	align-items: center;

	position: absolute;

	bottom: 0;

	top: 70px;

	left: 50px;

	right: 50px;

}

#hero .container {

	text-align: center;

}

#hero h2 {

	color: #fff;

	margin-bottom: 20px;

	font-size: 48px;

	font-weight: 700;

}

#hero p {

	-webkit-animation-delay: 0.4s;

	animation-delay: 0.4s;

	margin: 0 auto 30px auto;

	color: #fff;

}

#hero .carousel-inner .carousel-item {

	transition-property: opacity;

	background-position: center top;

}

#hero .carousel-inner .carousel-item,

#hero .carousel-inner .active.carousel-item-left,

#hero .carousel-inner .active.carousel-item-right {

	opacity: 0;

}

#hero .carousel-inner .active,

#hero .carousel-inner .carousel-item-next.carousel-item-left,

#hero .carousel-inner .carousel-item-prev.carousel-item-right {

	opacity: 1;

	transition: 0.5s;

}

#hero .carousel-inner .carousel-item-next,

#hero .carousel-inner .carousel-item-prev,

#hero .carousel-inner .active.carousel-item-left,

#hero .carousel-inner .active.carousel-item-right {

	left: 0;

	transform: translate3d(0, 0, 0);

}

#hero .carousel-control-prev,

#hero .carousel-control-next {

	width: 10%;

	top: 112px;

}

@media (max-width: 992px) {

	#hero .carousel-control-prev,

	#hero .carousel-control-next {

		top: 66px;

	}

}

#hero .carousel-control-next-icon,

#hero .carousel-control-prev-icon {

	background: none;

	font-size: 36px;

	line-height: 1;

	width: auto;

	height: auto;

	background: rgba(255, 255, 255, 0.2);

	border-radius: 50px;

	padding: 10px;

	transition: 0.3s;

	color: rgba(255, 255, 255, 0.5);

}

#hero .carousel-control-next-icon:hover,

#hero .carousel-control-prev-icon:hover {

	background: rgba(255, 255, 255, 0.3);

	color: rgba(255, 255, 255, 0.8);

}

#hero .carousel-indicators li {

	cursor: pointer;

	background: #fff;

	overflow: hidden;

	border: 0;

	width: 12px;

	height: 12px;

	border-radius: 50px;

	opacity: 0.6;

	transition: 0.3s;

}

#hero .carousel-indicators li.active {

	opacity: 1;

	background: #ffc412;

}

#hero .btn-get-started {

	font-family: "Raleway", sans-serif;

	font-weight: 500;

	font-size: 14px;

	letter-spacing: 1px;

	display: inline-block;

	padding: 14px 32px;

	border-radius: 4px;

	transition: 0.5s;

	line-height: 1;

	color: #fff;

	-webkit-animation-delay: 0.8s;

	animation-delay: 0.8s;

	background: #ffc412;

}

#hero .btn-get-started:hover {

	background: #df3740;

}

@media (max-width: 992px) {

	#hero {

		height: 100vh;

	}

	#hero .carousel-container {

		top: 8px;

	}

}

@media (max-width: 768px) {

	#hero h2 {

		font-size: 28px;

	}

}

@media (min-width: 1024px) {

	#hero .carousel-control-prev,

	#hero .carousel-control-next {

		width: 5%;

	}

}

@media (max-height: 500px) {

	#hero {

		height: 120vh;

	}

}

/*--------------------------------------------------------------

# Sections General

--------------------------------------------------------------*/

section {

	padding: 60px 0;

	overflow: hidden;

}

.section-bg {

	background-color: #f1f8ff;

}

.section-title {

	text-align: center;

	padding-bottom: 30px;

}

.section-title h2 {

	font-size: 32px;

	font-weight: bold;

	text-transform: uppercase;

	margin-bottom: 20px;

	padding-bottom: 0;

	color: #054a85;

}

.section-title p {

	margin-bottom: 0;

	font-style: italic;

}

/*--------------------------------------------------------------

# Icon Boxes

--------------------------------------------------------------*/

.icon-boxes {

	padding-top: 0;

}

.icon-boxes .icon-box {

	padding: 40px 30px;

	position: relative;

	overflow: hidden;

	background: #fff;

	box-shadow: 5px 10px 29px 0 rgba(68, 88, 144, 0.2);

	transition: all 0.3s ease-in-out;

	border-radius: 10px;

}

.icon-boxes .icon {

	margin: 0 auto 20px auto;

	display: inline-block;

	text-align: center;

}

.icon-boxes .icon i {

	font-size: 36px;

	line-height: 1;

	color: #ffc412;

}

.icon-boxes .title {

	font-weight: 700;

	margin-bottom: 15px;

	font-size: 18px;

}

.icon-boxes .title a {

	color: #05579e;

}

.icon-boxes .description {

	font-size: 15px;

	line-height: 28px;

	margin-bottom: 0;

	color: #777777;

}

/*--------------------------------------------------------------

# About Us

--------------------------------------------------------------*/

.about {

	padding: 50px 0;

	background: url("../img/about-bg.png") top center no-repeat;

	position: relative;

}

.about:before {

	content: "";

	background: rgba(255, 255, 255, 0.75);

	position: absolute;

	bottom: 0;

	top: 0;

	left: 0;

	right: 0;

}

.about .container {

	position: relative;

}

.about .content h3 {

	font-weight: 600;

	font-size: 26px;

}

.about .content ul {

	list-style: none;

	padding: 0;

}

.about .content ul li {

	padding-left: 28px;

	position: relative;

}

.about .content ul li + li {

	margin-top: 10px;

}

.about .content ul i {

	position: absolute;

	left: 0;

	top: 2px;

	font-size: 20px;

	color: #0880e8;

	line-height: 1;

}

.about .content p:last-child {

	margin-bottom: 0;

}

.about .content .btn-learn-more {

	font-family: "Raleway", sans-serif;

	font-weight: 600;

	font-size: 14px;

	letter-spacing: 1px;

	display: inline-block;

	padding: 12px 32px;

	border-radius: 5px;

	transition: 0.3s;

	line-height: 1;

	color: #0880e8;

	-webkit-animation-delay: 0.8s;

	animation-delay: 0.8s;

	margin-top: 6px;

	border: 2px solid #0880e8;

}

.about .content .btn-learn-more:hover {

	background: #0880e8;

	color: #fff;

	text-decoration: none;

}

@media (max-width: 992px) {

	.about {

		padding: 60px 0;

	}

}

/*--------------------------------------------------------------

# Clients

--------------------------------------------------------------*/

.clients .owl-item {

	display: flex;

	justify-content: center;

	align-items: center;

	padding: 0 20px;

}

.clients .owl-item img {

	width: 60%;

	opacity: 0.5;

	transition: 0.3s;

}

.clients .owl-item img:hover {

	opacity: 1;

}

.clients .owl-nav,

.clients .owl-dots {

	margin-top: 5px;

	text-align: center;

}

.clients .owl-dot {

	display: inline-block;

	margin: 0 5px;

	width: 12px;

	height: 12px;

	border-radius: 50%;

	background-color: #ddd !important;

}

.clients .owl-dot.active {

	background-color: #0880e8 !important;

}

/*--------------------------------------------------------------

# Why Us

--------------------------------------------------------------*/

.why-us {

	background: #f1f8ff;

	padding: 0;

}

.why-us .content {

	padding: 60px 100px 0 100px;

}

.why-us .content h3 {

	font-weight: 400;

	font-size: 34px;

}

.why-us .content h4 {

	font-size: 20px;

	font-weight: 700;

	margin-top: 5px;

}

.why-us .content p {

	font-size: 15px;

	color: #848484;

}

.why-us .video-box {

	background-size: cover;

	background-repeat: no-repeat;

	background-position: center center;

	min-height: 400px;

	position: relative;

}

.why-us .accordion-list {

	padding: 0 100px 60px 100px;

}

.why-us .accordion-list ul {

	padding: 0;

	list-style: none;

}

.why-us .accordion-list li + li {

	margin-top: 15px;

}

.why-us .accordion-list li {

	padding: 20px;

	background: #fff;

	border-radius: 4px;

}

.why-us .accordion-list a {

	display: block;

	position: relative;

	font-family: "Poppins", sans-serif;

	font-size: 16px;

	line-height: 24px;

	font-weight: 500;

	padding-right: 30px;

	outline: none;

}

.why-us .accordion-list span {

	color: #0880e8;

	font-weight: 600;

	font-size: 18px;

	padding-right: 10px;

}

.why-us .accordion-list i {

	font-size: 24px;

	position: absolute;

	right: 0;

	top: 0;

}

.why-us .accordion-list p {

	margin-bottom: 0;

	padding: 10px 0 0 0;

}

.why-us .accordion-list .icon-show {

	display: none;

}

.why-us .accordion-list a.collapsed {

	color: #343a40;

}

.why-us .accordion-list a.collapsed:hover {

	color: #0880e8;

}

.why-us .accordion-list a.collapsed .icon-show {

	display: inline-block;

}

.why-us .accordion-list a.collapsed .icon-close {

	display: none;

}

.why-us .play-btn {

	width: 94px;

	height: 94px;

	background: radial-gradient(#0880e8 50%, rgba(8, 128, 232, 0.4) 52%);

	border-radius: 50%;

	display: block;

	position: absolute;

	left: calc(50% - 47px);

	top: calc(50% - 47px);

	overflow: hidden;

}

.why-us .play-btn::after {

	content: "";

	position: absolute;

	left: 50%;

	top: 50%;

	transform: translateX(-40%) translateY(-50%);

	width: 0;

	height: 0;

	border-top: 10px solid transparent;

	border-bottom: 10px solid transparent;

	border-left: 15px solid #fff;

	z-index: 100;

	transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

.why-us .play-btn::before {

	content: "";

	position: absolute;

	width: 120px;

	height: 120px;

	-webkit-animation-delay: 0s;

	animation-delay: 0s;

	-webkit-animation: pulsate-btn 2s;

	animation: pulsate-btn 2s;

	-webkit-animation-direction: forwards;

	animation-direction: forwards;

	-webkit-animation-iteration-count: infinite;

	animation-iteration-count: infinite;

	-webkit-animation-timing-function: steps;

	animation-timing-function: steps;

	opacity: 1;

	border-radius: 50%;

	border: 5px solid rgba(8, 128, 232, 0.7);

	top: -15%;

	left: -15%;

	background: rgba(198, 16, 0, 0);

}

.why-us .play-btn:hover::after {

	border-left: 15px solid #0880e8;

	transform: scale(20);

}

.why-us .play-btn:hover::before {

	content: "";

	position: absolute;

	left: 50%;

	top: 50%;

	transform: translateX(-40%) translateY(-50%);

	width: 0;

	height: 0;

	border: none;

	border-top: 10px solid transparent;

	border-bottom: 10px solid transparent;

	border-left: 15px solid #fff;

	z-index: 200;

	-webkit-animation: none;

	animation: none;

	border-radius: 0;

}

@media (max-width: 1024px) {

	.why-us .content,

	.why-us .accordion-list {

		padding-left: 0;

		padding-right: 0;

	}

}

@media (max-width: 992px) {

	.why-us .content {

		padding-top: 30px;

	}

	.why-us .accordion-list {

		padding-bottom: 30px;

	}

}

@-webkit-keyframes pulsate-btn {

	0% {

		transform: scale(0.6, 0.6);

		opacity: 1;

	}

	100% {

		transform: scale(1, 1);

		opacity: 0;

	}

}

@keyframes pulsate-btn {

	0% {

		transform: scale(0.6, 0.6);

		opacity: 1;

	}

	100% {

		transform: scale(1, 1);

		opacity: 0;

	}

}

/*--------------------------------------------------------------

# Services

--------------------------------------------------------------*/

.services .icon-box {

	margin-bottom: 20px;

	padding: 50px 40px;

	border-radius: 6px;

	background: #fff;

	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);

}

.services .icon-box i {

	float: left;

	color: #ffc412;

	font-size: 40px;

}

.services .icon-box h4 {

	margin-left: 70px;

	font-weight: 700;

	margin-bottom: 15px;

	font-size: 18px;

}

.services .icon-box h4 a {

	color: #05579e;

	transition: 0.3s;

}

.services .icon-box h4 a:hover {

	color: #0880e8;

}

.services .icon-box p {

	margin-left: 70px;

	line-height: 24px;

	font-size: 14px;

	margin-bottom: 0;

}

/*--------------------------------------------------------------

# Cta

--------------------------------------------------------------*/

.cta {

	background: linear-gradient(rgba(5, 74, 133, 0.8), rgba(5, 74, 133, 0.9)),

		url("../img/cta-bg.jpg") fixed center center;

	background-size: cover;

	padding: 120px 0;

}

.cta h3 {

	color: #fff;

	font-size: 28px;

	font-weight: 700;

}

.cta p {

	color: #fff;

}

.cta .cta-btn {

	font-family: "Raleway", sans-serif;

	text-transform: uppercase;

	font-weight: 500;

	font-size: 15px;

	letter-spacing: 0.5px;

	display: inline-block;

	padding: 8px 26px;

	border-radius: 2px;

	transition: 0.5s;

	margin: 10px;

	border-radius: 50px;

	border: 2px solid #ffc412;

	color: #fff;

}

.cta .cta-btn:hover {

	background: #ffc412;

}

@media (max-width: 1024px) {

	.cta {

		background-attachment: scroll;

	}

}

@media (min-width: 769px) {

	.cta .cta-btn-container {

		display: flex;

		align-items: center;

		justify-content: flex-end;

	}

}

/*--------------------------------------------------------------

# Portfoio

--------------------------------------------------------------*/

.portfoio #portfolio-flters {

	padding: 0;

	margin: 0 auto 25px auto;

	list-style: none;

	text-align: center;

	border-radius: 50px;

}

.portfoio #portfolio-flters li {

	cursor: pointer;

	display: inline-block;

	padding: 8px 18px 10px 18px;

	font-size: 14px;

	font-weight: 500;

	line-height: 1;

	color: #444444;

	margin: 0 3px 10px 3px;

	transition: all ease-in-out 0.3s;

	border-radius: 50px;

}

.portfoio #portfolio-flters li:hover,

.portfoio #portfolio-flters li.filter-active {

	color: #fff;

	background: #0880e8;

}

.portfoio #portfolio-flters li:last-child {

	margin-right: 0;

}

.portfoio .portfolio-item {

	margin-bottom: 30px;

	overflow: hidden;

}

.portfoio .portfolio-item img {

	position: relative;

	top: 0;

	transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);

}

.portfoio .portfolio-item .portfolio-info {

	opacity: 0;

	position: absolute;

	left: 15px;

	right: 15px;

	bottom: -50px;

	z-index: 3;

	transition: all ease-in-out 0.3s;

	background: #0880e8;

	padding: 15px 20px;

}

.portfoio .portfolio-item .portfolio-info h4 {

	font-size: 18px;

	color: #fff;

	font-weight: 600;

}

.portfoio .portfolio-item .portfolio-info p {

	color: #fff;

	font-size: 14px;

	margin-bottom: 0;

}

.portfoio .portfolio-item .portfolio-info .preview-link,

.portfoio .portfolio-item .portfolio-info .details-link {

	position: absolute;

	right: 50px;

	font-size: 24px;

	top: calc(50% - 18px);

	color: white;

	transition: ease-in-out 0.3s;

}

.portfoio .portfolio-item .portfolio-info .preview-link:hover,

.portfoio .portfolio-item .portfolio-info .details-link:hover {

	color: #8ec8fb;

}

.portfoio .portfolio-item .portfolio-info .details-link {

	right: 15px;

}

.portfoio .portfolio-item:hover img {

	top: -30px;

}

.portfoio .portfolio-item:hover .portfolio-info {

	opacity: 1;

	bottom: 0;

}

/*--------------------------------------------------------------

# Team

--------------------------------------------------------------*/

.team .member {

	position: relative;

	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);

	padding: 30px;

	border-radius: 10px;

	background: #fff;

}

.team .member .pic {

	overflow: hidden;

	width: 180px;

	border-radius: 50%;

}

.team .member .pic img {

	transition: ease-in-out 0.3s;

}

.team .member:hover img {

	transform: scale(1.1);

}

.team .member .member-info {

	padding-left: 30px;

}

.team .member h4 {

	font-weight: 700;

	margin-bottom: 5px;

	font-size: 20px;

	color: #05579e;

}

.team .member span {

	display: block;

	font-size: 15px;

	padding-bottom: 10px;

	position: relative;

	font-weight: 500;

}

.team .member span::after {

	content: "";

	position: absolute;

	display: block;

	width: 50px;

	height: 1px;

	background: #bfe0fd;

	bottom: 0;

	left: 0;

}

.team .member p {

	margin: 10px 0 0 0;

	font-size: 14px;

}

.team .member .social {

	margin-top: 12px;

	display: flex;

	align-items: center;

	justify-content: flex-start;

}

.team .member .social a {

	transition: ease-in-out 0.3s;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 50px;

	width: 32px;

	height: 32px;

	background: #ecf6fe;

	color: #0665b7;

}

.team .member .social a i {

	font-size: 16px;

	margin: 0 2px;

}

.team .member .social a:hover {

	background: #0880e8;

	color: #fff;

}

.team .member .social a + a {

	margin-left: 8px;

}

/*--------------------------------------------------------------

# Pricing

--------------------------------------------------------------*/

.pricing .box {

	padding: 20px;

	background: #fff;

	text-align: center;

	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);

	border-radius: 5px;

	position: relative;

	overflow: hidden;

}

.pricing h3 {

	font-weight: 400;

	margin: -20px -20px 20px -20px;

	padding: 20px 15px;

	font-size: 18px;

	font-weight: 700;

	color: #05579e;

	background: #f8f8f8;

}

.pricing h4 {

	font-size: 36px;

	color: #0880e8;

	font-weight: 600;

	font-family: "Poppins", sans-serif;

	margin-bottom: 20px;

}

.pricing h4 sup {

	font-size: 20px;

	top: -15px;

	left: -3px;

}

.pricing h4 span {

	color: #bababa;

	font-size: 16px;

	font-weight: 300;

}

.pricing ul {

	padding: 0;

	list-style: none;

	color: #444444;

	text-align: center;

	line-height: 20px;

	font-size: 14px;

}

.pricing ul li {

	padding-bottom: 16px;

}

.pricing ul i {

	color: #0880e8;

	font-size: 18px;

	padding-right: 4px;

}

.pricing ul .na {

	color: #ccc;

	text-decoration: line-through;

}

.pricing .btn-wrap {

	margin: 20px -20px -20px -20px;

	padding: 20px 15px;

	background: #f8f8f8;

	text-align: center;

}

.pricing .btn-buy {

	background: #0880e8;

	display: inline-block;

	padding: 8px 35px 10px 35px;

	border-radius: 50px;

	color: #fff;

	transition: none;

	font-size: 14px;

	font-weight: 400;

	font-family: "Raleway", sans-serif;

	font-weight: 600;

	transition: 0.3s;

}

.pricing .btn-buy:hover {

	background: #2b99f8;

}

.pricing .featured h3 {

	color: #fff;

	background: #0880e8;

}

.pricing .advanced {

	width: 200px;

	position: absolute;

	top: 18px;

	right: -68px;

	transform: rotate(45deg);

	z-index: 1;

	font-size: 14px;

	padding: 1px 0 3px 0;

	background: #0880e8;

	color: #fff;

}

/*--------------------------------------------------------------

# Frequently Asked Questions

--------------------------------------------------------------*/

.faq .faq-list {

	padding: 0 100px;

}

.faq .faq-list ul {

	padding: 0;

	list-style: none;

}

.faq .faq-list li + li {

	margin-top: 15px;

}

.faq .faq-list li {

	padding: 20px;

	background: #fff;

	border-radius: 4px;

	position: relative;

}

.faq .faq-list a {

	display: block;

	position: relative;

	font-family: "Poppins", sans-serif;

	font-size: 16px;

	line-height: 24px;

	font-weight: 500;

	padding: 0 30px;

	outline: none;

}

.faq .faq-list .icon-help {

	font-size: 24px;

	position: absolute;

	right: 0;

	left: 20px;

	color: #75bdfa;

}

.faq .faq-list .icon-show,

.faq .faq-list .icon-close {

	font-size: 24px;

	position: absolute;

	right: 0;

	top: 0;

}

.faq .faq-list p {

	margin-bottom: 0;

	padding: 10px 0 0 0;

}

.faq .faq-list .icon-show {

	display: none;

}

.faq .faq-list a.collapsed {

	color: #343a40;

}

.faq .faq-list a.collapsed:hover {

	color: #0880e8;

}

.faq .faq-list a.collapsed .icon-show {

	display: inline-block;

}

.faq .faq-list a.collapsed .icon-close {

	display: none;

}

@media (max-width: 1200px) {

	.faq .faq-list {

		padding: 0;

	}

}

/*--------------------------------------------------------------

# Contact

--------------------------------------------------------------*/

.contact {

	background: url("../img/contact-bg.png") left center no-repeat;

	position: relative;

}

.contact:before {

	content: "";

	background: rgba(255, 255, 255, 0.7);

	position: absolute;

	bottom: 0;

	top: 0;

	left: 0;

	right: 0;

}

.contact .container {

	position: relative;

}

.contact .info {

	width: 100%;

}

.contact .info i {

	font-size: 20px;

	background: #0880e8;

	color: #fff;

	float: left;

	width: 44px;

	height: 44px;

	display: flex;

	justify-content: center;

	align-items: center;

	border-radius: 50px;

	transition: all 0.3s ease-in-out;

}

.contact .info h4 {

	padding: 0 0 0 60px;

	font-size: 20px;

	font-weight: 700;

	margin-bottom: 5px;

	color: #043c6d;

}

.contact .info p {

	padding: 0 0 0 60px;

	margin-bottom: 0;

	font-size: 14px;

	color: #444444;

}

.contact .info .email,

.contact .info .phone {

	margin-top: 40px;

}

.contact .php-email-form {

	width: 100%;

	background: #fff;

}

.contact .php-email-form .form-group {

	padding-bottom: 8px;

}

.contact .php-email-form .validate {

	display: none;

	color: red;

	margin: 0 0 15px 0;

	font-weight: 400;

	font-size: 13px;

}

.contact .php-email-form .error-message {

	display: none;

	color: #fff;

	background: #ed3c0d;

	text-align: left;

	padding: 15px;

	font-weight: 600;

}

.contact .php-email-form .error-message br + br {

	margin-top: 25px;

}

.contact .php-email-form .sent-message {

	display: none;

	color: #fff;

	background: #18d26e;

	text-align: center;

	padding: 15px;

	font-weight: 600;

}

.contact .php-email-form .loading {

	display: none;

	background: #fff;

	text-align: center;

	padding: 15px;

}

.contact .php-email-form .loading:before {

	content: "";

	display: inline-block;

	border-radius: 50%;

	width: 24px;

	height: 24px;

	margin: 0 10px -6px 0;

	border: 3px solid #18d26e;

	border-top-color: #eee;

	-webkit-animation: animate-loading 1s linear infinite;

	animation: animate-loading 1s linear infinite;

}

.contact .php-email-form input,

.contact .php-email-form textarea {

	border-radius: 4px;

	box-shadow: none;

	font-size: 14px;

}

.contact .php-email-form input {

	height: 44px;

}

.contact .php-email-form textarea {

	padding: 10px 12px;

}

.contact .php-email-form button[type="submit"] {

	border: 0;

	padding: 10px 32px;

	color: #0880e8;

	transition: 0.4s;

	border-radius: 50px;

	border: 2px solid #0880e8;

	background: #fff;

}

.contact .php-email-form button[type="submit"]:hover {

	background: #0880e8;

	color: #fff;

}

@-webkit-keyframes animate-loading {

	0% {

		transform: rotate(0deg);

	}

	100% {

		transform: rotate(360deg);

	}

}

@keyframes animate-loading {

	0% {

		transform: rotate(0deg);

	}

	100% {

		transform: rotate(360deg);

	}

}

/*--------------------------------------------------------------

# Breadcrumbs

--------------------------------------------------------------*/

/* ========================UNIT TYPE====================================== */

#mainunittype{

	background: #040403;

}

.unittype1 {

	padding: 15px 0;

	background: #131313;

}

.unittype1 {

    width: 100%;

    height: 500px;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 39.24%, #000 91.32%), linear-gradient(180deg, #000 8.67%, rgba(0, 0, 0, 0.00) 53.35%), url(../../core-images/header-unittype.png) lightgray 50% / cover no-repeat;

}

.unittype1 .unittext h1 {

	height: 100px;

	width: 100%;

	display: flex;

    justify-content: center;

    align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

    color: #FFF;

    text-align: center;

    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    font-family: Gambetta;

    font-size: 85px;

    font-style: normal;

    font-weight: 700;

    line-height: 96.5px;

    text-transform: uppercase;

    margin-top: 170px;

}

.unitimg {

    width: 100%;

    height: 100%;

}

.unittype2 .slide h1{

	color: #FFF;

	text-align: center;

	font-family: Gambetta;

	font-size: 96px;

	font-style: normal;

	font-weight: 400;

	line-height: 115.2px; /* 120% */

	letter-spacing: 2.88px;

}

.unittype2 .slide .slidetextcenter .row{

	padding: 20px;

}

.unittype2 .slide .kanan{

	color: #999999;

	font-size: 18px;

}

.unittype2 .slide .kiri{

	color: #C2A058;

	font-size: 18px;

}

.unittype2 .slide .kanan h4{

	color: #999999;

	font-size: 18px;

}

.unittype2 .slide .kiri h4{

	color: #C2A058;

	font-size: 18px;

}

/* Lebar 1512px atau lebih besar */

@media (min-width: 1512px) {

    #mainunittype section{

		padding-left: 100px;

		padding-right: 100px;

	}

}

/* Lebar 1350px - 1449px */

@media (min-width: 1350px) and (max-width: 1449px) {

	#mainunittype section{

		padding-left: 20px;

		padding-right: 20px;

	}

}

/* Lebar 1280px - 1349px */

@media (min-width: 1280px) and (max-width: 1349px) {

    #mainunittype section{

		padding-left: 20px;

		padding-right: 20px;

	}

}

/* Lebar 1200px - 1279px */

@media (min-width: 1200px) and (max-width: 1279px) {

    #mainunittype section{

		padding-left: 20px;

		padding-right: 20px;

	}

}

/* Lebar 1100px - 1199px */

@media (min-width: 1100px) and (max-width: 1199px) {

    #mainunittype section{

		padding-left: 40px;

		padding-right: 40px;

	}

}

/* Lebar 992px - 1099px */

@media (min-width: 992px) and (max-width: 1099px) {

    #mainunittype section{

		padding-left: 40px;

		padding-right: 40px;

	}

}

/* Lebar 892px - 991px */

@media (min-width: 892px) and (max-width: 991px) {

	.unittype1 .mouser{

		width: 80px;

		height: 80px;

	}

}

/* Lebar 750px - 891px */

@media (min-width: 750px) and (max-width: 891px) {

	.unittype1 .mouser{

		width: 50px;

		height: 50px;

	}

	.unittype1 .unittext h1{

		font-size: 70px;

	}

}

/* Lebar 650px - 749px */

@media (min-width: 650px) and (max-width: 749px) {

    #mainunittype section{

		padding-left: 20px;

		padding-right: 20px;

	}

	.unittype1 .mouser{

		position: relative;

		left: 90px;

	}

	.unittype1 .unittext h1{

		font-size: 60px;

	}

}

/* Lebar 542px - 649px */

@media (min-width: 542px) and (max-width: 649px) {

    #mainunittype section{

		padding-left: 20px;

		padding-right: 20px;

	}

	.unittype1 .mouser{

		visibility: hidden;

	}

	.unittype1 .unittext h1{

		font-size: 55px;

		line-height: 70px;

	}

	.unittype2 .slidetextcenter h1{

		font-size: 70px;

	}

}

@media (min-width: 375px) and (max-width: 543px) {

    #mainunittype section{

		padding-left: 0px;

		padding-right: 0px;

	}

	.unittype1 .mouser{

		visibility: hidden;

	}

	.unittype1 .unittext h1{

		font-size: 45px;

		line-height: 60px;

	}

	.unittype3 h1{

		position: relative;

		left: 30px;

	}

	.unittype2 .slidetextcenter h1{

		font-size: 70px;

	}

}

/* ===========Unit Type 3============== */

/* Mengubah latar belakang gambar pada class unittypeimg */

.unittype3 {

    width: 100%;

    height: 750px;

    background: url(../../core-images/typearma.png) lightgray 50% / cover no-repeat;

    position: relative; /* Menambahkan ini untuk latar belakang relatif */

}

/* Mengubah properti h1 ARMA */

.unittype3 .unittypeimg .overlay-text h1 {

    position: absolute;

	text-align: end;

	align-items: end;

    right: 198px;

    bottom: 33px;

    color: #FFF;

    text-align: center;

    font-family: Gambetta;

    font-size: 96px;

    font-style: normal;

    font-weight: 400;

    line-height: 115.2px; /* 120% */

    letter-spacing: 2.88px;

}

.unittype4 .row .col-md-12{

	padding-left: 50px;

	padding-right: 50px;

}

.unittype4 img{

	width: 90%;

	height: 418px;

}

.unittype4 .list-group-item {

	border: none; /* Menghilangkan semua garis kecuali garis bawah */

	background: transparent; /* Mengatur latar belakang menjadi transparan */

	padding: 1rem 0; /* Berikan padding di bawah item */

	color: white; /* Mengatur teks menjadi putih */

	border-bottom: 1px solid #676767; /* Garis bawah dengan warna #676767 */

  }

.unittype4 h4{

	color: #fff;

	font-size: 26px;

	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.unittype4 .text{

	color: #A3A3A3;

	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

	font-size: 26px;

	font-style: normal;

	font-weight: 400;

	line-height: 42px;

}

.unittype4 .angka{

	font-size: 26px;

	margin-left: 10px;

	color: #fafafa;

}

.unittype4 svg{

	margin-left: 50px;

}

.unittype4 circle svg{

	margin-left: 0px;

}

@media (max-width: 992px) {

	.unittype1 .unittype2 {

		margin-top: 50px;

	}

}

/* ========================END UNIT TYPE====================================== */

/* ========================SITE PLAN====================================== */

#mainsiteplan{

	background: #FFFFFF;

}

.siteplan1 {

	padding: 15px 0;

	background: #FFFFFF;

}

.siteplan1 {

    width: 100%;

    height: 100vh;

}

.siteplan1 .mouser img{

	align-items: end;

	margin-top: 200px;

}

.siteplan2 p{

	color: #1B2028;

	font-size: 16px;

	font-style: normal;

	font-weight: 400;

	line-height: 30px;

}

.siteplan3{

	width: 100%;

	height: 100vh;

}

/* Site Plan 4 */

.siteplan4 .slider{

	transition: filter 0.3s, opacity 0.3s;

	height: 357px;

	margin: auto;

	position: relative;

	width: 100%;

	display: grid;

	place-items: center;

}

.siteplan4 .slide-track{

	display: flex;

	width: calc(250px *18);

	animation: scroll 40s linear infinite;

}

@keyframes scroll{

	0%{

		transform: translateX(0);

	}

	100%{

		transform: translateX(calc(-250px *9));

	}

}

.siteplan4 .slide{

	height: 300px;

	width: 500px;

	display: flex;

	align-items: center;

	padding: 15px;

	perspective: 100px;

}

.siteplan4 .slide img {

	width: 100%;

	transition: filter 0.3s, opacity 0.3s;

  }

  .siteplan4 .slide img:hover {

	filter: brightness(0.3); /* Mengurangi kecerahan gambar menjadi 70% saat dihover */

  }

.siteplan4 .slider img:hover{

	transform: translateZ(20px);

}

/* gradient shadow */

.siteplan4 .slider::before,

.siteplan4 .slider::after{

	background: linear-gradient(to right, rgba(255,255,255,1), 0%,rgba(255,255,255,0), 100%);

	content: '';

	height: 100%;

	position: absolute;

	width: 15%;

	z-index: 2;

}

.siteplan4 .slider::before{

	left: 0;

	top: 0;

}

.siteplan4 .slider::after{

	right: 0;

	top: 0;

	transform: rotateZ(180deg);

}

.siteplan4 .slide:hover .overlay {

	background: rgb(0, 0, 0);

	transition: 0.3s;

  }

  .siteplan4 .slide:hover .content h3 {

	color: white;

	opacity: 1;

	transition: opacity 0.3s;

  }

  .siteplan4 .content h3{

	opacity: 0;

	text-align: center;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	color: white;

  }

/* Site Plan 5 */

.siteplan5 .card {

	flex-direction: row;

	max-width: 50em;

	border: 0;

  }

  .siteplan5 .card img {

	max-width: 20%;

	margin: auto;

	border-radius: 0.2em;

  }

  .siteplan5 .card-body {

	max-width: 120%;

	display: flex;

	flex-direction: row;

	justify-content: space-between;

  }

  .siteplan5  .text-section {

	max-width: 100%;

  }

  .siteplan5 .cta-section {

	max-width: 100%;

	display: flex;

	flex-direction: column;

	align-items: flex-end;

	justify-content: space-between;

  }

  .siteplan5 .cta-section .btn {

	padding: 0.2em 0.5em;

	font-size: 1em;

	color: #696969;

  }

  .siteplan5 .card-text {

	letter-spacing: 0.1em;

	color: #999999;

  }

  .siteplan5 .card-title{

	color: var(--Gray-7, #2A282F);

	font-size: 20px;

	font-family: Arial, Helvetica, sans-serif;

	font-style: normal;

	font-weight: 500;

	line-height: 28px; /* 175% */

	letter-spacing: -0.3px;

  }

  .siteplan5 p{

	color: #1B2028;

	font-size: 20px;

	font-style: normal;

	font-weight: 400;

	line-height: 42px;

  }

/* Site Plan 6 */

#siteplan6 {

    display: flex;

    width: 100%;

    height: 1089px;

    padding: 0px 88px;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 80px;

    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 13.72%),linear-gradient(180deg, rgba(0, 0, 0, 0.00) 78.3%, #000 91.32%), url(../../core-images/taman-jalan.png);

    background-color: lightgray;

    background-size: cover;

    background-position: 50%;

    background-repeat: no-repeat;

}

.siteplan6 .brand-logo-gramercy {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 80px;

}

.siteplan6 .brand-logo-gramercy img {

	width: 50%;

	height: 200px;

    display: block;

    margin: 0 auto; 

}

/* Site Plan 7 */

.siteplan7{

	display: flex;

    width: 100%;

    height: 963px;

    padding: 0px 88px;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 80px;

    background: url(../../core-images/blurlocation.svg);

    background-color: lightgray;

    background-size: cover;

    background-position: 50%;

    background-repeat: no-repeat;

}

.siteplan7 h1{

	color: #FFF;

	font-family: 'GambettaLight';

	font-size: 75px;

	font-style: normal;

	font-weight: 0;

	line-height: 85px; /* 100% */

	letter-spacing: 2.55px;

}

.siteplan7 p{

	color: #FFF;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 24px;

	font-style: normal;

	line-height: 37px;

}

.siteplan7 .text{

	padding-top: 40px;

	width: 726px;

}

.siteplan7 .dev button{

	padding-top: 40px;

	color: #C2A058;

	font-size: 24px;

	margin: inherit;

	background: transparent;

	border: 1px solid transparent;

}

/* Lebar 1512px atau lebih besar */

@media (min-width: 1512px) {

    #mainsiteplan section{

		padding-left: 100px;

		padding-right: 100px;

	}

}

/* Lebar 1450px - 1511px */

@media (min-width: 1450px) and (max-width: 1511px) {

    #mainsiteplan section{

		padding-left: 65px;

		padding-right: 65px;

	}

}

/* Lebar 1350px - 1449px */

@media (min-width: 1350px) and (max-width: 1449px) {

    #mainsiteplan section{

		padding-left: 25px;

		padding-right: 25px;

	}

}

/* Lebar 1280px - 1349px */

@media (min-width: 1280px) and (max-width: 1349px) {

    #mainsiteplan section{

		padding-left: 25px;

		padding-right: 25px;

	}

}

/* Lebar 1200px - 1279px */

@media (min-width: 1200px) and (max-width: 1279px) {

    #mainsiteplan section{

		padding-left: 25px;

		padding-right: 25px;

	}

}

/* Lebar 1100px - 1199px */

@media (min-width: 1100px) and (max-width: 1199px) {

    #mainsiteplan section{

		padding-left: 25px;

		padding-right: 25px;

	}

	.siteplan7 h1{

		font-size: 60px;

	}

	.siteplan7 p{

		font-size: 20px;

		width: 550px;

	}

	.siteplan7 img{

		position: relative;

		right: 80px;

	}

}

/* Lebar 992px - 1099px */

@media (min-width: 992px) and (max-width: 1099px) {

    #mainsiteplan section{

		padding-left: 25px;

		padding-right: 25px;

	}

	.siteplan7 h1{

		font-size: 60px;

	}

	.siteplan7 p{

		font-size: 20px;

		width: 550px;

	}

	.siteplan7 img{

		position: relative;

		right: 140px;

	}

}

/* Lebar 892px - 991px */

@media (min-width: 892px) and (max-width: 991px) {

    #mainsiteplan section{

		padding-left: 25px;

		padding-right: 25px;

	}

	.siteplan7 h1{

		font-size: 60px;

	}

	.siteplan7 p{

		font-size: 20px;

		width: 550px;

	}

	.siteplan7 img{

		width: 100%;

		height: 400px;

		position: relative;

		top: 100px;

		left: 100px;

	}

	.hero-new3 img{

		width: 90%;

		height: 130px;

	}

	.ourservice .bagian h5{

		width: 200px;

	}

	.ourservice p{

		position: relative;

		/* bottom: 100px; */

	}

}

/* Lebar 750px - 891px */

@media (min-width: 750px) and (max-width: 891px) {

	#mainsiteplan section{

		padding-left: 25px;

		padding-right: 25px;

	}

	.siteplan7 h1{

		line-height: 70px;

		font-size: 50px;

		align-items: center;

		text-align: center;

	}

	.siteplan7 p{

		font-size: 18px;

		width: 550px;

		align-items: center;

		text-align: center;

	}

	.siteplan7 img{

		width: 100%;

		height: 400px;

		position: relative;

		top: 50px;

	}

	.siteplan7 .arrow{

		position: relative;

		left: 150px;

	}

	#mainsiteplan section{

		padding-left: 25px;

		padding-right: 25px;

	}

	.siteplan7 h1{

		font-size: 60px;

	}

	.siteplan7 p{

		font-size: 20px;

		width: 550px;

	}

	.siteplan7 img{

		width: 100%;

		height: 400px;

		position: relative;

		top: 50px;

	}

	.hero-new3 .brand-logo-gramercy {

		flex-direction: column;

		justify-content: center;

		align-items: center;

		gap: 0px;

		margin-top: 100px;

	}

	.ourservice .bagian {

		flex-direction: column;

		align-items: center;

		text-align: center;

	}

	.hero-new3 img{

		width: 90%;

		height: 80px;

	}

	.ourservice .bagian h5{

		width: 200px;

		font-size: 16px;

	}

	.ourservice .bagian h3{

		width: 200px;

		font-size: 24px;

	}

	.ourservice p{

		position: relative;

		/* bottom: 100px; */

	}

}

/* Lebar 650px - 749px */

@media (min-width: 650px) and (max-width: 749px) {

    #mainsiteplan section{

		padding-left: 25px;

		padding-right: 25px;

	}

	.siteplan7 h1{

		line-height: 70px;

		font-size: 50px;

		align-items: center;

		text-align: center;

	}

	.siteplan7 p{

		font-size: 18px;

		width: 550px;

		align-items: center;

		text-align: center;

	}

	.siteplan7 img{

		width: 100%;

		height: 400px;

		position: relative;

		top: 50px;

	}

	.siteplan7 .arrow{

		position: relative;

		left: 150px;

	}

	.hero-new3 .brand-logo-gramercy {

		flex-direction: column;

		justify-content: center;

		align-items: center;

		gap: 0px;

		margin-top: 100px;

	}

	.ourservice .bagian {

		flex-direction: column;

		align-items: center;

		text-align: center;

	}

	.hero-new3 img{

		width: 90%;

		height: 80px;

	}

	.ourservice .bagian h5{

		width: 200px;

		font-size: 16px;

	}

	.ourservice .bagian h3{

		width: 200px;

		font-size: 24px;

	}

	.ourservice p{

		position: relative;

		/* bottom: 100px; */

	}

}

/* Lebar 542px - 649px */

@media (min-width: 542px) and (max-width: 649px) {

    #mainsiteplan section{

		padding-left: 25px;

		padding-right: 25px;

	}

	.siteplan7 h1{

		line-height: 70px;

		font-size: 50px;

		align-items: center;

		text-align: center;

	}

	.siteplan7 p{

		font-size: 18px;

		width: 450px;

		align-items: center;

		text-align: center;

	}

	.siteplan7 img{

		width: 100%;

		height: 400px;

		position: relative;

		top: 50px;

	}

	.siteplan7 .arrow{

		position: relative;

		left: 150px;

	}

	.hero-new3 .brand-logo-gramercy {

		flex-direction: column;

		justify-content: center;

		align-items: center;

		gap: 0px;

		margin-top: 100px;

	}

	.ourservice .bagian {

		flex-direction: column;

		align-items: center;

		text-align: center;

	}

	.hero-new3 img{

		width: 90%;

		height: 80px;

	}

	.ourservice .bagian h5{

		width: 200px;

		font-size: 16px

	}

	.ourservice .bagian h3{

		width: 200px;

		font-size: 24px;

	}

	.ourservice p{

		position: relative;

		/* bottom: 100px; */

	}

}

@media (min-width: 375px) and (max-width: 543px) {

	.siteplan7 h1{

		line-height: 50px;

		font-size: 30px;

		align-items: center;

		text-align: center;

	}

	.siteplan7 p{

		font-size: 18px;

		width: 300px;

		align-items: center;

		text-align: center;

	}

	.siteplan7 img{

		width: 100%;

		height: 400px;

		position: relative;

		top: 50px;

	}

	.siteplan7 .arrow{

		position: relative;

		left: 50px;

	}

	.siteplan4 .slide{

		height: 180px;

		width: 300px;

		display: flex;

		align-items: center;

		padding: 15px;

		perspective: 100px;

	}

	.hero-new3 .brand-logo-gramercy {

		flex-direction: column;

		justify-content: center;

		align-items: center;

		gap: 0px;

		margin-top: 100px;

	}

	.ourservice .bagian {

		flex-direction: column;

		align-items: center;

		text-align: center;

	}

	.hero-new3 img{

		/* width: 90%; */

		height: 92px;

	}

	.ourservice .bagian h5{

		width: 200px;

		font-size: 10px;

		margin: 0px;

	}

}

/* ========================END SITE PLAN====================================== */

/* ========================STARTPROJECTS====================================== */

#mainprojects{

	background: #FFFFFF;

}

.projects1 {

	padding: 15px 0;

	background: #FFFFFF;

	display: flex;

    width: 100%;

    height: 516px;

	background: url(../../core-images/banner-project.png) lightgray -92.136px -46.719px / 108.456% 109.058% no-repeat;

}

.projects1 h1{

	color: #fff;

	font-size: 72px;

	font-style: normal;

	font-weight: 600;

	line-height: 90px; /* 125% */

	letter-spacing: -2.3px;

}

.projects1 p{

	color: #E7E7E7;

	font-size: 24px;

	font-style: normal;

	font-weight: 400;

	line-height: 42px; /* 175% */

	letter-spacing: -0.3px;

}

.projects2 .logobrand{

	width: 70%;

	height: 216;

}

.projects2 .card-body h1{

	color: #131313;

	text-align: start;

	font-size: 32px;

	font-style: normal;

	font-weight: 500;

	line-height: 28px; /* 87.5% */

	letter-spacing: -0.3px;

}

.projects2 .card{

	border: none;

}

/* Lebar 1512px atau lebih besar */

@media (min-width: 1512px) {

	.projects1 {

		padding: 15px 0;

		background: #FFFFFF;

		display: flex;

		width: 100%;

		height: 516px;

		background: url(../../core-images/banner-project.png) lightgray -92.136px -46.719px / 108.456% 109.058% no-repeat;

	}

	.projects1 h1{

		color: #fff;

		font-size: 72px;

		font-style: normal;

		font-weight: 600;

		line-height: 90px; /* 125% */

		letter-spacing: -2.3px;

		padding-left: 50px;

	}

	.projects1 p{

		color: #E7E7E7;

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		padding-left: 50px;

	}

	.projects2 .logobrand{

		width: 70%;

		height: 216;

	}

	.projects2 .card-body h1{

		color: #131313;

		text-align: start;

		font-size: 32px;

		font-style: normal;

		font-weight: 500;

		line-height: 28px; /* 87.5% */

		letter-spacing: -0.3px;

	}

	.projects2 .card{

		border: none;

	}

}

/* Lebar 1450px - 1511px */

@media (min-width: 1450px) and (max-width: 1511px) {

    .projects1 {

		padding: 15px 0;

		background: #FFFFFF;

		display: flex;

		width: 100%;

		height: 516px;

		background: url(../../core-images/banner-project.png) lightgray -92.136px -46.719px / 108.456% 109.058% no-repeat;

	}

	.projects1 h1{

		color: #fff;

		font-size: 72px;

		font-style: normal;

		font-weight: 600;

		line-height: 90px; /* 125% */

		letter-spacing: -2.3px;

		padding-left: 50px;

	}

	.projects1 p{

		color: #E7E7E7;

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		padding-left: 50px;

	}

	.projects2 .logobrand{

		width: 70%;

		height: 216;

	}

	.projects2 .card-body h1{

		color: #131313;

		text-align: start;

		font-size: 32px;

		font-style: normal;

		font-weight: 500;

		line-height: 28px; /* 87.5% */

		letter-spacing: -0.3px;

	}

	.projects2 .card{

		border: none;

	}

}

/* Lebar 1350px - 1449px */

@media (min-width: 1350px) and (max-width: 1449px) {

    .projects1 {

		padding: 15px 0;

		background: #FFFFFF;

		display: flex;

		width: 100%;

		height: 516px;

		background: url(../../core-images/banner-project.png) lightgray -92.136px -46.719px / 108.456% 109.058% no-repeat;

	}

	.projects1 h1{

		color: #fff;

		font-size: 72px;

		font-style: normal;

		font-weight: 600;

		line-height: 90px; /* 125% */

		letter-spacing: -2.3px;

		padding-left: 50px;

	}

	.projects1 p{

		color: #E7E7E7;

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		padding-left: 50px;

	}

	.projects2 .logobrand{

		width: 70%;

		height: 216;

	}

	.projects2 .card-body h1{

		color: #131313;

		text-align: start;

		font-size: 32px;

		font-style: normal;

		font-weight: 500;

		line-height: 28px; /* 87.5% */

		letter-spacing: -0.3px;

	}

	.projects2 .card{

		border: none;

	}

}

/* Lebar 1280px - 1349px */

@media (min-width: 1280px) and (max-width: 1349px) {

    .projects1 {

		padding: 15px 0;

		background: #FFFFFF;

		display: flex;

		width: 100%;

		height: 516px;

		background: url(../../core-images/banner-project.png) lightgray -92.136px -46.719px / 108.456% 109.058% no-repeat;

	}

	.projects1 h1{

		color: #fff;

		font-size: 72px;

		font-style: normal;

		font-weight: 600;

		line-height: 90px; /* 125% */

		letter-spacing: -2.3px;

		padding-left: 50px;

	}

	.projects1 p{

		color: #E7E7E7;

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		padding-left: 50px;

	}

	.projects2 .logobrand{

		width: 70%;

		height: 216;

	}

	.projects2 .card-body h1{

		color: #131313;

		text-align: start;

		font-size: 32px;

		font-style: normal;

		font-weight: 500;

		line-height: 28px; /* 87.5% */

		letter-spacing: -0.3px;

	}

	.projects2 .card{

		border: none;

	}

}

/* Lebar 1200px - 1279px */

@media (min-width: 1200px) and (max-width: 1279px) {

    .projects1 {

		padding: 15px 0;

		background: #FFFFFF;

		display: flex;

		width: 100%;

		height: 516px;

		background: url(../../core-images/banner-project.png) lightgray -92.136px -46.719px / 108.456% 109.058% no-repeat;

	}

	.projects1 h1{

		color: #fff;

		font-size: 72px;

		font-style: normal;

		font-weight: 600;

		line-height: 90px; /* 125% */

		letter-spacing: -2.3px;

		padding-left: 50px;

	}

	.projects1 p{

		color: #E7E7E7;

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		padding-left: 50px;

	}

	.projects2 .logobrand{

		width: 70%;

		height: 216;

	}

	.projects2 .card-body h1{

		color: #131313;

		text-align: start;

		font-size: 32px;

		font-style: normal;

		font-weight: 500;

		line-height: 28px; /* 87.5% */

		letter-spacing: -0.3px;

	}

	.projects2 .card{

		border: none;

	}

}

/* Lebar 1100px - 1199px */

@media (min-width: 1100px) and (max-width: 1199px) {

    .projects1 {

		padding: 15px 0;

		background: #FFFFFF;

		display: flex;

		width: 100%;

		height: 516px;

		background: url(../../core-images/banner-project.png) lightgray -92.136px -46.719px / 108.456% 109.058% no-repeat;

	}

	.projects1 h1{

		color: #fff;

		font-size: 72px;

		font-style: normal;

		font-weight: 600;

		line-height: 90px; /* 125% */

		letter-spacing: -2.3px;

		padding-left: 50px;

	}

	.projects1 p{

		color: #E7E7E7;

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		padding-left: 50px;

	}

	.projects2 .logobrand{

		width: 70%;

		height: 216;

	}

	.projects2 .card-body h1{

		color: #131313;

		text-align: start;

		font-size: 32px;

		font-style: normal;

		font-weight: 500;

		line-height: 28px; /* 87.5% */

		letter-spacing: -0.3px;

	}

	.projects2 .card{

		border: none;

	}

	.siteplan7 h1{

		font-size: 60px;

	}

	.siteplan7 p{

		font-size: 20px;

		width: 550px;

	}

	.siteplan7 img{

		position: relative;

		right: 80px;

	}

}

/* Lebar 992px - 1099px */

@media (min-width: 992px) and (max-width: 1099px) {

    .projects1 {

		padding: 15px 0;

		background: #FFFFFF;

		display: flex;

		width: 101%;

		height: 516px;

		background: url(../../core-images/banner-project.png) lightgray -92.136px -46.719px / 108.456% 109.058% no-repeat;

	}

	.projects1 h1{

		color: #fff;

		font-size: 72px;

		font-style: normal;

		font-weight: 600;

		line-height: 90px; /* 125% */

		letter-spacing: -2.3px;

		padding-left: 50px;

	}

	.projects1 p{

		color: #E7E7E7;

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		padding-left: 50px;

	}

	.projects2 .logobrand{

		width: 70%;

		height: 216;

	}

	.projects2 .card-body h1{

		color: #131313;

		text-align: start;

		font-size: 32px;

		font-style: normal;

		font-weight: 500;

		line-height: 28px; /* 87.5% */

		letter-spacing: -0.3px;

	}

	.projects2 .card{

		border: none;

	}

	.siteplan7 h1{

		font-size: 60px;

	}

	.siteplan7 p{

		font-size: 20px;

		width: 550px;

	}

	.siteplan7 img{

		position: relative;

		right: 140px;

	}

}

/* Lebar 892px - 991px */

@media (min-width: 892px) and (max-width: 991px) {

    .projects1 {

		padding: 15px 0;

		background: #FFFFFF;

		display: flex;

		width: 100%;

		height: 636px;

		background: url(../../core-images/banner-project-750.png);

	}

	.projects1 h1{

		color: #fff;

		text-align: center;

		font-size: 62px;

		font-style: normal;

		font-weight: 600;

		line-height: 90px; /* 125% */

		letter-spacing: -2.3px;

	}

	.projects1 p{

		color: #E7E7E7;

		font-size: 18px;

		font-style: normal;

		text-align: center;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

	}

	.projects2 .logobrand{

		width: 70%;

		height: 216;

	}

	.projects2 .card-body h1{

		color: #131313;

		text-align: start;

		font-size: 32px;

		font-style: normal;

		font-weight: 500;

		line-height: 28px; /* 87.5% */

		letter-spacing: -0.3px;

	}

	.projects2 .card{

		border: none;

	}

	.siteplan7 h1{

		font-size: 60px;

	}

	.siteplan7 p{

		font-size: 20px;

		width: 550px;

	}

	.siteplan7 img{

		width: 100%;

		height: 400px;

		position: relative;

		top: 100px;

		left: 100px;

	}

}

/* Lebar 750px - 891px */

@media (min-width: 750px) and (max-width: 891px) {

    .projects1 {

		padding: 15px 0;

		background: #FFFFFF;

		display: flex;

		width: 100%;

		height: 656px;

		background: url(../../core-images/banner-project-750.png);

	}

	.projects1 h1{

		color: #fff;

		text-align: center;

		font-size: 62px;

		font-style: normal;

		font-weight: 600;

		line-height: 90px; /* 125% */

		letter-spacing: -2.3px;

	}

	.projects1 p{

		color: #E7E7E7;

		font-size: 18px;

		font-style: normal;

		text-align: center;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

	}

	.projects2 .logobrand{

		width: 70%;

		height: 216;

	}

	.projects2 .card-body h1{

		color: #131313;

		text-align: start;

		font-size: 32px;

		font-style: normal;

		font-weight: 500;

		line-height: 28px; /* 87.5% */

		letter-spacing: -0.3px;

	}

	.projects2 .card{

		border: none;

	}

	.siteplan7 h1{

		font-size: 60px;

	}

	.siteplan7 p{

		font-size: 20px;

		width: 550px;

	}

	.siteplan7 img{

		width: 100%;

		height: 400px;

		position: relative;

		top: 50px;

	}

	.siteplan7 .arrow{

		position: relative;

		left: 150px;

	}

}

/* Lebar 650px - 749px */

@media (min-width: 650px) and (max-width: 749px) {

    .projects1 {

		padding: 15px 0;

		background: #FFFFFF;

		display: flex;

		width: 100%;

		height: 656px;

		background: url(../../core-images/banner-project-750.png);

	}

	.projects1 h1{

		color: #fff;

		text-align: center;

		font-size: 62px;

		font-style: normal;

		font-weight: 600;

		line-height: 90px; /* 125% */

		letter-spacing: -2.3px;

	}

	.projects1 p{

		color: #E7E7E7;

		font-size: 18px;

		font-style: normal;

		text-align: center;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

	}

	.projects2 .logobrand{

		width: 70%;

		height: 216;

	}

	.projects2 .card-body h1{

		color: #131313;

		text-align: start;

		font-size: 32px;

		font-style: normal;

		font-weight: 500;

		line-height: 28px; /* 87.5% */

		letter-spacing: -0.3px;

	}

	.projects2 .card{

		border: none;

	}

	.siteplan7 h1{

		line-height: 70px;

		font-size: 50px;

		align-items: center;

		text-align: center;

	}

	.siteplan7 p{

		font-size: 18px;

		width: 550px;

		align-items: center;

		text-align: center;

		position: relative;

		right: 50px;

	}

	.siteplan7 img{

		width: 100%;

		height: 400px;

		position: relative;

		top: 50px;

	}

	.siteplan7 .arrow{

		position: relative;

		left: 150px;

	}

}

/* Lebar 542px - 649px */

@media (min-width: 542px) and (max-width: 649px) {

    .projects1 {

		padding: 15px 0;

		background: #FFFFFF;

		display: flex;

		width: 100%;

		height: 666px;

		background: url(../../core-images/banner-project-750.png);

	}

	.projects1 h1{

		margin-top: 60px;

		color: #fff;

		text-align: center;

		font-size: 62px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -2.3px;

	}

	.projects1 p{

		color: #E7E7E7;

		font-size: 18px;

		font-style: normal;

		text-align: center;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

	}

	.projects2 .logobrand{

		width: 70%;

		height: 216;

	}

	.projects2 .card-body h1{

		color: #131313;

		text-align: start;

		font-size: 32px;

		font-style: normal;

		font-weight: 500;

		line-height: 28px; /* 87.5% */

		letter-spacing: -0.3px;

	}

	.projects2 .card{

		border: none;

	}

	.siteplan7 h1{

		line-height: 70px;

		font-size: 50px;

		align-items: center;

		text-align: center;

	}

	.siteplan7 p{

		font-size: 18px;

		width: 450px;

		align-items: center;

		text-align: center;

		position: relative;

		left: 20px;

	}

	.siteplan7 img{

		width: 100%;

		height: 400px;

		position: relative;

		top: 30px;

		right: 100px;

	}

	.siteplan7 .arrow{

		position: relative;

		left: 150px;

	}

}

@media (min-width: 414px) and (max-width: 543px) {

    .projects1 {

		padding: 15px 0;

		background: #FFFFFF;

		display: flex;

		width: 100%;

		height: 666px;

		background: url(../../core-images/banner-project-750.png);

	}

	.projects1 h1{

		margin-top: 80px;

		color: #fff;

		text-align: center;

		font-size: 66px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -2.3px;

	}

	.projects1 p{

		color: #E7E7E7;

		font-size: 20px;

		font-style: normal;

		text-align: center;

		font-weight: 400;

		line-height: 22px; /* 175% */

		letter-spacing: -0.3px;

	}

	.projects2 .logobrand{

		width: 70%;

		height: 216;

	}

	.projects2 .card-body h1{

		color: #131313;

		text-align: start;

		font-size: 32px;

		font-style: normal;

		font-weight: 500;

		line-height: 28px; /* 87.5% */

		letter-spacing: -0.3px;

	}

	.projects2 .card{

		border: none;

	}

	.siteplan7 h1{

		line-height: 70px;

		font-size: 50px;

		align-items: center;

		text-align: center;

	}

	.siteplan7 h1{

		line-height: 70px;

		font-size: 40px;

		align-items: center;

		text-align: center;

		position: relative;

		left: 10px;

	}

	.siteplan7 p{

		font-size: 18px;

		width: 300px;

		align-items: center;

		text-align: center;

		position: relative;

		left: 20px;

	}

	.siteplan7 img{

		width: 200%;

		height: 400px;

		position: relative;

		right: 140px;

	}

	.siteplan7 .arrow{

		position: relative;

		right: 100px;

	}

}

@media (min-width: 370px) and (max-width: 415px) {

    .projects1 {

		padding: 15px 0;

		background: #FFFFFF;

		display: flex;

		width: 100%;

		height: 666px;

		background: url(../../core-images/banner-project-750.png);

	}

	.projects1 h1{

		margin-top: 70px;

		color: #fff;

		text-align: center;

		font-size: 42px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -2.3px;

	}

	.projects1 p{

		color: #E7E7E7;

		font-size: 16px;

		font-style: normal;

		text-align: center;

		font-weight: 400;

		line-height: 22px; /* 175% */

		letter-spacing: -0.3px;

	}

	.projects2 .logobrand{

		width: 70%;

		height: 216;

	}

	.projects2 .card-body h1{

		color: #131313;

		text-align: start;

		font-size: 32px;

		font-style: normal;

		font-weight: 500;

		line-height: 28px; /* 87.5% */

		letter-spacing: -0.3px;

	}

	.projects2 .card{

		border: none;

	}

	.siteplan7 h1{

		line-height: 70px;

		font-size: 40px;

		align-items: center;

		text-align: center;

		position: relative;

		right: 50px;

	}

	.siteplan7 p{

		font-size: 18px;

		width: 300px;

		align-items: center;

		text-align: center;

		position: relative;

		right: 60px;

	}

	.siteplan7 img{

		width: 200%;

		height: 400px;

		position: relative;

		right: 140px;

	}

	.siteplan7 .arrow{

		position: relative;

		right: 100px;

	}

}

/* ========================END PROJECTS====================================== */

/* ========================START DEVELOPER====================================== */

#maindeveloper{

	background: #040403;

}

.developer1 {

	padding: 15px 0;

	background: #040403;

	margin-top: 100px;

    width: 100%;

    height: 600px;

	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.88%, #000 74.51%), linear-gradient(180deg, #000 6.77%, rgba(0, 0, 0, 0.00) 57.47%), url(../../core-images/bannerdeveloper.png), lightgray 50% / cover no-repeat;

}

.developer1 h1 {

	height: 100px;

	width: 711px;

	display: flex;

    justify-content: center;

    align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

    color: #FFF;

    text-align: center;

    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    font-family: Gambetta;

    font-size: 85px;

    font-style: normal;

    font-weight: 700;

    line-height: 96.5px;

    text-transform: uppercase;

    margin-top: 150px;

	margin-left: 250px;

}

.developer1 .unitimg {

    width: 100%;

    height: 100%;

}

.developer1 p{

	color: #E7E7E7;

	text-align: center;

	font-size: 24px;

	font-style: normal;

	font-weight: 400;

	line-height: 42px; /* 175% */

	letter-spacing: -0.3px;

	width: 990px;

}

.developer1 img{

	margin-top: 200px;

}

.developer2 .dev1{

	width: 606px;

	height: 357px;

}

.developer2 h1{

	color: #fff;

	font-size: 48px;

	font-style: normal;

	font-weight: 600;

	line-height: 60px; /* 125% */

	letter-spacing: -1.75px;

}

.developer2 p{

	color: #A3A3A3;

	font-size: 18px;

	font-style: normal;

	font-weight: 400;

	line-height: 25px; /* 160% */

	letter-spacing: -0.3px;

}

/* Developer 3 */

.row.flex-row.flex-nowrap {

    overflow-x: hidden;

  }

.developer3 p{

	color: #6D6D6D;

	font-size: 24px;

	font-style: normal;

	font-weight: 400;

	line-height: 32px; /* 133.333% */

	letter-spacing: -0.3px;

}

.developer3 .cover-container {

    height: 200px;

    width: 100%;

    white-space: nowrap;

    overflow-x: scroll;

    overflow-y: hidden;

}

.developer3 .cover-item {

    position: relative;

    display: inline-block;

    margin: 8px 8px;

    box-shadow: 2px 2px 4px #bbb;

    border-top-right-radius: 4px;

    width: 400px;

    height: 200px;

    vertical-align: bottom;

    background-position: top left;

    background-repeat: no-repeat;

    background-size: cover;

}

.developer3 .centered-content {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100%;

}

/* Developer 4 */

.developer4 .cardright{

	background-color: transparent;

	border: none;

}

.developer4 .cardright h5{

	color: #FFF;

	text-align: right;

	font-size: 70px;

	font-style: normal;

	font-weight: 400;

	line-height: normal;

	letter-spacing: -0.3px;

}

.developer4 .cardright p{

	color: #A3A3A3;

	text-align: right;

	font-size: 24px;

	font-style: normal;

	font-weight: 400;

	line-height: 32px; /* 133.333% */

	letter-spacing: -0.3px;

}

/* Diffrent Card */

.developer4 .card{

	background-color: transparent;

	border: none;

}

.developer4 .card h5{

	color: #FFF;

	text-align: left;

	font-size: 70px;

	font-style: normal;

	font-weight: 400;

	line-height: normal;

	letter-spacing: -0.3px;

}

.developer4 .card p{

	color: #A3A3A3;

	text-align: left;

	font-size: 24px;

	font-style: normal;

	font-weight: 400;

	line-height: 32px; /* 133.333% */

	letter-spacing: -0.3px;

}

/* Lebar 1512px atau lebih besar */

@media (min-width: 1512px) {

	.developer1 {

		padding: 15px 0;

		background: #040403;

		margin-top: 100px;

		width: 100%;

		height: 600px;

		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.88%, #000 74.51%), linear-gradient(180deg, #000 6.77%, rgba(0, 0, 0, 0.00) 57.47%), url(../../core-images/bannerdeveloper.png), lightgray 50% / cover no-repeat;

	}

	.developer1 h1 {

		height: 100px;

		width: 711px;

		display: flex;

		justify-content: center;

		align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

		color: #FFF;

		text-align: center;

		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

		font-family: Gambetta;

		font-size: 85px;

		font-style: normal;

		font-weight: 700;

		line-height: 96.5px;

		text-transform: uppercase;

		margin-top: 150px;

		margin-left: 250px;

	}

	.developer1 .unitimg {

		width: 100%;

		height: 100%;

	}

	.developer1 p{

		color: #E7E7E7;

		text-align: center;

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		width: 990px;

	}

	.developer1 img{

		margin-top: 200px;

	}

	.developer2{

		padding-left: 150px;

		padding-right: 150px;

	}

	.developer2 h1{

		color: #fff;

		font-size: 48px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -1.75px;

	}

	.developer2 .visi{

		width: 500px;

	}

	.developer2 p{

		color: #A3A3A3;

		font-size: 18px;

		font-style: normal;

		font-weight: 400;

		line-height: 25px; /* 160% */

		letter-spacing: -0.3px;

	}

}

/* Lebar 1450px - 1511px */

@media (min-width: 1450px) and (max-width: 1511px) {

    .developer1 {

		padding: 15px 0;

		background: #040403;

		margin-top: 100px;

		width: 100%;

		height: 600px;

		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.88%, #000 74.51%), linear-gradient(180deg, #000 6.77%, rgba(0, 0, 0, 0.00) 57.47%), url(../../core-images/bannerdeveloper.png), lightgray 50% / cover no-repeat;

	}

	.developer1 h1 {

		height: 100px;

		width: 711px;

		display: flex;

		justify-content: center;

		align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

		color: #FFF;

		text-align: center;

		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

		font-family: Gambetta;

		font-size: 85px;

		font-style: normal;

		font-weight: 700;

		line-height: 96.5px;

		text-transform: uppercase;

		margin-top: 150px;

		margin-left: 250px;

	}

	.developer1 .unitimg {

		width: 100%;

		height: 100%;

	}

	.developer1 p{

		color: #E7E7E7;

		text-align: center;

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		width: 990px;

	}

	.developer1 img{

		margin-top: 200px;

	}

	.developer2{

		padding-left: 110px;

		padding-right: 110px;

	}

	.developer2 h1{

		color: #fff;

		font-size: 48px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -1.75px;

	}

	.developer2 .visi{

		width: 500px;

	}

	.developer2 p{

		color: #A3A3A3;

		font-size: 18px;

		font-style: normal;

		font-weight: 400;

		line-height: 25px; /* 160% */

		letter-spacing: -0.3px;

	}

}

/* Lebar 1350px - 1449px */

@media (min-width: 1350px) and (max-width: 1449px) {

	.developer1 {

		padding: 15px 0;

		background: #040403;

		margin-top: 100px;

		width: 100%;

		height: 600px;

		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.88%, #000 74.51%), linear-gradient(180deg, #000 6.77%, rgba(0, 0, 0, 0.00) 57.47%), url(../../core-images/bannerdeveloper.png), lightgray 50% / cover no-repeat;

	}

	.developer1 h1 {

		height: 100px;

		width: 711px;

		display: flex;

		justify-content: center;

		align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

		color: #FFF;

		text-align: center;

		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

		font-family: Gambetta;

		font-size: 85px;

		font-style: normal;

		font-weight: 700;

		line-height: 96.5px;

		text-transform: uppercase;

		margin-top: 150px;

		margin-left: 250px;

	}

	.developer1 .unitimg {

		width: 100%;

		height: 100%;

	}

	.developer1 p{

		color: #E7E7E7;

		text-align: center;

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		width: 990px;

	}

	.developer1 img{

		margin-top: 200px;

	}

	.developer2{

		padding-left: 65px;

		padding-right: 65px;

	}

	.developer2 h1{

		color: #fff;

		font-size: 48px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -1.75px;

	}

	.developer2 .visi{

		width: 500px;

	}

	.developer2 p{

		color: #A3A3A3;

		font-size: 18px;

		font-style: normal;

		font-weight: 400;

		line-height: 25px; /* 160% */

		letter-spacing: -0.3px;

	}

}

/* Lebar 1280px - 1349px */

@media (min-width: 1280px) and (max-width: 1349px) {

    .developer1 {

		padding: 15px 0;

		background: #040403;

		margin-top: 100px;

		width: 100%;

		height: 600px;

		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.88%, #000 74.51%), linear-gradient(180deg, #000 6.77%, rgba(0, 0, 0, 0.00) 57.47%), url(../../core-images/bannerdeveloper.png), lightgray 50% / cover no-repeat;

	}

	.developer1 h1 {

		height: 100px;

		width: 711px;

		display: flex;

		justify-content: center;

		align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

		color: #FFF;

		text-align: center;

		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

		font-family: Gambetta;

		font-size: 85px;

		font-style: normal;

		font-weight: 700;

		line-height: 96.5px;

		text-transform: uppercase;

		margin-top: 150px;

		margin-left: 250px;

	}

	.developer1 .unitimg {

		width: 100%;

		height: 100%;

	}

	.developer1 p{

		color: #E7E7E7;

		text-align: center;

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		width: 990px;

	}

	.developer1 img{

		margin-top: 200px;

	}

	.developer2{

		padding-left: 55px;

		padding-right: 55px;

	}

	.developer2 h1{

		color: #fff;

		font-size: 48px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -1.75px;

	}

	.developer2 .visi{

		width: 500px;

	}

	.developer2 p{

		color: #A3A3A3;

		font-size: 18px;

		font-style: normal;

		font-weight: 400;

		line-height: 25px; /* 160% */

		letter-spacing: -0.3px;

	}

}

/* Lebar 1200px - 1279px */

@media (min-width: 1200px) and (max-width: 1279px) {

    .developer1 {

		padding: 15px 0;

		background: #040403;

		margin-top: 100px;

		width: 100%;

		height: 600px;

		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.88%, #000 74.51%), linear-gradient(180deg, #000 6.77%, rgba(0, 0, 0, 0.00) 57.47%), url(../../core-images/bannerdeveloper.png), lightgray 50% / cover no-repeat;

	}

	.developer1 h1 {

		height: 100px;

		width: 711px;

		display: flex;

		justify-content: center;

		align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

		color: #FFF;

		text-align: center;

		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

		font-family: Gambetta;

		font-size: 85px;

		font-style: normal;

		font-weight: 700;

		line-height: 96.5px;

		text-transform: uppercase;

		margin-top: 150px;

		margin-left: 250px;

	}

	.developer1 .unitimg {

		width: 100%;

		height: 100%;

	}

	.developer1 p{

		color: #E7E7E7;

		text-align: center;

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		width: 990px;

	}

	.developer1 img{

		margin-top: 200px;

	}

	.developer2{

		padding-left: 50px;

		padding-right: 50px;

	}

	.developer2 h1{

		color: #fff;

		font-size: 48px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -1.75px;

	}

	.developer2 .visi{

		width: 500px;

	}

	.developer2 p{

		color: #A3A3A3;

		font-size: 18px;

		font-style: normal;

		font-weight: 400;

		line-height: 25px; /* 160% */

		letter-spacing: -0.3px;

	}

}

/* Lebar 1100px - 1199px */

@media (min-width: 1100px) and (max-width: 1199px) {

    .developer1 {

		padding: 15px 0;

		background: #040403;

		margin-top: 100px;

		width: 100%;

		height: 640px;

		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.88%, #000 74.51%), linear-gradient(180deg, #000 6.77%, rgba(0, 0, 0, 0.00) 57.47%), url(../../core-images/bannerdeveloper.png), lightgray 50% / cover no-repeat;

	}

	.developer1 h1 {

		height: 100px;

		width: 711px;

		display: flex;

		justify-content: center;

		align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

		color: #FFF;

		text-align: center;

		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

		font-family: Gambetta;

		font-size: 85px;

		font-style: normal;

		font-weight: 700;

		line-height: 96.5px;

		text-transform: uppercase;

		margin-top: 150px;

		margin-left: 90px;

	}

	.developer1 .unitimg {

		width: 100%;

		height: 100%;

	}

	.developer1 p{

		color: #E7E7E7;

		text-align: center;

		font-size: 24px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		width: 990px;

		position: relative;

		bottom: 250px;

	}

	.developer1 img{

		position: relative;

		left: 400px;

		bottom: 200px;

	}

	.developer2{

		padding-left: 100px;

		padding-right: 100px;

	}

	.developer2 h1{

		color: #fff;

		font-size: 48px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -1.75px;

	}

	.developer2 .visi{

		width: 400px;

	}

	.developer2 p{

		color: #A3A3A3;

		font-size: 18px;

		font-style: normal;

		font-weight: 400;

		line-height: 25px; /* 160% */

		letter-spacing: -0.3px;

	}

}

/* Lebar 992px - 1099px */

@media (min-width: 992px) and (max-width: 1099px) {

    .developer1 {

		padding: 15px 0;

		background: #040403;

		margin-top: 100px;

		width: 100%;

		height: 640px;

		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.88%, #000 74.51%), linear-gradient(180deg, #000 6.77%, rgba(0, 0, 0, 0.00) 57.47%), url(../../core-images/bannerdeveloper.png), lightgray 50% / cover no-repeat;

	}

	.developer1 h1 {

		height: 100px;

		width: 711px;

		display: flex;

		justify-content: center;

		align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

		color: #FFF;

		text-align: center;

		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

		font-family: Gambetta;

		font-size: 75px;

		font-style: normal;

		font-weight: 700;

		line-height: 86.5px;

		text-transform: uppercase;

		margin-top: 150px;

		margin-left: 90px;

	}

	.developer1 .unitimg {

		width: 100%;

		height: 100%;

	}

	.developer1 p{

		color: #E7E7E7;

		text-align: center;

		font-size: 22px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		width: 990px;

		position: relative;

		bottom: 250px;

	}

	.developer1 img{

		position: relative;

		left: 300px;

		bottom: 200px;

	}

	.developer2{

		padding-left: 80px;

		padding-right: 80px;

	}

	.developer2 h1{

		color: #fff;

		font-size: 48px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -1.75px;

	}

	.developer2 .visi{

		width: 400px;

	}

	.developer2 p{

		color: #A3A3A3;

		font-size: 18px;

		font-style: normal;

		font-weight: 400;

		line-height: 25px; /* 160% */

		letter-spacing: -0.3px;

	}

}

/* Lebar 892px - 991px */

@media (min-width: 892px) and (max-width: 991px) {

    .developer1 {

		padding: 15px 0;

		background: #040403;

		margin-top: 100px;

		width: 100%;

		height: 640px;

		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.88%, #000 74.51%), linear-gradient(180deg, #000 6.77%, rgba(0, 0, 0, 0.00) 57.47%), url(../../core-images/bannerdeveloper.png), lightgray 50% / cover no-repeat;

	}

	.developer1 h1 {

		height: 100px;

		width: 711px;

		display: flex;

		justify-content: center;

		align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

		color: #FFF;

		text-align: center;

		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

		font-family: Gambetta;

		font-size: 65px;

		font-style: normal;

		font-weight: 700;

		line-height: 76.5px;

		text-transform: uppercase;

		margin-top: 180px;

		margin-left: 90px;

	}

	.developer1 .unitimg {

		width: 100%;

		height: 100%;

	}

	.developer1 p{

		color: #E7E7E7;

		text-align: center;

		font-size: 22px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		width: 990px;

		position: relative;

		bottom: 250px;

		padding-left: 150px;

		padding-right: 150px;

	}

	.developer1 img{

		position: relative;

		left: 300px;

		bottom: 200px;

	}

	.developer2{

		padding-left: 80px;

		padding-right: 80px;

	}

	.developer2 h1{

		color: #fff;

		font-size: 48px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -1.75px;

	}

	.developer2 .visi{

		width: 400px;

	}

	.developer2 p{

		color: #A3A3A3;

		font-size: 18px;

		font-style: normal;

		font-weight: 400;

		line-height: 25px; /* 160% */

		letter-spacing: -0.3px;

	}

}

/* Lebar 750px - 891px */

@media (min-width: 750px) and (max-width: 891px) {

    .developer1 {

		padding: 15px 0;

		background: #040403;

		margin-top: 100px;

		width: 100%;

		height: 640px;

		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.88%, #000 74.51%), linear-gradient(180deg, #000 6.77%, rgba(0, 0, 0, 0.00) 57.47%), url(../../core-images/bannerdeveloper.png), lightgray 50% / cover no-repeat;

	}

	.developer1 h1 {

		height: 100px;

		width: 711px;

		display: flex;

		justify-content: center;

		align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

		color: #FFF;

		text-align: center;

		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

		font-family: Gambetta;

		font-size: 55px;

		font-style: normal;

		font-weight: 700;

		line-height: 66.5px;

		text-transform: uppercase;

		margin-top: 90px;

		margin-left: 90px;

	}

	.developer1 .unitimg {

		width: 100%;

		height: 100%;

	}

	.developer1 p{

		color: #E7E7E7;

		text-align: center;

		font-size: 20px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		width: 990px;

		position: relative;

		bottom: 250px;

		padding-left: 150px;

		padding-right: 150px;

	}

	.developer1 img{

		position: relative;

		left: 300px;

		bottom: 200px;

	}

	.developer2{

		padding-left: 80px;

		padding-right: 80px;

	}

	.developer2 h1{

		color: #fff;

		font-size: 48px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -1.75px;

	}

	.developer2 .visi{

		width: 400px;

	}

	.developer2 p{

		color: #A3A3A3;

		font-size: 18px;

		font-style: normal;

		font-weight: 400;

		line-height: 25px; /* 160% */

		letter-spacing: -0.3px;

	}

}

/* Lebar 650px - 749px */

@media (min-width: 650px) and (max-width: 749px) {

    .developer1 {

		padding: 15px 0;

		background: #040403;

		margin-top: 100px;

		width: 100%;

		height: 500px;

		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.88%, #000 74.51%), linear-gradient(180deg, #000 6.77%, rgba(0, 0, 0, 0.00) 57.47%), url(../../core-images/bannerdeveloper.png), lightgray 50% / cover no-repeat;

	}

	.developer1 h1 {

		height: 100px;

		width: 711px;

		display: flex;

		justify-content: center;

		align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

		color: #FFF;

		text-align: center;

		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

		font-family: Gambetta;

		font-size: 45px;

		font-style: normal;

		font-weight: 700;

		line-height: 56.5px;

		text-transform: uppercase;

		margin-top: 90px;

		margin-left: 40px;

	}

	.developer1 .unitimg {

		width: 100%;

		height: 100%;

	}

	.developer1 p{

		color: #E7E7E7;

		text-align: center;

		font-size: 20px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		width: 990px;

		position: relative;

		bottom: 250px;

		padding-left: 250px;

		padding-right: 250px;

	}

	.developer1 img{

		position: relative;

		left: 200px;

		bottom: 230px;

		width: 100px;

		height: 100px;

	}

	.developer2{

		padding-left: 80px;

		padding-right: 80px;

	}

	.developer2 img{

		width: 70%;

		height: 100px;

		position: relative;

	}

	.developer2 h1{

		color: #fff;

		font-size: 38px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -1.75px;

		margin-top: 30px;

	}

	.developer2 p{

		color: #A3A3A3;

		font-size: 20px;

		font-style: normal;

		font-weight: 400;

		line-height: 25px; /* 160% */

		letter-spacing: -0.3px;

	}

}

/* Lebar 542px - 649px */

@media (min-width: 542px) and (max-width: 649px) {

    .developer1 {

		padding: 15px 0;

		background: #040403;

		margin-top: 100px;

		width: 100%;

		height: 500px;

		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.88%, #000 74.51%), linear-gradient(180deg, #000 6.77%, rgba(0, 0, 0, 0.00) 57.47%), url(../../core-images/bannerdeveloper.png), lightgray 50% / cover no-repeat;

	}

	.developer1 h1 {

		height: 100px;

		width: 711px;

		display: flex;

		justify-content: center;

		align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

		color: #FFF;

		text-align: center;

		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

		font-family: Gambetta;

		font-size: 45px;

		font-style: normal;

		font-weight: 700;

		line-height: 56.5px;

		text-transform: uppercase;

		margin-top: 90px;

		margin-left: 40px;

	}

	.developer1 .unitimg {

		width: 100%;

		height: 100%;

	}

	.developer1 .row p{

		color: #E7E7E7;

		text-align: center;

		font-size: 22px;

		font-style: normal;

		font-weight: 400;

		line-height: 42px; /* 175% */

		letter-spacing: -0.3px;

		position: relative;

		bottom: 250px;

		padding-left: 270px;

		padding-right: 270px;

	}

	.developer1 img{

		position: relative;

		left: 200px;

		width: 100px;

		height: 100px;

	}

	.developer2{

		padding-left: 30px;

		padding-right: 30px;

	}

	.developer2 img{

		width: 90%;

		height: 150px;

		position: relative;

		top: 50px;

	}

	.developer2 h1{

		color: #fff;

		font-size: 38px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -1.75px;

		margin-top: 30px;

	}

	.developer2 .row p{

		color: #A3A3A3;

		font-size: 20px;

		font-style: normal;

		font-weight: 400;

		line-height: 32px; /* 160% */

		letter-spacing: -0.3px;

	}

}

@media (min-width: 375px) and (max-width: 543px) {

    .developer1 {

		padding: 15px 0;

		background: #040403;

		margin-top: 100px;

		width: 100%;

		height: 550px;

		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 17.88%, #000 74.51%), linear-gradient(180deg, #000 6.77%, rgba(0, 0, 0, 0.00) 57.47%), url(../../core-images/bannerdeveloper.png), lightgray 50% / cover no-repeat;

	}

	.developer1 h1 {

		height: 100px;

		width: 711px;

		display: flex;

		justify-content: center;

		align-items: center; /* Ini yang akan mengatur posisi vertikal tengah */

		color: #FFF;

		text-align: center;

		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

		font-family: Gambetta;

		font-size: 40px;

		font-style: normal;

		font-weight: 700;

		line-height: 60.5px;

		text-transform: uppercase;

		margin-top: 90px;

		margin-left: 20px;

	}

	.developer1 .unitimg {

		width: 100%;

		height: 100%;

	}

	.developer1 p{

		color: #E7E7E7;

		text-align: center;

		font-size: 20px;

		font-style: normal;

		font-weight: 400;

		line-height: 32px; /* 175% */

		letter-spacing: -0.3px;

		position: relative;

		bottom: 250px;

		padding-left: 340px;

		padding-right: 340px;

	}

	.developer1 img{

		position: relative;

		left: 200px;

		bottom: 230px;

		width: 100px;

		height: 100px;

		visibility: hidden;

	}

	.developer2{

		padding-left: 30px;

		padding-right: 30px;

	}

	.developer2 img{

		width: 90%;

		height: 150px;

	}

	.developer2 h1{

		color: #fff;

		font-size: 38px;

		font-style: normal;

		font-weight: 600;

		line-height: 60px; /* 125% */

		letter-spacing: -1.75px;

		margin-top: 30px;

	}

	.developer2 p{

		color: #A3A3A3;

		font-size: 20px;

		font-style: normal;

		font-weight: 400;

		line-height: 25px; /* 160% */

		letter-spacing: -0.3px;

	}

}

/* ========================END DEVELOPER====================================== */

/* ========================START NEWS====================================== */

#mainnews{

	background: #fff;

}

.news1 {

	padding: 15px 0;

	background: #fff;

   width: 100%;

   height: 500px;

}

.news1 h1 {

	color: #29313C;

	text-align: left;

	align-self: stretch;

	font-family: 'GambettaLight';

	font-size: 60px;

	font-weight: 100;

	font-style: normal;

	line-height: 90px; /* 150% */

	letter-spacing: 0.6px;

	text-transform: uppercase;

}

.news1 .unitimg {

    width: 100%;

    height: 100%;

}

.news1 p{

	color: #333;

	text-align: left;

	font-size: 20px;

	font-style: normal;

	font-weight: 400;

	line-height: 36px; /* 175% */

	letter-spacing: -0.3px;

	width: 538px;

}

.news1 .input-group{

	background-color: #000;

	border-radius: 5px;

}

.news1 .form-control{

	padding: 24px 32px;

	background-color: #000;

	border: none;

}

.news1 button{

	border: none;

}

.news1 .mouse{

	margin-top: 100px;

}

/* News 2 */

.news2 h5{

	color: #000;

	font-size: 24px;

	font-style: normal;

	font-weight: 500;

	line-height: 35px; /* 145.833% */

	letter-spacing: -0.3px;

}

.news2 p{

	color: #000;

	font-size: 16px;

	font-style: normal;

	font-weight: 400;

	line-height: 24px; /* 150% */

}

.news2 small{

	color: var(--black-70, #999);

	font-size: 14px;

	font-style: normal;

	font-weight: 500;

	line-height: 24px; /* 171.429% */

	letter-spacing: -0.2px;

}

.news2 .card .row{

	padding-left: 10px;

	padding-right: 10px;

}

.news2 .card {

	/* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */

	transition: 0.3s;

	/* border: none; */

	&:hover {

		box-shadow: 0px 46px 14px -29px rgba(0, 0, 0, 0.25);

	}

	a {

	  color: initial;

	  &:hover {

		text-decoration: initial;

	  }

	}

	.text-muted i {

	  margin: 0 10px;

	}

  }

.news2 .button button{

	margin: unset;

	padding: 0px;

	background: transparent;

	border: none;

	align-items: start;

	color: #C2A058;;

	font-size: 24px;

}

/* ========================START NEWS DETAIL====================================== */

#mainnewsdetail{

	background: #fff;

}

.newsdestail1 {

	padding: 15px 0;

	background: #fff;

	margin-top: 100px;

	width: 100%;

	height: 80px;

}

.newsdestail1 p{

	color: #333;

	text-align: left;

	font-size: 24px;

	font-style: normal;

	font-weight: 400;

	line-height: 42px; /* 175% */

	letter-spacing: -0.3px;

	width: 538px;

}

.newsdestail1 .progress{

	color: #C2A058;

}

.newsdestail1 p{

	color: #131313;

	font-size: 16px;

	font-style: normal;

	font-weight: 500;

	line-height: 28px; /* 175% */

	letter-spacing: -0.3px;

	margin-top: 20px;

}

/* newsdetail 2 */

.newsdestail2 small{

	color: var(--black-70, #999);

	font-size: 14px;

	font-style: normal;

	font-weight: 500;

	line-height: 24px; /* 171.429% */

	letter-spacing: -0.2px;

}

.newsdestail2 .jam{

	margin-right: 10px;

}

.newsdestail2 .garis{

	margin: 10px;

}

.newsdestail2 .share button {

	color: #29313C;

	padding: 0.5rem;

	margin:1rem 2rem 1rem 0;

	background:none;

	border:none;

  }

 .newsdestail2 .share button svg {height:30px;width:30px;}

 .newsdestail2 .share button:hover {

  color:#C2A058;

  }

.newsdestail2 p{

	color: #333;

	width: 1282px;

	font-size: 16px;

	font-style: normal;

	font-weight: 400;

	line-height: 24px; /* 150% */

	letter-spacing: -0.3px;

}

.newsdestail2 h1{

	color: var(--foundation-slate-gray-normal-hover, #29313C);

	font-size: 40px;

	font-style: normal;

	font-weight: 550;

	line-height: 61.5px; /* 153.75% */

	letter-spacing: 0.4px;

}

.newsdestail2 h3{

	color: var(--foundation-slate-gray-dark-hover, #1B2028);

	font-size: 36px;

	font-style: normal;

	font-weight: 600;

	line-height: 50px; /* 138.889% */

	letter-spacing: -1px;

}

/* ========================END NEWS DETAIL====================================== */

/* ========================END NEWS====================================== */

/*--------------------------------------------------------------

# Portfolio Details

--------------------------------------------------------------*/

.portfolio-details {

	padding-top: 40px;

}

.portfolio-details .portfolio-details-container {

	position: relative;

}

.portfolio-details .portfolio-details-carousel {

	position: relative;

	z-index: 1;

}

.portfolio-details .portfolio-details-carousel .owl-nav,

.portfolio-details .portfolio-details-carousel .owl-dots {

	margin-top: 5px;

	text-align: left;

}

.portfolio-details .portfolio-details-carousel .owl-dot {

	display: inline-block;

	margin: 0 10px 0 0;

	width: 12px;

	height: 12px;

	border-radius: 50%;

	background-color: #ddd !important;

}

.portfolio-details .portfolio-details-carousel .owl-dot.active {

	background-color: #0880e8 !important;

}

.portfolio-details .portfolio-info {

	padding: 30px;

	position: absolute;

	right: 0;

	bottom: -70px;

	background: #fff;

	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);

	z-index: 2;

}

.portfolio-details .portfolio-info h3 {

	font-size: 22px;

	font-weight: 700;

	margin-bottom: 20px;

	padding-bottom: 20px;

	border-bottom: 1px solid #eee;

}

.portfolio-details .portfolio-info ul {

	list-style: none;

	padding: 0;

	font-size: 15px;

}

.portfolio-details .portfolio-info ul li + li {

	margin-top: 10px;

}

.portfolio-details .portfolio-description {

	padding-top: 50px;

}

.portfolio-details .portfolio-description h2 {

	width: 50%;

	font-size: 26px;

	font-weight: 700;

	margin-bottom: 20px;

}

.portfolio-details .portfolio-description p {

	padding: 0 0 0 0;

}

@media (max-width: 768px) {

	.portfolio-details .portfolio-info {

		position: static;

		margin-top: 30px;

	}

}

/*--------------------------------------------------------------

# Blog

--------------------------------------------------------------*/

.blog {

	padding: 40px 0;

}

.blog .entry {

	padding: 20px;

	margin-bottom: 60px;

	overflow: hidden;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

}

.blog .entry .entry-img {

	max-height: 400px;

	margin: -20px -20px 20px -20px;

	overflow: hidden;

}

.blog .entry .entry-title {

	font-size: 20px;

	line-height: 26px;

	font-weight: bold;

	padding: 0;

	margin: 0 0 20px 0;

}

.blog .entry .entry-title a {

	color: #054a85;

	transition: 0.3s;

}

.blog .entry .entry-title a:hover {

	color: #0880e8;

}

.blog .entry .entry-meta {

	margin-bottom: 15px;

	color: #2b99f8;

}

.blog .entry .entry-meta ul {

	display: flex;

	flex-wrap: wrap;

	list-style: none;

	padding: 0;

	margin: 0;

}

.blog .entry .entry-meta ul li + li {

	padding-left: 20px;

}

.blog .entry .entry-meta i {

	font-size: 14px;

	padding-right: 4px;

}

.blog .entry .entry-meta a {

	color: #2b99f8;

	font-size: 14px;

	display: inline-block;

	line-height: 1;

}

.blog .entry .entry-content p {

	line-height: 24px;

	font-size: 15px;

}

.blog .entry .entry-content .read-more {

	-moz-text-align-last: right;

	text-align-last: right;

}

.blog .entry .entry-content .read-more a {

	display: inline-block;

	background: #ffc412;

	color: #fff;

	padding: 6px 20px 8px 20px;

	transition: 0.3s;

	font-size: 14px;

	border-radius: 50px;

}

.blog .entry .entry-content .read-more a:hover {

	background: #ca9b0e;

}

.blog .entry .entry-content h3 {

	font-size: 22px;

	margin-top: 30px;

	font-weight: bold;

}

.blog .entry .entry-content blockquote {

	overflow: hidden;

	background-color: #fafafa;

	padding: 60px;

	position: relative;

	text-align: center;

	margin: 20px 0;

}

.blog .entry .entry-content blockquote p {

	color: #444444;

	line-height: 1.6;

	margin-bottom: 0;

	font-style: italic;

	font-weight: 500;

	font-size: 22px;

}

.blog .entry .entry-content blockquote .quote-left {

	position: absolute;

	left: 20px;

	top: 20px;

	font-size: 36px;

	color: #e7e7e7;

}

.blog .entry .entry-content blockquote .quote-right {

	position: absolute;

	right: 20px;

	bottom: 20px;

	font-size: 36px;

	color: #e7e7e7;

}

.blog .entry .entry-content blockquote::after {

	content: "";

	position: absolute;

	left: 0;

	top: 0;

	bottom: 0;

	width: 3px;

	background-color: #0880e8;

	margin-top: 20px;

	margin-bottom: 20px;

}

.blog .entry .entry-footer {

	padding-top: 10px;

	border-top: 1px solid #e6e6e6;

}

.blog .entry .entry-footer i {

	color: #8ec8fb;

	display: inline;

}

.blog .entry .entry-footer a {

	color: #e7f3fe;

	transition: 0.3s;

}

.blog .entry .entry-footer a:hover {

	color: #ffc412;

}

.blog .entry .entry-footer .cats {

	list-style: none;

	display: inline;

	padding: 0 20px 0 0;

	font-size: 14px;

}

.blog .entry .entry-footer .cats li {

	display: inline-block;

}

.blog .entry .entry-footer .tags {

	list-style: none;

	display: inline;

	padding: 0;

	font-size: 14px;

}

.blog .entry .entry-footer .tags li {

	display: inline-block;

}

.blog .entry .entry-footer .tags li + li::before {

	padding-right: 6px;

	color: #6c757d;

	content: ",";

}

.blog .entry .entry-footer .share {

	font-size: 16px;

}

.blog .entry .entry-footer .share i {

	padding-left: 5px;

}

.blog .entry-single {

	margin-bottom: 30px;

}

.blog .entry-single .entry-title {

	font-size: 32px;

	line-height: 38px;

}

.blog .blog-author {

	padding: 20px;

	margin-bottom: 30px;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

}

.blog .blog-author img {

	width: 120px;

}

.blog .blog-author h4 {

	margin-left: 140px;

	font-weight: 600;

	font-size: 22px;

	margin-bottom: 0px;

	padding: 0;

}

.blog .blog-author .social-links {

	margin: 0 0 5px 140px;

}

.blog .blog-author .social-links a {

	color: #bfe0fd;

}

.blog .blog-author p {

	margin-left: 140px;

	font-style: italic;

	color: #b7b7b7;

}

.blog .blog-comments {

	margin-bottom: 30px;

}

.blog .blog-comments .comments-count {

	font-weight: bold;

}

.blog .blog-comments .comment {

	margin-top: 30px;

	position: relative;

}

.blog .blog-comments .comment .comment-img {

	width: 50px;

}

.blog .blog-comments .comment h5 {

	margin-left: 65px;

	font-size: 16px;

	margin-bottom: 2px;

}

.blog .blog-comments .comment h5 a {

	font-weight: bold;

	color: #444444;

	transition: 0.3s;

}

.blog .blog-comments .comment h5 a:hover {

	color: #ffc412;

}

.blog .blog-comments .comment h5 .reply {

	padding-left: 10px;

	color: #0880e8;

}

.blog .blog-comments .comment time {

	margin-left: 65px;

	display: block;

	font-size: 14px;

	color: #2b99f8;

	margin-bottom: 5px;

}

.blog .blog-comments .comment p {

	margin-left: 65px;

}

.blog .blog-comments .comment.comment-reply {

	padding-left: 40px;

}

.blog .blog-comments .reply-form {

	margin-top: 30px;

	padding: 30px;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

}

.blog .blog-comments .reply-form h4 {

	font-weight: bold;

	font-size: 22px;

}

.blog .blog-comments .reply-form p {

	font-size: 14px;

}

.blog .blog-comments .reply-form input {

	border-radius: 4px;

	padding: 20px 10px;

	font-size: 14px;

}

.blog .blog-comments .reply-form input:focus {

	box-shadow: none;

	border-color: #fad386;

}

.blog .blog-comments .reply-form textarea {

	border-radius: 0;

	padding: 10px 10px;

	font-size: 14px;

}

.blog .blog-comments .reply-form textarea:focus {

	box-shadow: none;

	border-color: #fad386;

}

.blog .blog-comments .reply-form .form-group {

	margin-bottom: 25px;

}

.blog .blog-comments .reply-form .btn-primary {

	border-radius: 50px;

	padding: 10px 30px;

	border: 0;

	background-color: #0880e8;

}

.blog .blog-comments .reply-form .btn-primary:hover {

	background-color: #ffc412;

}

.blog .blog-pagination {

	color: #5db1f9;

}

.blog .blog-pagination ul {

	display: flex;

	padding-left: 0;

	list-style: none;

}

.blog .blog-pagination li {

	border: 1px solid white;

	margin: 0 5px;

	transition: 0.3s;

}

.blog .blog-pagination li.active {

	background: white;

}

.blog .blog-pagination li a {

	color: #aaaaaa;

	padding: 7px 16px;

	display: inline-block;

}

.blog .blog-pagination li.active,

.blog .blog-pagination li:hover {

	background: #C2A058;

	border: 1px solid #C2A058;

}

.blog .blog-pagination li.active a,

.blog .blog-pagination li:hover a {

	color: #fff;

}

.blog .blog-pagination li.disabled {

	background: #fff;

	border: 1px solid white;

}

.blog .blog-pagination li.disabled i {

	color: #f1f1f1;

	padding: 10px 16px;

	display: inline-block;

}

.blog .sidebar {

	padding: 30px;

	margin: 0 0 60px 20px;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

}

.blog .sidebar .sidebar-title {

	font-size: 20px;

	font-weight: 700;

	padding: 0 0 0 0;

	margin: 0 0 15px 0;

	color: #054a85;

	position: relative;

}

.blog .sidebar .sidebar-item {

	margin-bottom: 30px;

}

.blog .sidebar .search-form form {

	background: #fff;

	border: 1px solid #ddd;

	padding: 3px 10px;

	position: relative;

	border-radius: 50px;

}

.blog .sidebar .search-form form input[type="text"] {

	border: 0;

	padding: 4px;

	width: calc(100% - 60px);

}

.blog .sidebar .search-form form button {

	position: absolute;

	top: 0;

	right: 0;

	bottom: 0;

	border: 0;

	background: none;

	font-size: 16px;

	padding: 0 25px;

	margin: -1px;

	border-radius: 50px;

	background: #0880e8;

	color: #fff;

	transition: 0.3s;

}

.blog .sidebar .search-form form button:hover {

	background: #2b99f8;

}

.blog .sidebar .categories ul {

	list-style: none;

	padding: 0;

}

.blog .sidebar .categories ul li + li {

	padding-top: 10px;

}

.blog .sidebar .categories ul a {

	color: #0665b7;

	transition: 0.3s;

}

.blog .sidebar .categories ul a:hover {

	color: #ffc412;

}

.blog .sidebar .categories ul a span {

	padding-left: 5px;

	color: #8ec8fb;

	font-size: 14px;

}

.blog .sidebar .recent-posts .post-item + .post-item {

	margin-top: 15px;

}

.blog .sidebar .recent-posts img {

	width: 80px;

	float: left;

}

.blog .sidebar .recent-posts h4 {

	font-size: 15px;

	margin-left: 95px;

	font-weight: bold;

}

.blog .sidebar .recent-posts h4 a {

	color: #054a85;

	transition: 0.3s;

}

.blog .sidebar .recent-posts h4 a:hover {

	color: #ffc412;

}

.blog .sidebar .recent-posts time {

	display: block;

	margin-left: 95px;

	font-style: italic;

	font-size: 14px;

	color: #138df7;

}

.blog .sidebar .tags {

	margin-bottom: -10px;

}

.blog .sidebar .tags ul {

	list-style: none;

	padding: 0;

}

.blog .sidebar .tags ul li {

	display: inline-block;

}

.blog .sidebar .tags ul a {

	color: #0880e8;

	font-size: 14px;

	padding: 6px 14px;

	margin: 0 6px 8px 0;

	border: 1px solid #ddeefe;

	border-radius: 50px;

	display: inline-block;

	transition: 0.3s;

}

.blog .sidebar .tags ul a:hover {

	color: #fff;

	border-color: #ffc412;

	background: #ffc412;

}

.blog .sidebar .tags ul a span {

	padding-left: 5px;

	color: white;

	font-size: 14px;

}

/*--------------------------------------------------------------

# Footer

--------------------------------------------------------------*/

#footer {

	background: #F7F7F7;

	padding: 0 0 30px 0;

	color: #5C5F66;

	font-size: 14px;

}

#footer .footer-newsletter {

	padding: 50px 0;

	background: #F7F7F7;

}

#footer .footer-newsletter h4 {

	font-size: 24px;

	margin: 0 0 20px 0;

	padding: 0;

	line-height: 1;

	font-weight: 600;

}

#footer .footer-newsletter form {

	margin-top: 30px;

	background: #fff;

	padding: 6px 10px;

	position: relative;

	border-radius: 50px;

}

#footer .footer-newsletter form input[type="email"] {

	border: 0;

	padding: 4px;

	width: calc(100% - 100px);

}

#footer .footer-newsletter form input[type="submit"] {

	position: absolute;

	top: 0;

	right: 0;

	bottom: 0;

	border: 0;

	background: none;

	font-size: 16px;

	padding: 0 20px;

	margin: 3px;

	background: #ffc412;

	color: #101113;

	transition: 0.3s;

	border-radius: 50px;

}

#footer .footer-newsletter form input[type="submit"]:hover {

	background: #6897bb;

}

#footer .footer-top {

	background: #F7F7F7;

	padding: 60px 0 30px 0;

}

#footer .footer-top .footer-info {

	margin-bottom: 30px;

}

#footer .footer-top .footer-info h3 {

	font-size: 18px;

	margin: 0 0 20px 0;

	padding: 2px 0 2px 0;

	line-height: 1;

	font-weight: 700;

}

#footer .footer-top .footer-info p {

	font-size: 14px;

	line-height: 24px;

	margin-bottom: 0;

	font-family: "Satoshi";

	color: #101113;

}

#footer .footer-top .social-links a {

	font-size: 14px;

	display: inline-block;

	background: rgba(255, 255, 255, 0.1);

	color: #5C5F66;

	line-height: 1;

	padding: 10px 0;

	margin-right: 4px;

	border-radius: 50%;

	text-align: center;

	width: 36px;

	height: 36px;

	transition: 0.3s;

}

#footer .footer-top .social-links a:hover {

	background: #ffc412;

	color: #fff;

	text-decoration: none;

}

#footer .footer-top h4 {

	font-size: 18px;

	font-weight: bold;

	color: #101113;

	position: relative;

	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

	padding-bottom: 12px;

}

#footer .footer-top .footer-links {

	margin-bottom: 30px;

}

#footer .footer-top .footer-links ul {

	list-style: none;

	padding: 0;

	margin: 0;

}

#footer .footer-top .footer-links ul i {

	padding-right: 2px;

	color: #5db1f9;

	font-size: 18px;

	line-height: 1;

}

#footer .footer-top .footer-links ul li {

	padding: 10px 0;

	display: flex;

	align-items: center;

}

#footer .footer-top .footer-links ul li:first-child {

	padding-top: 0;

}

#footer .footer-top .footer-links ul a {

	color: #5C5F66;

	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

	transition: 0.3s;

	font-size: 14px;

	display: inline-block;

	line-height: 1;

}

#footer .footer-top .footer-links ul a:hover {

	color: #5C5F66;

}

#footer .footer-top .footer-contact {

	margin-bottom: 30px;

}

#footer .footer-top .footer-contact p {

	line-height: 26px;

}

#footer .copyright {

	text-align: end;

	font-weight: bold;

	padding-bottom: 20px;

}

#footer .credits {

	padding-top: 5px;

	text-align: center;

	font-size: 13px;

	color: #5C5F66;

}

#footer .credits a {

	color: #ffc412;

}

@media (min-width: 1200px){

	.container, .container-lg, .container-md, .container-sm, .container-xl{

		max-width: 1348px;

	}

}

@media (min-width: 992px){

	.navbar-expand-lg .navbar-nav .nav-link{

		padding-right: 0;

		padding-left: 0;

	}

}