/* body{background:url("../img/loan-prod/loan-pord.jpg") no-repeat scroll left top / 100% auto;padding-bottom: 1000px;} */

/* .loan-prdut {
    position: relative;height: 585px;overflow: hidden;
}
.conbnrdetail {
    position: absolute;
    top: 42%;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 59%;
    text-align: center;
}
.conbnrdetail h1

 {
    font-size: 64px;
    line-height: 87px;
}
.conbnrdetail p {
    font-size: 29px;
    padding: 7px 9px 0 9px;
    line-height: 30px;margin: 0 auto;width: 70%
}
.load-title {
    text-align: center;
    padding: 54px 0 0 0;
    margin: 0 auto;
    max-width: 83%;
}
.loan-procontainer {
    margin: 0 auto;
    width: 88%;
    padding: 59px 0 0 0;
}
.load-title h2 {
    font-size: 45px;
}
.load-title p {
    font-size: 18px;
    padding: 11px 0 0 0;
    line-height: 32px;
}
.loadetaisl {
    display: flex;
    column-gap: 16px;
    row-gap: 20px;
} */


.loan-prdut {
    position: relative;height: 585px;overflow: hidden;
}
.conbnrdetail {
    position: absolute;
    top: 42%;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 59%;
    text-align: center;
}
.conbnrdetail h1

 {
    font-size: 64px;
    line-height: 87px;
}

.conbnrdetail p {
    font-size: 29px;
    padding: 7px 9px 0 9px;
    line-height: 30px;margin: 0 auto;width: 70%
}
.load-title {
    text-align: center;
    padding: 54px 0 0 0;
    margin: 0 auto;
    max-width: 83%;
}
.loan-procontainer {
    margin: 0 auto;
    width: 88%;
    padding: 59px 0 0 0;
}
.load-title h2 {
    font-size: 45px;
}
.load-title p {
    font-size: 18px;
    padding: 11px 0 0 0;
    line-height: 32px;
}
.loan-products {
  padding: 29px 0px;
}

/* HERO */
.hero {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(90deg, #eef4ff, #fde8ec);
  border-radius: 16px;
}

.hero h1 {
  font-size: 42px;
  margin-bottom: 10px;
}

.hero p {
  font-size: 16px;
  color: #555;
}

/* INTRO */
.intro {
  max-width: 700px;
  margin: 50px auto;
  text-align: center;
}

.intro h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.intro p {
  font-size: 14px;
  color: #555;
}

/* PRODUCTS */
.products {
   
    margin: 0 5.5% 0 16.6%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.product .content

 {
    padding: 19px 0 0 0px;
}
.product.reverse .content {
    text-align: right;padding-right: 36px;
}
.product {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 30px;
  align-items: start;
}

.product.reverse {
  grid-template-columns:  0.7fr 1fr;
}

.product.reverse .icon {
  order: 2;
}

.icon {
  
  border-radius: 16px;
}

.icon.blue {
  background: #e6f0ff;width: 335px;
}

.icon.pink {
  background: #fde6eb;width: 335px;
}

.content h3 {
  font-size: 39px;
  margin-bottom: 8px;
}

.content p {
  font-size: 14px;
  color: #555;
  margin-bottom: 12px;
  max-width: 520px;
}

.content a {
    font-size: 14px;
    text-decoration: none;
    color: #000;
    border: 1px solid #000;
    padding: 7px 43px 8px 18px;
    border-radius: 999px;
    display: inline-block;
    margin-top: 10px;
    background-image: url(../img/images/blackright--arrow.png);
    background-repeat: no-repeat;
    background-size: 17px auto;
    background-position: 87% 12px;
}
.content a:hover {background-image: url(../img/images/white-right-arrow.png);}
.content a:hover {
    background-color: #000;
    color: #fff;
}
.mob{display: none;}
/* RESPONSIVE */
@media only screen and (max-width: 1024px)
{
    .loan-prdut {height: 400px;}
    .conbnrdetail{top:19%}
    .loan-procontainer{width: 100%;}
}
@media (max-width: 768px) {
  
  .desk{display: none;}
  .mob {display: block;}
  .conbnrdetail h1 {font-size: 2.5em;line-height: 55px;}
  .conbnrdetail {max-width: 96%;}
  .hero h1 {font-size: 32px;}
  .product,.product.reverse { grid-template-columns: 1fr;text-align: left;}
  .icon {margin: auto;}
  .content p {max-width: 100%;}
  .products {margin: 0 4% 0 4%;}
  .conbnrdetail p {font-size: 20px;width: 96%;}
    .conbnrdetail {top: 31%;}
    .loan-prdut { height: auto;}
.conbnrdetail { top: 32%;}
    .load-title p {line-height: 27px;}
.load-title{text-align: left;}
.load-title h2 {  font-size: 30px;}

.loan-procontainer{padding: 20px 0 0 0;}
.loan-products {
    padding: 20px 0px;
}
.load-title {
   
    padding: 30px 0 0 0;}
    .products {
        margin: 0 4% 0 7%;
    }
    .product .content {
    padding: 0px 0 0 0px;
}
.product{gap: 17px;}
.content h3 {
    font-size: 30px;}
    .content p {font-size: 20px;}
    .product.reverse .content{order: 1;}
    .product.reverse .icon {
    order: 0;
}
.icon.blue {
    background: #e6f0ff;
    width: 200px;
    margin-left: 0;
}
.icon.pink { width: 200px;
    margin-left: 0;}
    .product.reverse .content {text-align: left;padding-right: 0;}
}