@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap');
body
{
 font-family: 'Teko', sans-serif;
}



.landing
{
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;

}
.landing .landing-section
{
  display: grid;
  grid-template-columns: 50% 1fr;
  height: 100vh;
}
.landing .landing-section .bg
{
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
}
.content
{
   background: radial-gradient(circle at 100px 100px, #b47420, #000000);
  width: 80%;
  clip-path: circle(50% at left);
  height: 90%;
  position: relative;
  box-shadow: 1px 3px 4px #000;
}
.content .inner
{
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
}
.bg1
{
  justify-content: flex-end;
}
.bg1 .content
{
  
  position: relative;
  box-shadow: 1px 3px 4px #000;
  clip-path: circle(50% at right);
      /*background-image: linear-gradient(to right, #163258 , #1458a9);*/
      background: radial-gradient(circle at 100px 100px, #5cabff, #000);

}
.bg1 .content:before
{
  position: absolute;
  top: 0;
  right:0;
  content: '';
  width: 95%;
  clip-path: circle(50% at right);
  background-image: linear-gradient(to right, #0e3e80 , #4678b3);
  height: 101%;
}
.bg .content2:before
{
  position: absolute;
  top: 0;
  left:0;
  content: '';
  width: 95%;
  clip-path: circle(50% at left);
  background-image: linear-gradient(to right, #bf7c24 , #2d1904);
  height: 101%;
}
.bg .content2 .inner
{
  transform: rotate(-90deg);
  text-align: center;
}
.content h3
{
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
  font-size: 43px;
  letter-spacing: .4px;
  margin-bottom: .5rem;
  text-shadow: 1px 3px 1px #000;
}
.content2 .inner
{
  left: 25px;
}
.content1 .inner
{
  right: 20px;
  top: 46%;
}
.content p
{
  color: #fff;
  letter-spacing: .5px;
  font-weight: 300;
  font-size: 25px;
  line-height: 1.2;
  text-shadow: 1px 1px 1px #000;
}
.link
{
  margin-top: 2rem;
}
.content1 .inner .btn-link
{
  color: #4778b3;
}
.content2 .inner .btn-link
{
  color: #be7b25;
}
.content2 .inner .link
{
  text-align: center!important;
}
.content2 h3
{
  line-height: 1;
}
.content1 .inner .btn-link:hover
{
  background: #4778b3;
  color: #fff;
  border-color: #fff;
}
.content2 .inner .btn-link:hover
{
  background: #be7b25;
  color: #fff;
  border-color: #fff;
}
.btn-link
{
  text-align: center;
  background: #fff;
  font-size: 1.02rem;
  letter-spacing: .4px;
  transition: all .3s cubic-bezier(.645,.045,.355,1);
  border: 1px solid #000;
  font-weight: 700;
  border-style: dotted;
  text-transform: uppercase;
  border-radius: 50px;
  padding: .45rem 1rem;
}
.btn-link i
{
    transition: all .3s cubic-bezier(.645,.045,.355,1);
}
.btn-link:hover
{
  color: #fff;
  text-decoration: none;
}
.btn-link:hover i
{
  transform: translateX(.4rem);
}
.btn-link i
{
  margin-left: .4rem;
}
.center-img
{
  position: absolute;
  top: 50%;
  z-index: 1111;
  left: 50%;
  width: 80%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 80%;
  transform: translate(-50%, -50%);
}
.landing-section
{
  position: relative;

}
.all-page-link
{
  position: absolute;
  width: 100%;
  height: 50%;
  top: 0;

}
@media screen and (min-width: 320px) and (max-width: 767px)
{
  .content h3
  {
    font-size: 25px;
    text-shadow: 1px 1px 1px #000;
  }
  .btn-link
  {
    font-size: .8rem;
    padding: .4rem .8rem;
  }
  .content p
  {
    font-size: 18px;
  }
  .content1 .inner 
  {
    right: 5px;
  }
  .bg .content2 .inner
  {
    transform: rotate(0deg);
  }
  .content 
  {
    width: 94%;
    height: 65%;
  }
  .bg1 .content:before 
  {
    width: 94%;
  }
  .bg .content2 .inner
  {
    text-align: left;
  }
  .content2 .inner 
  {
    left: 12px;
  }
}
@media screen and (min-width: 375px) and (max-width: 767px)
{
  .content
  {
    height:54%;
  }
}
@media screen and (min-width: 401px) and (max-width: 767px)
{
  .content
  {
    height: 57%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px)
{
  .content h3
  {
    font-size: 40px;
    text-shadow: 1px 2px 1px #000;
  }
  .btn-link
  {
    font-size: 1rem;
    padding: .4rem 1rem;
  }
  .content p
  {
    font-size: 25px;
  }
  .content1 .inner 
  {
    right: 30px;
  }
  .content 
  {
    width: 80%;
    height: 70%;
  }
  .bg1 .content:before 
  {
    width: 95%;
  }
  .content2 .inner 
  {
    top: 35%;
  }
  .content2 .inner
  {
    left: 30px;
  }
}
@media screen and (min-width: 1500px)
{
	.content
	{
		width: 60%;
	}
}
@media screen and (min-width: 1700px)
{
	.content
	{
		width: 65%;
		height: 70%;
	}
}

@media screen and (min-width: 1910px)
{
	.content
	{
		width: 55%;
		height: 58%;
	}
}
@media screen and (min-width: 2100px)
{
	.content
	{
		width: 50%;
		height: 53%;
	}
}
@media screen and (min-width: 2700px)
{
	.content
	{
		width: 35%;
		height: 47%;
	}
}