@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*----------------------------------------------------
/* 01. Global */
/*----------------------------------------------------*/
html{
  font-family: "Roboto", sans-serif;
}
:root {
  --cb-color-black: #0f0f0f;
  --cb-color-black2: #1A1A1A;
  --cb-color-brown: #EBD163;
  --cb-color-gray-100: #f7f4f1;
  --cb-color-gray-400: #2C2C2C;
  --cb-color-gray-300: #898989;
  --cb-color-gray-500: #CCCCCC;
  --cb-color-white: #F5F5F5;
  --cb-color-gray-200: #EBEBEB;
  --cb-color-white: #ffffff;
  --cb-color-white-opacity: #ffffff;
  --cb-color-black-opacity: #00000022;
  --transition-base: all 0.3s;
}
.form-control:focus,
button:visited,
button.active,
button:hover,
button:focus,
input:visited,
input.active,
input:hover,
input:focus,
textarea:hover,
textarea:focus,
a:hover,
a:focus,
a:visited,
a.active,
select,
select:hover,
select:focus,
select:visited {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  text-decoration: none;
  /* color: initial; */
}
iframe{
  width: 560px;
  height: 315px;
}
li{
  list-style-type: none;
}
button{
  background: transparent;
  border: none;
}
.contaner-1290{
  max-width: 1290px;
}
img{
  width: 100%;
}
.input:focus{
  border-color: initial;
  box-shadow: inherit;
}
body{
  background-color: var(--cb-color-gray-200);
  position: relative;
  z-index: -5;
  font-family: "Roboto","sans-serif";
}

