.intro-section{
    display: flex;
}
.intro-section>div>p{
    width: 40vw;
    font-size: 3vw;
}
h1{
    color: var(--light-blue);
    font-size: 3vw;
    /* margin-bottom: 0px; */
    width: 40vw;
    height: auto;
 }
.intro-section>img{
    top: 20vh;
    right: 0vw;
    position:absolute;
    width: 45vw;
    height: auto;
    overflow: clip;
    z-index: -1;
}


.map-section{
    display: grid;
    grid-template-columns: 55% 45%;
}

.map>embed{
    height: 40vw;
    width: 40vw;
    border: 0px;
    border-radius: 4vh;
}
.header-paragraph{
    font-size: 3vw;
    color: var(--light-blue);
    text-align: right;
}

.blue-bg{
    position:absolute;
    width:100%;
    height:30vw;
    left:0vw;
    margin-top:10vh;
    background-color: var(--dark-blue);
    z-index: -1;
}
.map-info{
    margin-top:16vh;
}


.map-info>p{
    display:inline;
    text-align: right;
    font-size: 3vw;
}

.map-info>a{
    float:right;
    font-size: 3vw;
}
h2{
    font-size:4vw;
    color: var(--light-blue)
}
.instagram-section{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: max-content;
}

.instagram-images>img{
    height: auto;
    position: absolute;
}
.instagram-section>div>p{
    font-size: 2vw;
    width: 30vw;
}
.ig-phone{
    width: 10vw;
    transform:translate(0, 5vw);
    transition: 0.5s;
}
.ig-laptop{
    width: 40vw;
    transform:translate(0, 3vw);
    transition: 0.5s;
}

.instagram-images:hover>.ig-phone, .ig-phone:hover{
    transform: translate(-2vw, 5vw) scale(1.2);
    transition: 0.5s;
}

.instagram-images:hover>.ig-laptop, .ig-laptop:hover{
    transform: translate(4vw, 3vw) scale(1.2);
    transition: 0.5s;
}


/* .referral{
    display: none !important;
} */
.services-section{
    display: flex;
    padding: 0;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
}
.service-slide{
    position: relative;
    left: 5vw;
    display:flex;
    flex-direction:column;
    justify-content: space-around;
    width: 17vw;
    height:65vh;
    border-radius: 9vw;
    color: var(--black);
    background-color: var(--light-blue);
}

.service-slide>img{
    position:relative;
    top:0vh;
    left: -2vw;
    width:20vw;
    height: auto;
    overflow: visible;
    transition: 0.25s;
}

.service-slide>.splash-img{
    position: absolute;
    width: 20vw;
    top: 2vh;
    left: -2vw;
    animation: rotate 8s infinite;
    animation-timing-function: ease-in-out;
}

@keyframes rotate {
    0% {
      transform: rotate(-25deg)
    }
    50% {
      transform: rotate(25deg)
    }
    100% {
        transform: rotate(-25deg)
      }
}


.service-slide>img:hover{
    transform: scale(1.1) rotate(10deg);
    transition: 0.25s;
}
.service-slide>h3{
    padding: 0vw 1vw;
    /* margin-top:25vw; */
    font-size: 2vw;
    text-align: center;
}

.service-slide>a{
    margin: 0 2vw;
}


.services-slider{
    margin: 0vh 5vw;
    width: 90vw;
}


.slick-prev:before, .slick-next:before {
    color: var(--light-blue) !important;
}

.slick-disabled:before{
    color:var(--dark-blue)!important;
    opacity: 1 !important;
}


.about-us-section{
    display:grid;
    grid-template-columns: 50% 50%;
}

.about-us-info{
    text-align: right;
}

.about-us-info>p{
    width: 40vw;
    font-size: 2vw;
    float:right;
}

.about-us-section>img{
    position:relative;
    left:-20vw;
    top:20vh;
    width:70vw;
    height:auto;
}

.about-us-section>a{
    float:right;
}

@media (max-width:996px) {
    h1{
        font-size: 6vw;
        width: 80vw;
    }
    .intro-section>div>p{
        width: 80vw;
        font-size: 6vw;
    }
    .intro-section>img{
        top: 85vw;
        right: 0vw;
        position: absolute;
        height: 87vw;
        width: auto;
        overflow: clip;
    }

    .map-section{
        display: flex;
        flex-direction: column;
        /* height: 117vw; */
        height: max-content;
        margin-bottom: 15vw;   
    }
    
    .map>embed{
        height: 90vw;
        width: 90vw;
    }
    .blue-bg{
        width:100%;
        height:115vw;
        left:0;
        margin-top:10vh;
        background-color: var(--dark-blue);
        z-index: -1;
    }
    .map-info>p{
        text-align: right;
        font-size: 6vw;
    }
    .header-paragraph{
        font-size: 6vw;
    }
    .map-info{
        margin-top:0vh;
    }
    
    .map-info>a{
        float:right;
        font-size: 4vw;
    }
    .service-slide{
        position: relative;
    left: 10vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 50vw;
    height: 92vw;
    border-radius: 15vh;
    color: var(--black);
    background-color: var(--light-blue);
    }
    
    .service-slide>img{
        
        position:relative;
        top:0vh;
        left: -2vw;
        width:55vw;
        height: auto;
        overflow: visible;
    }
    
    .service-slide>h3{
        margin: 0;
        padding: 0vw 1vw;
        /* margin-top:25vw; */
        font-size: 6vw;
        text-align: center;
    }
    
    .service-slide>a{
        margin: 0 2vw;
    }
    
    
    
    .services-slider{
        margin: 0vh 40vw;
        width: 71vw;
    }
    .about-us-section{
        display:grid;
        grid-template-columns: 100%;
        height: 70vh;
        margin-bottom: 45vw;
    }
    
    .about-us-info{
        text-align: right;
    }
    
    .about-us-info>p{
        width: 80vw;
        font-size: 4vw;
        float:right;
    }
    
    .about-us-section>img{
        position: relative;
        left: -20vw;
        top: 5vh;
        width: 110vw;
        height: auto;
    }
    
    .about-us-section>a{
        float:right;
    }

    h2{
        font-size: 8vw;
    }

    .service-slide>.splash-img {
        position: absolute;
        width: 58vw;
        top: 1vh;
        left: -4vw;
        animation: rotate 8s infinite;
        animation-timing-function: ease-in-out;
    }
    .instagram-section{
        display: grid;
        grid-template-columns: 1fr;
        height: 130vw;
    }

    .instagram-images>img{
        height: auto;
        position: absolute;
    }
    .instagram-section>div>p{
        font-size: 4vw;
        width: 90vw;
    }
    .ig-phone{
        width: 23vw;
        transform: translate(8vw, -20vw);
        transition: 0.5s;
    }
    .ig-laptop{
        width: 70vw;
        transform: translate(14vw, -18vw);
        transition: 0.5s;
    }
    
    .instagram-images:hover>.ig-phone, .ig-phone:hover{
        transform: translate(1vw, -20vw) scale(1.2);
        transition: 0.5s;
    }
    
    .instagram-images:hover>.ig-laptop, .ig-laptop:hover{
        transform: translate(18vw, -18vw) scale(1.2);
        transition: 0.5s;
    }
}