@import '../_common'
@import '../../sass/events/events'
p
  text-align: justify 
.banner
  &.home-banner
    .bg
      .banner-wrapper
        .container-fluid
          padding: 0
          .flex
            .colA
              max-width: 100%
              width: 100%
              img
                width: 100%
                height: 100%

            
.contact-secA
    padding: 80px 0
    @include respond-to(screen-1280)
      padding: 40px 0

    .heading
        width: 100%
        margin: 0 auto
        text-align: center

        h2
            margin-bottom: 18px
        p

          text-align: center

    .contact-grid
        display: grid
        grid-template-columns: repeat(3 , 1fr)
        gap: 65px
        padding-top: 90px
        width: 90%
        margin: 0 auto
        @include respond-to(screen-1440)
          gap: 50px
          padding-top: 60px
        @include respond-to(screen-1280)
          gap: 35px
          width: 100%
        @include respond-to(screen-991)
          grid-template-columns: repeat(2 , 1fr)
        @include respond-to(screen-675)
          gap: 22px
          padding-top: 35px
        @include respond-to(screen-540)
          grid-template-columns: 1fr

        .card
            padding: 30px
            border-radius: 15px
            border: 1px solid rgba(68, 89, 197, 1)
            box-shadow: -8px 8px 0px 0px rgba(189, 200, 255, 1)
            transition: all 0.3s ease-in

            &:hover
              transform: scale(1.04)
              cursor: pointer
            .card-header
                display: flex
                justify-content: space-between
                margin-bottom: 20px
                @include respond-to(screen-768)
                  margin-bottom: 12px

                h4
                    color: var(--prime)
            
            .card-body
                .card-btn
                    margin-top: 35px
                    @include respond-to(screen-768)
                      margin-top: 15px

                    a
                        color: var(--prime)
                        font-weight: 500
                        
                        img
                            display: inline-block
                            margin-left: 12px
                a
                    color: var(--text)
                    display: block


.contact-form
    width: 100%
    padding: 70px 0 0 0
    @include respond-to(screen-540)
      padding: 40px 0 0 0
    .form-container
        .heading
            text-align: center
            @include respond-to(screen-768)
              width: 88%
              margin: 0 auto
            h4
                text-transform: none
                max-width: 30%
                margin: 0 auto 85px
                font-size: 36px
                line-height: 1.3
                @include respond-to(screen-1536)
                  max-width: 40%
                @include respond-to(screen-1280)
                  max-width: 50%
                @include respond-to(screen-991)
                  max-width: 40%
                  margin: 0 auto 45px
                  font-size: 26px
                @include respond-to(screen-768)
                  max-width: 60%
                @include respond-to(screen-540)
                  max-width: 80%
                @include respond-to(screen-420)
                  max-width: 100%
                  font-size: 20px
                

        .bg-image
          figure
            width: 100%
            margin: 0
            overflow: hidden
            position: relative
            height: 60vh
            @include respond-to(screen-540)
              height: 40vh 
        
            img
              width: 100%
              height: 100%
              object-fit: cover
              display: block


        .form-container
            width: 100%
            display: flex
            justify-content: center
            margin-top: -120px
            @include respond-to(screen-540)
              margin-top: -80px
              width: 95%
              margin: 0 auto
            .rotate-form
              form
                max-width: 600px
                width: 100%
                text-align: center
                padding: 0 78px 30px
                transform: translateY(-4rem)
                position: relative
                border-radius: 50px

                @include respond-to(screen-991)
                  padding: 0 22px 30px

                &::after
                  position: absolute
                  top: -40px
                  left: 0
                  width: 100%
                  height: 100%
                  background-color: #fff
                  content: ''
                  transform: rotate(6deg)
                  z-index: -1
                  border-radius: 50px
                  @include respond-to(screen-540)
                    top: 0
                    transform: rotate(0)
                    border-radius: 30px


                &::before
                  content: ""
                  max-width: 608px
                  height: 100%
                  background: #fff
                  position: absolute
                  top: -55px
                  left: -19px
                  rotate: 5deg
                  border-radius: 50px
                  z-index: -1
                  @include respond-to(screen-675)
                    max-width: 540px
                  @include respond-to(screen-540)
                    width: 0

                .title-image
                  margin-bottom: 30px
                  @include respond-to(screen-540)
                    margin-bottom: 0

                  img
                    width: 160px
                    @include respond-to(screen-540)
                      width: 110px


                .form-grid
                  display: grid
                  grid-template-columns: repeat(2, 1fr)
                  grid-column-gap: 30px
                  grid-row-gap: 20px

                  @include respond-to(screen-540)
                    grid-template-columns: 1fr 1fr

                  .form-group
                    position: relative

                    &:nth-child(5)
                      grid-column: span 2

                      @include respond-to(screen-540)
                        grid-column: span 2

                  .sbmt-grp
                    grid-column: span 2
                    text-align: center
                    margin-top: 20px

                    @include respond-to(screen-540)
                      grid-column: span 2

                    .theme-btn
                      @include hover
                      &::after
                        background-color: #4459C5
                        border-radius: 25px
                      &::before
                        border-radius: 25px
   
.map
  iframe
    width: 100%
    height: 750px
    filter: grayscale(100%)
    @include respond-to(screen-675)
       height: 450px