.cb-bg-color-black {
  background-color: var(--cb-color-black);
}
.cb-bg-color-gray-100 {
  background-color: var(--cb-color-gray-100);
}
.cb-bg-color-brown {
  background-color: var(--cb-color-brown);
}
.cb-bgcolor-gray-300 {
  background-color: var(--cb-color-gray-300);
}
.cb-color-gray300 {
  color: var(--cb-color-gray-300);
}
.cb-bg-color-white {
  background-color: var(--cb-color-white);
}
.cb-bg-color-gray-400 {
  background-color: var(--cb-color-gray-400);
}
.cb-bg-color-gray-500 {
  background-color: var(--cb-color-gray-500);
}
.cb-color-gray-500 {
  color: var(--cb-color-gray-500);
}
.cb-color-white {
  color: var(--cb-color-white);
}
.cb-color-black {
  color: #0f0f0f!important;
}
.cb-color-black2{
  color: var( --cb-color-black2);
}
.cb-color-brown {
  color: #EBD163;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}
.g-30,
.gx-30 {
  --bs-gutter-x: 30px;
}
.g-45,
.gx-45 {
  --bs-gutter-x: 45px;
}
.g-65,
.gx-65 {
  --bs-gutter-x: 65px;
}
.g-30,
.gy-30 {
  --bs-gutter-y: 30px;
}
.tran5s{
  transition: .5s;
}
.cb-width-45 {
  width: 45%;
}
.cb-width-50 {
  width: 50%;
}
.cb-gap-20 {
  gap: 20px;
}
.cb-gap-30 {
  gap: 30px;
}
.cb-gap-45 {
  gap: 45px;
}
.tran3{
  transition: all ease .3s;
}
.ps-rel{
  position: relative;
}
.ps-abs{
  position: absolute;
}
.z-index1{
  z-index: 1;
}
.z-index-1{
  z-index: -1;
}
.z-index-5{
  z-index: -5;
}
.btn{
  border: none;
}


body {
  margin: 0;
  padding: 0;
  z-index: 1;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  overflow-x: hidden;
  color: var(--cb-color-gray-800);
  font-family: var(--font-body);
}

.container-1290 {
  max-width: 1290px;
}
.container-1722 {
  max-width: 1746px;
}

.g-30,
.gx-30 {
  --bs-gutter-x: 30px;
}

.g-30,
.gy-30 {
  --bs-gutter-y: 30px;
}

ul {
  margin: 0;
  padding: 0;
}

[data-background] {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}
img {
  max-width: 100%;
  height: auto;
}

button {
  cursor: pointer;
}


.form-control {
  -webkit-box-shadow: none;
  box-shadow: none;
}

p {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.ul-li ul li {
  list-style: none;
}
.center{
  display: grid;
  place-items: center;
}
.tran3s{
  transition: .3s;
}
/*-- Margin Top --*/
.cb-mt-5{margin-top:5px}.mt-10{margin-top:10px}.mt-15{margin-top:15px}.mt-20{margin-top:20px}.mt-25{margin-top:25px}.mt-30{margin-top:30px}.mt-35{margin-top:35px}.mt-40{margin-top:40px}.mt-45{margin-top:45px}.mt-50{margin-top:50px}.mt-55{margin-top:55px}.mt-60{margin-top:60px}.mt-65{margin-top:65px}.mt-70{margin-top:70px}.mt-75{margin-top:75px}.mt-80{margin-top:80px}.mt-85{margin-top:85px}.mt-90{margin-top:90px}.mt-95{margin-top:95px}.mt-100{margin-top:100px}.mt-105{margin-top:105px}.mt-110{margin-top:110px}.mt-115{margin-top:115px}.mt-120{margin-top:120px}.mt-125{margin-top:125px}.mt-130{margin-top:130px}.mt-135{margin-top:135px}.mt-140{margin-top:140px}.mt-145{margin-top:145px}.mt-150{margin-top:150px}.mt-155{margin-top:155px}.mt-160{margin-top:160px}.mt-165{margin-top:165px}.mt-170{margin-top:170px}.mt-175{margin-top:175px}.mt-180{margin-top:180px}.mt-185{margin-top:185px}.mt-190{margin-top:190px}.mt-195{margin-top:195px}.mt-200{margin-top:200px}.cb-mb-5{margin-bottom:5px}.mb-10{margin-bottom:10px}.mb-15{margin-bottom:15px}.mb-20{margin-bottom:20px}.mb-25{margin-bottom:25px}.mb-30{margin-bottom:30px}.mb-35{margin-bottom:35px}.mb-40{margin-bottom:40px}.mb-45{margin-bottom:45px}.mb-50{margin-bottom:50px}.mb-55{margin-bottom:55px}.mb-60{margin-bottom:60px}.mb-65{margin-bottom:65px}.mb-70{margin-bottom:70px}.mb-75{margin-bottom:75px}.mb-80{margin-bottom:80px}.mb-85{margin-bottom:85px}.mb-90{margin-bottom:90px}.mb-95{margin-bottom:95px}.mb-100{margin-bottom:100px}.mb-105{margin-bottom:105px}.mb-110{margin-bottom:110px}.mb-115{margin-bottom:115px}.mb-120{margin-bottom:120px}.mb-125{margin-bottom:125px}.mb-130{margin-bottom:130px}.mb-135{margin-bottom:135px}.mb-140{margin-bottom:140px}.mb-145{margin-bottom:145px}.mb-150{margin-bottom:150px}.mb-155{margin-bottom:155px}.mb-160{margin-bottom:160px}.mb-165{margin-bottom:165px}.mb-170{margin-bottom:170px}.mb-175{margin-bottom:175px}.mb-180{margin-bottom:180px}.mb-185{margin-bottom:185px}.mb-190{margin-bottom:190px}.mb-195{margin-bottom:195px}.mb-200{margin-bottom:200px}.ml-5{margin-left:5px}.ml-4{margin-left:4px}.ml-10{margin-left:10px}.ml-15{margin-left:15px}.ml-20{margin-left:20px}.ml-25{margin-left:25px}.ml-30{margin-left:30px}.ml-35{margin-left:35px}.ml-40{margin-left:40px}.ml-45{margin-left:45px}.ml-50{margin-left:50px}.ml-55{margin-left:55px}.ml-60{margin-left:60px}.ml-65{margin-left:65px}.ml-70{margin-left:70px}.ml-75{margin-left:75px}.ml-80{margin-left:80px}.ml-85{margin-left:85px}.ml-90{margin-left:90px}.ml-95{margin-left:95px}.ml-100{margin-left:100px}.mr-5{margin-right:5px}.mr-10{margin-right:10px}.mr-15{margin-right:15px}.mr-20{margin-right:20px}.mr-25{margin-right:25px}.mr-30{margin-right:30px}.mr-35{margin-right:35px}.mr-40{margin-right:40px}.mr-45{margin-right:45px}.mr-50{margin-right:50px}.mr-55{margin-right:55px}.mr-60{margin-right:60px}.mr-65{margin-right:65px}.mr-70{margin-right:70px}.mr-75{margin-right:75px}.mr-80{margin-right:80px}.mr-85{margin-right:85px}.mr-90{margin-right:90px}.mr-95{margin-right:95px}.mr-100{margin-right:100px}
/*-- Padding Top --*/
.cb-section-pt,.pt-120{padding-top:120px}.cb-pt-5{padding-top:5px}.pt-10{padding-top:10px}.pt-15{padding-top:15px}.pt-20{padding-top:20px}.pt-25{padding-top:25px}.pt-30{padding-top:30px}.pt-35{padding-top:35px}.pt-40{padding-top:40px}.pt-45{padding-top:45px}.pt-50{padding-top:50px}.pt-55{padding-top:55px}.pt-60{padding-top:60px}.pt-65{padding-top:65px}.pt-70{padding-top:70px}.pt-75{padding-top:75px}.pt-80{padding-top:80px}.pt-85{padding-top:85px}.pt-90{padding-top:90px}.pt-95{padding-top:95px}.pt-100{padding-top:100px}.pt-105{padding-top:105px}.pt-110{padding-top:110px}.pt-115{padding-top:115px}.pt-125{padding-top:125px}.pt-130{padding-top:130px}.pt-135{padding-top:135px}.pt-140{padding-top:140px}.pt-145{padding-top:145px}.pt-150{padding-top:150px}.pt-155{padding-top:155px}.pt-160{padding-top:160px}.pt-165{padding-top:165px}.pt-170{padding-top:170px}.pt-175{padding-top:175px}.pt-180{padding-top:180px}.pt-185{padding-top:185px}.pt-190{padding-top:190px}.pt-195{padding-top:195px}.pt-200{padding-top:200px}.cb-section-pb,.pb-120{padding-bottom:120px}.cb-pb-5{padding-bottom:5px}.pb-10{padding-bottom:10px}.pb-15{padding-bottom:15px}.pb-20{padding-bottom:20px}.pb-25{padding-bottom:25px}.pb-30{padding-bottom:30px}.pb-35{padding-bottom:35px}.pb-40{padding-bottom:40px}.pb-45{padding-bottom:45px}.pb-50{padding-bottom:50px}.pb-55{padding-bottom:55px}.pb-60{padding-bottom:60px}.pb-65{padding-bottom:65px}.pb-70{padding-bottom:70px}.pb-75{padding-bottom:75px}.pb-80{padding-bottom:80px}.pb-85{padding-bottom:85px}.pb-90{padding-bottom:90px}.pb-95{padding-bottom:95px}.pb-100{padding-bottom:100px}.pb-105{padding-bottom:105px}.pb-110{padding-bottom:110px}.pb-115{padding-bottom:115px}.pb-125{padding-bottom:125px}.pb-130{padding-bottom:130px}.pb-135{padding-bottom:135px}.pb-140{padding-bottom:140px}.pb-145{padding-bottom:145px}.pb-150{padding-bottom:150px}.pb-155{padding-bottom:155px}.pb-160{padding-bottom:160px}.pb-165{padding-bottom:165px}.pb-170{padding-bottom:170px}.pb-175{padding-bottom:175px}.pb-180{padding-bottom:180px}.pb-185{padding-bottom:185px}.pb-190{padding-bottom:190px}.pb-195{padding-bottom:195px}.pb-200{padding-bottom:200px}.pl-5{padding-left:5px}.pl-10{padding-left:10px}.pl-15{padding-left:15px}.pl-20{padding-left:20px}.pl-25{padding-left:25px}.pl-30{padding-left:30px}.pl-35{padding-left:35px}.pl-40{padding-left:40px}.pl-45{padding-left:45px}.pl-50{padding-left:50px}.pl-55{padding-left:55px}.pl-60{padding-left:60px}.pl-65{padding-left:65px}.pl-70{padding-left:70px}.pl-75{padding-left:75px}.pl-80{padding-left:80px}.pl-85{padding-left:85px}.pl-90{padding-left:90px}.pl-95{padding-left:95px}.pl-100{padding-left:100px}.pr-5{padding-right:5px}.pr-10{padding-right:10px}.pr-15{padding-right:15px}.pr-20{padding-right:20px}.pr-25{padding-right:25px}.pr-30{padding-right:30px}.pr-35{padding-right:35px}.pr-40{padding-right:40px}.pr-45{padding-right:45px}.pr-50{padding-right:50px}.pr-55{padding-right:55px}.pr-60{padding-right:60px}.pr-65{padding-right:65px}.pr-70{padding-right:70px}.pr-75{padding-right:75px}.pr-80{padding-right:80px}.pr-85{padding-right:85px}.pr-90{padding-right:90px}.pr-95{padding-right:95px}.pr-100{padding-right:100px}


/* ad-part-start */
.get-hed{
  font-size:100px;
  font-weight:700;
}
.billbord-img:hover .advertising{
  bottom: 0;
}
.billbord-img{
  overflow: hidden;
}
.billbord-img img {
  height: auto;
  object-fit: cover;
}
.billbord-img:hover img{
	transform: scale(1.1) translateY(0px);
}
.advertising {
  width: auto;
  bottom: -80%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.advertising{
  border-radius:10px;
  padding:10px 20px;
  display: inline;
}
.advertising h2{
  font-weight:600;
  font-size:20px;
}

/* ad-part-end */

/* footer-part-start */
footer{
  padding: 30px 0;
  border-radius: 50px 50px 0 0;
}
.footer-img{
  width: 180px;
}
.about-item li{
  list-style-type: none;
}
.about-item li a:hover{
  transform: scale(1.1);
  color: var(--cb-color-brown);
  display: block;
}
.footer-social a{
  width: 35px;
  height: 35px;
}
.footer-social a:hover{
  transform: scale(1.2);
  background-color: var(--cb-color-brown);
}

/* adderes-part *****/
.get-touch-part{
  padding:20px;
  border-radius:20px;
}
.adderes-content h4{
  font-size:20px;
}
.adderes-part{
  padding: 35px 30px;
  border-radius:20px;
}
.adderes-logo{
  width: 55px;
  height: 55px;
  margin:10px;
  border-radius:20px;
  margin-right:20px;

}
/* contact-part-end ************/

.hero-btn{
  width: 170px;
  height: 60px;
  font-size: 16px;
    font-weight: 600;
    border-radius:50px;
}
.hero-btn:hover{
  background:#000;
  color:#fff;
  transition: all .2s ease-in-out;
}
.heading h1{
  font-size:90px;
  font-weight:700;
  
}

/*All Animations*/

.zoom-in {
  -webkit-transform: scale(0);
  transform: scale(0);

  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.tileContainer{
  border:10px solid black;
  display:icbine-block;
  position:relative;
  width:1024px;
  height:768px;
  overflow:hidden;
  box-sizing:border-box;
}
.tile{
  position:relative;
  vertical-align:top;
  display:icbine-block;
  border-right:1px solid rgba(0, 0, 0, 0.5);
  border-bottom:1px solid rgba(0, 0, 0, 0.5);  
  box-sizing:border-box;
}

.tile:after{
  content:"";
  background-color:#cc1c32;
  width:6px;
  height:6px;
  position:absolute;
  top:100%;
  right:0px;
  transform:translate(50%, -50%);
  z-index:2;
  line-height:1;
}

/* image-effect-white-black ********/
.project-img{
  border-radius:20px;
   max-height:250px;
}
.img-effect{
  transition: .3s;
  transition-delay: .5s;
  overflow: hidden;
}
.img-effect:hover{
  filter: grayscale(100%);
}
.image-hover::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  content: '';
  width: 0;
  height: 0;
  background: rgb(185 151 85 / 38%); 
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: All 0.3s;
}

.image-hover:hover img {
  filter: grayscale(100%);
  transform: scale(1.05,1.05) rotate(2deg);
  transition: 0.3s;
  transition-delay: .3s;
}
.image-hover {
  position: relative;
  overflow: hidden;
  transition-delay: .3s;
}
.image-hover img{
  transition: 0.5s;
}

/****************** offcanvus start **************/
/* Circle */
.imghover figure {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.imghover figure::before {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 2;
	display: block;
	content: "";
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.imghover figure:hover::before {
	-webkit-animation: circle 0.75s;
	animation: circle 0.95s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
/* Flashing */
.imghover2 figure:hover img {
	opacity: 1;
	-webkit-animation: flash 3s;
	animation: flash 3s;
}
@-webkit-keyframes flash {
	0% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}

/* audio player */
.audio-part{
  padding:10px;
  background:#f8f8f8;
  border-radius:10px;
  margin-bottom:35px;
}
.audio-part h3{
  padding:10px;
  border-bottom:1px solid #ddd;
}
.audio-part audio {
  background: #333;
  padding: 10px;
   margin-top:10px;
  border-radius: 10px;
  width: 100%;
  height: 65px;
}

@media only screen and (max-width: 968px) {
  .get-hed {
    font-size: 52px;
    font-weight: 700;
}
}
@media only screen and (max-width: 767px) {
  .get-hed {
    font-size: 42px;
    font-weight: 700;
}
}
@media only screen and (max-width: 600px) {
  .get-hed {
    font-size: 32px;
    font-weight: 700;
}
}