.bannerr{
   background: linear-gradient(rgba(0, 0, 0, .349), #131112), url(../images/bg-why-us.webp);
   background-size: cover;
   background-position: center;
    height: 35vh;
    display: grid;
    place-items: center
}
.bannerr h2 {
    font-size: clamp(40px, 3vw, 120px);
    color: #fff;
    font-weight: 700
}

.bannerr p {
    color: var(--white-color)
}

.bannerr a {
    color: var(--main)
}



/*-- ======================= First Section ======================= --*/
.section-1 .data {
    margin-bottom: 50px
}

.section-1 h2 {
    font-size: clamp(27px, 2.5vw, 100px);
    color: var(--second);
    font-family: var(--accent-font);
    margin-bottom: 15px
}

.section-1 .para2 {
    font-weight: 700;
    position: relative;
    width: 84%;
    text-align: justify;
    text-align-last: center;
    margin: auto
}

.section-1 .image1 {
    position: absolute;
    height: 70px;
    top: -15px
}

.section-1 .image2 {
    position: absolute;
    height: 70px;
    bottom: -15px;
    right: 0;
    transform: rotate(180deg);
    z-index: -1
}

/*-- =======================  Second Section ======================= --*/

.addon-1 .container-fluid{
	max-width: 1300px;
}

.addon-1{
	/* width: 100%; */
	max-width: 1820px;
	margin: 0 auto;
	background-color: var(--secondary-color);
	border-radius: 50px;
}
.addon-1 h2 {
    font-size: clamp(25px, 2vw, 100px);
    color: var(--second);
    font-family: var(--accent-font)
}

.addon-1 h2 .image img {
    height: 50px
}

.addon-1 .data h3 {
    font-family:var(--accent-font);
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px
}

.addon-1 .data p {
    font-size: 15px
}


.addon-1 .outside{
    display: flex;
    align-items: center;
    height: 180px;
    padding: 30px 20px;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, .1);
    position: relative;
    background: rgba(247, 96, 49, 0.3);
    box-shadow: 0px 0px 30px rgba(85, 85, 85, 0.1);    border-radius: 8px;
    z-index: 1;
  }
  
  .addon-1 .outside::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: #FFFFFF;
    border-radius: 0px 60px;
  }

  
  .addon-1 .outside:hover {
    background: #2CB2B3;
    -webkit-box-shadow: 0px 0px 30px rgba(85, 85, 85, 0.1);
            box-shadow: 0px 0px 30px rgba(85, 85, 85, 0.1);
  }

  @Media(max-width:450px){
    .addon-1 .outside{
        height: 250px;
    } 
  }




  /*-- =======================  Third Section ======================= --*/
  .agra .section-title h3{
    margin-bottom: 5px;
  }

  .agra .section-title h2{
    font-size: 34px;
  }

  .agra .insided {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.agra .insided .boxes {
    padding: 20px 30px; 
    border-radius: 0px 100px 100px 0px;
    background: linear-gradient(to right top, #accdff, #95e1ff, #9ef0ef, #c2fadb, #f0ffd0);
    color: #000;
    margin-bottom: 10px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all .5s ease-in-out;
}

.agra .insided .boxes:hover{
    transform: translateY(-6px);
    cursor: pointer;
}

.agra .image-2 .image {
    height: 600px;
    width: 100%;
    overflow: hidden !important;
    object-fit: cover;
    border-radius: 20px;
}

.agra .image-2 .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: all .5s ease-in-out;
}

.agra .image-2 .image img:hover {
    transform: scale(1.2);
    cursor: pointer;
    border-radius: 28px;
}

.agra .insided .boxes span{
    font-weight: 700;
    display: inline-block;
    margin-bottom: 5px;
    font-size: 18px;
    color: #000;
}


@Media(max-width:991px){
    .agra .image-2 .image{
        margin-top: 30px;
        height: 400px;
        border-radius: 12px;
    }

    
    .agra .section-title h2{
		font-size: 28px;
	}
}


@media (max-width: 768px) {
    .agra .insided .boxes {
        padding: 15px 20px;
        min-height: auto;
        border-radius: 20px;
    }
}

@media(max-width:576px){
    .agra .insided{
        margin-top:20px;
    }
}
@media(max-width:450px){
    .agra .insided .boxes{
        padding: 15px 20px 15px 15px;
        margin-bottom: 15px;
    }

    .agra .insided .boxes  span{
        font-size: 17px;
    }
    .agra .image-2 .image{
        height: 300px;
    }

}