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

body{
    background: #eff4f5;
}

a {
    color: #4fb1e1;
}


.main_nav_menu_responsive{
    display: none;
}

.wrap_header_bottom_res{
    display: none;
}


:root{
  
    /** Colors **/
    --primary: #4fb1e1;
    --neutral-white: #FAFCFF;
    --neutral-black: #0C0C0D;

    
    /** Gradient **/
    --light-blue-grad: linear-gradient(#fff 0%,#d0e2ec 100%);
    --blue-grad: linear-gradient(#55b3e2 0%,#5fb8e4 1%,#5fb8e4 41%,#48a1cd 78%,#48a1cd 100%);


    /** Font **/
    --font-primary: "Asap Condensed", sans-serif;
    --font-d: "Open Sans", sans-serif;


    /** Font Size **/
    --text-size-a :18px;
    --text-size-b :22px;
    --text-size-c :24px;
    --text-size-d :26px;
    --text-size-e :38px;
    --text-size-f :32px;


    /* Font weight */
    --weight-bold: 700;
    --weight-semiBold: 600;
    --weight-regular: 400;


    /* Border Radius */
    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 16px;
    --radius-extra-large: 32px;
    --radius-full: 1000px;
    --radius-circle: 50%;


    /* Box Shadow */
    --shadow-1: 0px 2px 4px 0px #00000033;
    --shadow-2: 0px 5px 10px 0px #0000000D;
    --shadow-3: 0px 5px 10px 0px #00000033;
    --shadow-4: 0px 10px 20px 0px #0000001A;


    /* Transition */
    --transition-easing-quick: cubic-bezier(0, 0.7, 0.3, 1);
    --transition-duration-quick: 200ms;
    --transition-duration-smooth: 500ms;
}



/* Container */
.container{
    width: 100%;
    max-width: 74rem;
    margin: 0 auto;
}

.content-sec-wrapper{
    margin-top: 20px;
    background-color: var(--neutral-white);
    box-shadow: var(--shadow-3);
    font-family: var(--font-d);
}

.cont-sec-heading{
    background: #208fc6;
    padding: 10px;
    font-family: var(--font-primary);
    font-size: 28px;
    font-weight: bold;
    color: var(--neutral-white);
}

.cont-sec-content{
    padding: 30px 25px;
}



/* ------------------------------------------------------------------------------------------ Top Header */
.wrap_header_top{
    background: var(--light-blue-grad);
    border-top: 3px solid var(--primary);
    border-bottom: 1px solid var(--primary);
}

.nav_wrap{
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}



/* ------------------------------------- Top Left */
.header_top_left{
    font-family: var(--font-primary);
}

.header_top_left ul{
    list-style: none;
}

.header_top_left ul li{
    display: inline-block;
    position: relative;
    transition: var(--transition-duration-smooth);
}

.header_top_left ul li a{
    display: block;
    text-decoration: none;
    padding: 20px 20px;
    color: var(--neutral-black);
    font-weight: bold;
}

    .header_top_left ul li a:hover{
        background-color: var(--primary);
        color: var(--neutral-white);
    }

    .header_top_left ul li:hover .dropdown{
        display: block;
    }


.dropdown{
    width: 200px;
    background-color: var(--primary);
    position: absolute;
    z-index: 999;
    display: none;
}

.dropdown li{
    
    color: var(--neutral-white);
}

.dropdown li a{
    color: var(--neutral-white) !important;
}




/* ------------------------------------- Top Right */
.header_top_right{
    font-family: var(--font-d);
    font-size:var(--text-size-d);
    font-weight: var(--weight-semiBold);
}




/* ------------------------------------------------------------------------------------------ Bottom Header*/
.wrap_header_bottom{
    color: grey;
    padding: 20px 0;
}

.wrap_header_bottom h1{
    font-size: 36px;
}

.wrap_header_bottom p{
    font-family: var(--font-primary);
}



/* ------------------------------------------------------------------------------------------ Slideshow container */
.slideshow-container {
    max-width: 1184px;
    width: 100%;
    position: relative;
    margin: auto;   
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.feature-slider{
    display: flex;
    gap: 25px;
    font-family: var(--font-primary);
}

.feature-slider a{
    width: 100%;
}

.f-sec{
    width: 100%;
    background: var(--primary);
    height: 120px;
    display: flex;
    align-items: center;
    padding: 20px;
    color: var(--neutral-white);
    border-radius: 10px 10px 0px 0px;
}

.lr-cont{
    display: flex;
}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 2.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}




/* ------------------------------------------------------------------------------------------ Left Content */
.content-main{
    display: flex;
    gap: 20px;
    padding: 20px;
    margin-top: 20px;
    background-color: var(--neutral-white);
    box-shadow: var(--shadow-3);
    font-family: var(--font-d);
}

.content-left{
    width: 75%;
}

.left-top h1{
    font-family: var(--font-d);
    font-size: 36px;
}

.left-top-content{
    margin-top: 10px;
    display: flex;
    gap: 20px;
}

.left-sercice-inc{
    margin-bottom: 70px;
}

.left-sercice-inc p{
    margin-bottom: 10px;
}

.left-sercice-inc p i{
    font-size: 8px;
    margin-left: 40px;
    margin-right: 25px;
}

.left-images-main{
    display: flex;
    margin-bottom: 25px;
}

.img-a img{
    width: 220px;
}

.img-b{
    width: 220px;
}

.left-last-content p{
    margin-bottom: 25px;
    font-weight: bold;
}


/* ------------------------------------------------------------------------------------------ Right Content */
.content-right{
    width: 25%;
}

.right-content-sec{
    background: var(--blue-grad);
    color: var(--neutral-white);
}

.right-img img{
    width: 100%;
}

.right-cont{
    padding: 20px;
}

.right-cont h2{
    margin-bottom: 15px;
}

.right-cont p{
    margin-bottom: 25px;
}

.right-cont a{
    text-decoration: none;
    color: var(--neutral-white);
}


/* ------------------------------------------------------------------------------------------ Bottom Content Section */
.contact-main{
    margin: 40px 0px;
    font-family: var(--font-d);
}

.contact-wrapper{
    display: flex;
}

.contact-form-main{ 
    border-right: 1px solid grey;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    width: 50%;
    height: auto;
    overflow: hidden;
}

.contact-form-main h2{
    font-size: 28px;
    margin-bottom: 15px;
}

.form-field-main{
    display: flex;
    gap: 10px;
}

.form-field-left{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 50%;
}

.form-field-left input{
    height: 45px;
}

.form-field-right{
    width: 50%;
    height: auto;
    overflow: hidden;
}

.form-field-right textarea{
    width: 100%;
    height: 100%;
    padding: 10px;
}

.submit-btn{
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.submit-btn p{
    font-family: var(--font-primary);
    font-size: 14px;
}

.submit-btn button{
    width: 140px;
    height: 40px;
    background: var(--primary);
    color: var(--neutral-white);
    border: none;
}

.contact-location{
    height: 250px;
    width: 50%;
    padding-left:20px;
}

.contact-location h2{
    font-size: 16px;
    font-family: var(--font-primary);
    margin-bottom: 20px;
}

.contact-location i{
    margin-right: 10px;
}

.contact-location p{
    margin-bottom: 7px;
}


/* ------------------------------------------------------------------------------------------ Footer */
.footer-main{
    color: var(--neutral-white);
    background: #2c2c2c;
    font-family: var(--font-d);
    padding: 25px 0px;
    text-align: center;
}

.footer-main ul{
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
}

.footer-main ul li{
    list-style-type: none;
}

.footer-main ul li a{
    text-decoration: none;
    color: var(--neutral-white);
    font-family: var(--font-primary);
    font-weight: bold;
}







/* 480 width Screen ==========================================================================================================
============================================================================================================================= */
@media(max-width:480px){
    .main_nav_menu{
        display: none;
    }

    .wrap_header_bottom_res{
        display: block;
        padding: 20px;
    }

    .main_nav_menu_responsive{
        display: block;
        background: #252525;
        width: 100%;
        height: auto;
    }

    .res_menu{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        color: var(--neutral-white);
        font-family: var(--font-primary);
    }
        #res_men_btn{
            font-size: 28px;
            color: var(--neutral-white);
        }

    .dropdown_res{
        display: none;
    }

    .wrap_header_top_res{
        display: none;
    }
    
    
    .header_top_left_res{
        font-family: var(--font-primary);
    }

    .header_top_left_res ul{
        list-style-type: none;
    }

    .header_top_left_res ul li{
        background-color: #1b1b1b;
        padding: 10px;
        margin-top: 3px;
    }

    .header_top_left_res ul li a{
        color: var(--neutral-white);
        text-decoration: none;
    }



    /* ------------------------------------------------------------------------------------------ Slideshow container */

    /* Slider Image Width */
    .sld_img{
        width: 100%;
    }


    /* Next & previous buttons */
    .prev, .next {
        top: 15%;
    }

    .feature-slider{
        display: flex;
        flex-direction: column;
        padding: 20px;
        gap: 10px;
        font-family: var(--font-primary);
    }

    .feature-slider a{
        width: 100%;
    }


    /* ------------------------------------------------------------------------------------------ After Slider Left Content */
    .content-main{
        display: flex;
        flex-direction: column-reverse;
    }

    .content-left{
        width: 100%;
    }

    .left-top-content{
        display: flex;
        flex-direction: column-reverse;
    }

    /* ------------------------------------------------------------------------------------------ Right Content */
    .content-right{
        width: 100%;
    }


    /* ------------------------------------------------------------------------------------------ Bottom Form Content Section */
    .contact-wrapper{
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

    .contact-form-main{ 
        border-right: 1px solid grey;
        padding-right: 20px;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .contact-form-main h2{
        font-size: 24px;
    }

    .contact-location{
        padding-left:0px;
        padding-top: 20px;
    }

    .contact-location h2{
        font-size: 24px;
        font-family: var(--font-primary);
        margin-bottom: 20px;
    }


    /* ------------------------------------------------------------------------------------------ Footer */
    .footer-main{
        color: var(--neutral-white);
        background: #2c2c2c;
        font-family: var(--font-d);
        padding: 25px 10px;
        text-align: center;
    }

    .footer-main ul{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }
}




/* 768 width Screen ==========================================================================================================
============================================================================================================================= */
@media(max-width:768px){
    .main_nav_menu{
        display: none;
    }

    .wrap_header_bottom_res{
        display: block;
        padding: 20px;
    }

    .main_nav_menu_responsive{
        display: block;
        background: #252525;
        width: 100%;
        height: auto;
    }

    .res_menu{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        color: var(--neutral-white);
        font-family: var(--font-primary);
    }
        #res_men_btn{
            font-size: 28px;
            color: var(--neutral-white);
        }

    .dropdown_res{
        display: none;
    }

    .wrap_header_top_res{
        display: none;
    }
    
    
    .header_top_left_res{
        font-family: var(--font-primary);
    }

    .header_top_left_res ul{
        list-style-type: none;
    }

    .header_top_left_res ul li{
        background-color: #1b1b1b;
        padding: 10px;
        margin-top: 3px;
    }

    .header_top_left_res ul li a{
        color: var(--neutral-white);
        text-decoration: none;
    }



    /* ------------------------------------------------------------------------------------------ Slideshow container */

    /* Slider Image Width */
    .sld_img{
        width: 100%;
    }


    /* Next & previous buttons */
    .prev, .next {
        top: 15%;
    }

    .feature-slider{
        display: flex;
        flex-direction: column;
        padding: 20px;
        gap: 10px;
        font-family: var(--font-primary);
    }

    .feature-slider a{
        width: 100%;
    }


    /* ------------------------------------------------------------------------------------------ After Slider Left Content */
    .content-main{
        display: flex;
        flex-direction: column-reverse;
    }

    .content-left{
        width: 100%;
    }

    .left-top-content{
        display: flex;
        flex-direction: column-reverse;
    }

    /* ------------------------------------------------------------------------------------------ Right Content */
    .content-right{
        width: 100%;
    }


    /* ------------------------------------------------------------------------------------------ Bottom Form Content Section */
    .contact-wrapper{
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

    .contact-form-main{ 
        border-right: 1px solid grey;
        padding-right: 20px;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .contact-form-main h2{
        font-size: 24px;
    }

    .contact-location{
        padding-left:0px;
        padding-top: 20px;
    }

    .contact-location h2{
        font-size: 24px;
        font-family: var(--font-primary);
        margin-bottom: 20px;
    }


    /* ------------------------------------------------------------------------------------------ Footer */
    .footer-main{
        color: var(--neutral-white);
        background: #2c2c2c;
        font-family: var(--font-d);
        padding: 25px 10px;
        text-align: center;
    }

    .footer-main ul{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }
}