/**
* Last update: May 7, 2023
* Author: Subrata Samanta
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 

p {
text-align: justify;
/*font-family: Helvetica, sans-serif;*/
color: #1a1a1a;
}


a {
  color: #2487ce;
  text-decoration: none;
}

a:hover {
  color: #469fdf;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
}

ul {
    list-style: none;
}

/*--------------------------------------------------------------
# body
--------------------------------------------------------------*/

.full-page {
    display: grid;
    min-height: 100vh;
    grid-template-rows: min-content auto min-content;
}

.content {
    margin-left: auto;
    margin-right: auto;
    max-width: 768px; /* max width of body text */ 
}

.main-content ul li h1 {
    font-size: 1.15rem; 
}

/*--------------------------------------------------------------
# header and footer
--------------------------------------------------------------*/

.header {
    padding: 15px 10px;
   background-color: #f3f9fd;
}


.header p {
text-align: center;
color: #124265;
font-size: 1.15rem;
}

.navbar {
  display: flex;
justify-content: center;
  align-items: center;
}


.navbar a {
  text-decoration: none;
  padding: 7px 10px 0px 0px;
}

.footer {
    padding: 15px 10px;
   background-color: #f3f9fd;
}

/*--------------------------------------------------------------
# box (with color) and unbox (without color}
--------------------------------------------------------------*/

.box {
    padding: 20px 10px;
   background-color: #f3f9fd;
}


.unbox {
    padding: 25px 10px;
}

.body-upper{
    padding: 25px 10px;
}

.body-upper ul li h1 {
    font-size: 1.15rem;
    color: #124265; 
}
.body-upper .content {
display: flex;
align-items: left;
flex-wrap: wrap;
}
.col5{flex:0 0 auto;width:41.66666667%}

.text{
padding: 2px 1px;
}
.unbox ul li h1 {
    font-size: 1.15rem;
    color: #124265; 
}

.box ul li h1 {
    font-size: 1.15rem;
    color: #124265; 
}

.footer {
    padding: 15px 10px;
   background-color: #f3f9fd;
}

/*--------------------------------------------------------------
# About Video
--------------------------------------------------------------*/
.about-video .content {
  font-size: 15px;
}

.about-video .content h3 {
  font-weight: 700;
  font-size: 24px;
  color: #124265;
}

.about-video .content ul {
  list-style: none;
  padding: 0;
}

.about-video .content ul li {
  padding-bottom: 10px;
  padding-left: 28px;
  position: relative;
}

.about-video .content ul i {
  font-size: 24px;
  color: #2487ce;
  position: absolute;
  left: 0;
  top: -2px;
}

.about-video .content p:last-child {
  margin-bottom: 0;
}

.about-video .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(#2487ce 50%, rgba(36, 135, 206, 0.4) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}

.about-video .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);
}

.about-video .play-btn::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(36, 135, 206, 0.7);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.about-video .play-btn:hover::after {
  border-left: 15px solid #2487ce;
  transform: scale(20);
}

.about-video .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;
  animation: none;
  border-radius: 0;
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

.two-column {
  display: flex;
  gap: 15px; /* space between columns */
}

.two-column > .column {
  flex: 1; /* each column takes equal width */
}


/*--------------------------------------------------------------
# image
--------------------------------------------------------------*/

.img-warp-right {
    float: right;
  margin-left: 1rem;
}


.img-warp-left {
    float: left;
  margin-right: 1rem;
}



/*--------------------------------------------------------------
# end
--------------------------------------------------------------*/