*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}





/* ------------------------------------------------------------------------------------------------------------ */

/* header start */

.header{

    padding: 0 4.8rem;

    height: 10rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: white;

}

.header .logo{

    height: 9.5rem;

    width: 15rem;

}

.navbar-list{

    display: flex;

    gap: 1.2rem;

    list-style: none;

}

.navbar-links:link,

.navbar-links:visited{

    display: inline-block;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 1.2rem;

    font-weight: 600;

    color: black;

    transition: all 0.3s;

}

.navbar-links:hover{

    color: #ff7003;

}

.moblic-navbar-btn{

    display: none;

    background: transparent;

    cursor: pointer;

}

.moblic-nav-icon{

    width: 3rem;

    height: 3rem;

    color: black;

}

.moblic-nav-icon[name="close-circle-outline"]{

    display: none;

}





@media (max-width:62rem){

    .moblic-navbar-btn{

        display: block;

        z-index: 999;

        border: 2px solid black;

        color: white;

    }

    .header .logo{

        width: 40%;

    }



    .navBar{

         display: none; 

        width: 100%;

        height: 200vh;

        background: rgb(129, 125, 125);

        position: absolute;

        top: 0;

        left: 0;

      

        display: flex;

        justify-content: center;

        align-items: center;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

    }

    .navbar-list{

        flex-direction: column;

        align-items: center;

    }

    .active .navBar{

        transform: translateX(0);

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        max-height: 300px; 

    }

    .active .moblic-navbar-btn 

    .moblic-nav-icon[name="close-circle-outline"]{

        display: block;

        border: none;

    }

    .active .moblic-navbar-btn 

    .moblic-nav-icon[name="menu"]{

        display: none;

    }

     .header .navBar .moblic-navbar-btn :checked ~ .moblic-nav-icon[name="menu"]{

        max-height: 240px;

    } 

}



@media (max-width:75rem){

    .moblic-navbar-btn{

        display: block;

        z-index: 999;

        border: 2px solid black;

        color: white;

    }

    .header .logo{

        width: 40%;

    }



    .navBar{

         display: none; 

        width: 100%;

        height: 200vh;

        background: rgb(129, 125, 125);

        position: absolute;

        top: 0;

        left: 0;

      

        display: flex;

        justify-content: center;

        align-items: center;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

    }

    .navbar-list{

        flex-direction: column;

        align-items: center;

    }

    .active .navBar{

        transform: translateX(0);

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        max-height: 300px; 

    }

    .active .moblic-navbar-btn 

    .moblic-nav-icon[name="close-circle-outline"]{

        display: block;

        border: none;

    }

    .active .moblic-navbar-btn 

    .moblic-nav-icon[name="menu"]{

        display: none;

    }

     .header .navBar .moblic-navbar-btn :checked ~ .moblic-nav-icon[name="menu"]{

        max-height: 240px;

    } 

}





@media (max-width: 35rem){

    .header{

        padding: 0 2.4rem;

    }



    .header .logo{

        width: 60%;

    }

} 



/* header ends with media query */



/* --------------------------- container top _lines------------------ */



.cont_lines{

	display: flex;

	justify-content: space-evenly;

	background-color: #216cf7;

	padding: 1%;

}

.cont_lines a{

	color: white;

	letter-spacing: 1px;

	text-decoration: none;

	font-weight: 600;

}

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px){

.cont_lines{

	display: block;

	text-align: left;

	/* justify-content: space-evenly; */

	background-color: #216cf7;

	padding: 1%;

}

.cont_lines a{

	color: white;

	letter-spacing: 1px;

	text-decoration: none;

	font-weight: 600;

}

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media(min-width: 600px) and (max-width: 768px){

	.cont_lines{

		display: block;

		justify-content: space-evenly;

		background-color: #216cf7;

		padding: 1%;

	}

	.cont_lines a{

		color: white;

		letter-spacing: 1px;

		text-decoration: none;

		font-weight: 600;

	}

}



/* Medium devices (landscape tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 992px){

	.cont_lines{

		display: flex;

		justify-content: space-evenly;

		background-color: #216cf7;

		padding: 1%;

	}

	.cont_lines a{

		color: white;

		letter-spacing: 1px;

		text-decoration: none;

		font-weight: 600;

	}

}



/* Large devices (laptops/desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1200px) {

	.cont_lines{

		display: flex;

		justify-content: space-evenly;

		background-color: #216cf7;

		padding: 1%;

	}

	.cont_lines a{

		color: white;

		letter-spacing: 1px;

		text-decoration: none;

		font-weight: 600;

	} 

}

/* --------------------------- container top _lines ENDS------------------ */



/* <!-- ------------------------ blocks under slider start ----------------------- --> */

.blocks-det{

    background-color: rgb(162, 161, 203);

    

    display: flex;

    justify-content:space-evenly;

    align-items: center;

    /* flex-direction: row-reverse; */

}

.block_first{

    background-color: #fff;

    text-align: center;

    width: 350px;

    padding: 2%;

    border-radius: 10%;

    border: 2px solid  #e65c21;

}

.block_first:hover{

    border-bottom: 5px solid #e65c21;

}

/* ---------------------------- */

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px){

    .blocks-det{

        background-color: rgb(163, 163, 163);

       display: block;

       margin-top: 0%;

    }

    .block_first{

        background-color: #fff;

        text-align: center;

        padding: 2%;

        margin-bottom: 2%;

        margin-top: 2%;

        border-radius: 10%;

width: fit-content;

        /* word-wrap: break-word; */

        border: 2px solid  #e65c21;

    }

    .block_first:hover{

        border-bottom: 5px solid #e65c21;

    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media(min-width: 600px) and (max-width: 768px){

    .blocks-det{

        background-color: rgb(163, 163, 163);

       display: block;

       margin-top: 0%;

    }

    .block_first{

        background-color: #fff;

        text-align: center;

        padding: 2%;

        margin-bottom: 2%;

        margin-top: 2%;

        border-radius: 10%;

width: fit-content;

        /* word-wrap: break-word; */

        border: 2px solid  #e65c21;

    }

    .block_first:hover{

        border-bottom: 5px solid #e65c21;

    }

}



/* Medium devices (landscape tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 992px){

    .blocks-det{

        background-color: rgb(163, 163, 163);

       display: flex;

       justify-content: space-between;

align-items: center;

       margin-top: 0%;

    }

    .block_first{

        background-color: #fff;

        text-align: center;

        padding: 2%;

        margin-bottom: 2%;

        margin-top: 2%;

        border-radius: 10%;

width: fit-content;

        /* word-wrap: break-word; */

        border: 2px solid  #e65c21;

    }

    .block_first:hover{

        border-bottom: 5px solid #e65c21;

    }

}



/* Large devices (laptops/desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1200px) {

    .blocks-det{

        background-color: rgb(163, 163, 163);

       display: flex;

       justify-content: space-between;

align-items: center;

       margin-top: 0%;

    }

    .block_first{

        background-color: #fff;

        text-align: center;

        padding: 2%;

        margin-bottom: 2%;

        margin-top: 2%;

        border-radius: 10%;

width: fit-content;

        /* word-wrap: break-word; */

        border: 2px solid  #e65c21;

    }

    .block_first:hover{

        border-bottom: 5px solid #e65c21;

    }

}

/* -------------------------------------------------------------------------------- */



/* ========================================================= ABOUT PAGE START ==================================================== */

.heading0{

    width: 90%;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    text-align: center;

    margin: 20px auto;

  }

  .heading0 #h1{

    font-size: 50px;

    color: #000;

    margin-bottom: 25px;

    position: relative;

  }

  .heading0 #h1::after{

    content: '';

    position: absolute;

    width: 100%;

    height: 4px;

    display: block;

    margin: 0 auto;

    background-color: #4caf50;

  }

  .pair_about{

    width: 90%;

    margin: 0 auto;

    padding: 10px 20px;

  }

  .about{

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

  }

  .about-image{

    flex: 1;

    margin-right: 20px;

    /* padding-left: 8%; */

    text-align: center;

    /* border: 1px solid black; */

    overflow: hidden;

  }

  .about-image img{

    /* border: 1px solid black; */

    max-width: 80%;

    height: auto;

    display: block;

    transition: 0.5s ease;

  }

  .about-image:hover img{

    transform: scale(1.1);

  }

  .about-content2{

    flex: 1;

  }

  .about-content2 p{

    font-size: 20px;

    line-height: 1.5;

    color: #666;

  }

  

  /* media query of about page start */

  @media screen and (max-width: 768px)  {

    .heading0{

      padding: 0px 20px;

    }

    .heading0 h1{

      font-size: 36px;

    }

    .pair_about{

      padding: 0px;

    }

    .about{

      padding: 20px;

      flex-direction: column;

    }

    .about-image{

      margin-right: 0px;

      margin-bottom: 20px;

    }

    .about-content2 p{

      padding: 0px;

      font-size: 16px;

    }

  }

  /*   media query of about page ends  */



  /* ------------------------------------------------------------------------------------------- */







/* -------------------------------------------- prog ------------------------------------------*/

.prog{

    display: flex;

    justify-content: center;

    align-items: center;

padding: 2%;

    background-color: #fce7e7;

}

.prog1{

    width: 50%;

}

.prog2{

    padding-left: 2%;

    width: 50%;

}

/* media query */

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px){

    .prog{

        display: block;

        width: fit-content;

        /* justify-content: center;

        align-items: center; */

    padding: 2%;

        background-color: #fce7e7;

    }

    .prog1{

        width: fit-content;

    }

    .prog2{

        padding-left: 2%;

        width: 100%;

    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media(min-width: 600px) and (max-width: 768px){

    .prog{

        display: block;

        /* justify-content: center; */

        /* align-items: center; */

    padding: 2%;

        background-color: #fce7e7;

        width: fit-content;

    }

    .prog1{

        width: fit-content;

    }

    .prog2{

        padding-left: 2%;

        width: 100%;

    }

}



/* Medium devices (landscape tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 992px){

    .prog{

        display: flex;

        justify-content: center;

        align-items: center;

    padding: 2%;

        background-color: #fce7e7;

    }

    .prog1{

        width: 50%;

    }

    .prog2{

        padding-left: 2%;

        width: 50%;

    }

}



/* Large devices (laptops/desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1200px) {

    .prog{

        display: flex;

        justify-content: center;

        align-items: center;

    padding: 2%;

        background-color: #fce7e7;

    }

    .prog1{

        width: 50%;

    }

    .prog2{

        padding-left: 2%;

        width: 50%;

    }

}

/* ------------------------------------------------------------------------ */



/* -------------------------- HEATLH CARE PHOTOS ---------------------------------- */

.health{

    /* border: #000 2px solid; */

    margin-top: 15px;

}

.health-lines{

    text-align: center;

    color: #000;

}

.health-lines:hover{

    color: cadetblue;

}

.health1{

    display: flex;

    justify-content: space-evenly;

    align-items: center;

}

.health1 img{

    width: 450px;

    height: 280px;

    border: #97b0df 2px solid;

    margin-bottom: 2%;

}

/* media query */

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px){

    .health1{

        display: block;

   width: fit-content;

   text-align: center;

    }

    .health1 img{

        border: #97b0df 2px solid;

        margin-bottom: 2%;

        text-align: center;

        width: 80%;

    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media(min-width: 600px) and (max-width: 768px){

    .health1{

        display: block;

   width: fit-content;

   text-align: center;

    }

    .health1 img{

        border: #97b0df 2px solid;

        margin-bottom: 2%;

        text-align: center;

        width: 80%;

    }

}



/* Medium devices (landscape tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 992px){

    .health1{

        display: block;

   width: fit-content;

   text-align: center;

    }

    .health1 img{

        border: #97b0df 2px solid;

        margin-bottom: 2%;

        text-align: center;

        width: 80%;   

}

}



/* Large devices (laptops/desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1200px) {

    .health{

        border: #000 2px solid;

    }

    .health-lines{

        text-align: center;

        color: #000;

    }

    .health-lines:hover{

        color: cadetblue;

    }

    .health1{

        display: flex;

        justify-content: space-evenly;

        align-items: center;

    }

    .health1 img{

        width: 320px;

        height: 280px;

        border: #97b0df 2px solid;

        margin-bottom: 2%;

    }

}

/* ------------------------------------------------------------------- */



/* --------------------------------- World Classs ------------------------------------------ */

.special{

    display: flex;

    justify-content: space-between;

    align-items: center;



    margin-top: 15px;
    margin-bottom: 20px;

}

.special1 img{

    /* border: 2px solid #000; */

    width: 80%;

}

/* media query */

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px){

    .special{

        display: block;

        text-align: center;

        /* justify-content: space-between;

        align-items: center;

     */

        margin-top: 12%;

    }

    .special1 img{

        width: 80%;

        /* border: 2px solid #000; */

    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media(min-width: 600px) and (max-width: 768px){

    .special{

        display: block;

        justify-content: space-between;

        /* align-items: center; */

    text-align: center;

        margin-top: 12%;

    }

    .special1 img{

        /* border: 2px solid #000; */

        width: 80%;

    }

}



/* Medium devices (landscape tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 992px){

    .special{

        display: flex;

        justify-content: space-between;

        align-items: center;

    

        margin-top: 12%;

    }

    .special1 img{

        /* border: 2px solid #000; */

        width: 80%;

    }

}



/* Large devices (laptops/desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1200px) {

    .special{

        display: flex;

        justify-content: space-between;

        align-items: center;

    

        margin-top: 12%;

    }

    .special1 img{

        /* border: 2px solid #000; */

        width: 80%;

    } 

}

/* ------------------------------------------------------------------------------------------------------ */



/* ====================================================================================================== */



/* -------------------------------------- GALLERY PAGE STARTS ----------------------------------------------- */

.gallery{

    width: 100%;

    padding: 30px 8%;

    /* background-color: var(--body-clr); */

}

.gallery .gallery_head{

    max-width: 750px;

    margin: 0px auto 25px;

    text-align: center;

}

.gallery_head h1{

    position: relative;

    font-size: 32px;

    margin: 10px 0px 30px;

    color:#8ee5c2;

}

.button_group{

    text-align: center;

    margin-bottom: 40px;

}

.button_group .buttonGallery{

    display: inline-block;

    padding: 10px 20px;

    margin: 5px;

    background-color: #c8d1d8;

    color: #000;

    font-size: 16px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all 0.4s;

    border: none;

    border-radius: 5px;

    outline: none;

    cursor: pointer;

}

.button_group .buttonGallery.active{

    background-color: #01266a;

    color: #fff;

}

.button_group .buttonGallery:hover{

    background-color: #01266a;

    color: #fff;

}

div.gallerySection{

    width: 100%;

    display: flex;

    flex-wrap: wrap;

}

div.gallerySection .item{

    position: relative;

    margin: 4px;

    width: calc(33.33% - 8px);

    overflow: hidden;

    cursor: pointer;

}

.item img{

    width: 346px;

    height: 284px;

    object-fit: cover;

    transition: 0.3s;

}



div.gallerySection .item:hover img{

    transform: scale(1.15);

}

.item .overlay{

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: rgba(5, 85, 92, 0.7);

    color: #fff;

    padding: 15px;

    overflow: hidden;

    transition: opacity 0.2s ease-in-out;

    opacity: 0;

}

.item:hover .overlay{

    opacity: 1;

}

.item .overlay a{

display: inline-block;

padding: 8px 16px;

border: 2px solid #fff;

color: #fff;

text-decoration: none;

font-size: 14px;

transition: 0.3s;

}

.item .overlay a:hover{

    background-color: rgb(242, 182, 105);

    color: #666;

}



@media (max-width: 1024px) {

    div.gallerySection .item{

        width: calc(50% - 8px);

    } 

}



@media (max-width: 600px) {

    div.gallerySection .item{

        width: 100%;

        margin: 4px 0px;

    }

}

/* -------------------------------------------------------------------------------------- */



/* ==============================footer starts ==========================*/

.footer{



    display: flex;

    justify-content: space-around;

    padding-top: 2%;

	padding-bottom: 2%;

	background-color: rgb(235, 235, 235);

}



.footer-logo p{

   width:400px;

   font-weight: 700;

   font-size: 3vh;

}

.footer h4{

    color: rgb(87, 87, 255);

}

.footer .footer_ul{

    list-style: none;

    text-align: left;

}

.footer a{

    color: rgb(128, 128, 255);

	font-size: 2.5vh;

    text-decoration: none;

    text-align: left;

}

.footer .footer-para{

    color: BLACK;

    font-weight: 600;

}

/* ===================== footer ends ============================= */



/* ============================ socail-icons ==================== */

.socail-icons{

    /* background-color: rgb(26, 103, 103); */

    text-align: right;

    padding-top: 1%;

    padding-bottom: 1%;

    padding-right: 2%;

    /* color: white; */

    font-size: 150%;

    column-gap: 5%;

}

/* ========================== socail-icons ENDS ================ */



/* ========================= coyright ===================== */



.coyright{

    padding-bottom: 1%;

    padding-top: 1%;

    background-color: rgb(101, 131, 131);

    display: flex;

    justify-content: space-evenly;

}

.coyright p{

    color: white;

    font-size: 120%;

    /* padding: 1%; */

}

.coyright a{

    color: rgb(5, 231, 5);

    font-size: 120%;

    text-decoration: none;

    /* padding: 2%; */

}

/* ========================== coyright ends ===================== */

/* ============================================================================== */

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px){

	/*  FOOTER  */

.footer{

    /* margin: 2%; */

    /* background-color: rgb(53, 68, 68); */

    display: block;

    justify-content: space-around;

    padding: 5%;

}

.footer-logo p{

    width: fit-content;

font-size: 2vh;

 }

/* FOOTER END */





/* ============================ socail-icons ==================== */

.socail-icons{

    /* background-color: rgb(26, 103, 103); */

    text-align: left;

    padding-top: 1%;

    padding-bottom: 1%;

    padding-right: 2%;

    /* color: white; */

    font-size: 150%;

    column-gap: 5%;

}

/* ========================== socail-icons ENDS ================ */





/* ========================= coyright ===================== */



.coyright{

    padding-bottom: 1%;

    padding-top: 1%;

    /* background-color: darkslategray; */

    display: block;

    justify-content: space-evenly;

}



/* ========================== coyright ends ===================== */

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media(min-width: 600px) and (max-width: 768px){

	/*  FOOTER  */

.footer{

    /* margin: 2%; */

    /* background-color: rgb(53, 68, 68); */

    display: block;

    justify-content: space-around;

    padding: 5%;

}





/* FOOTER END */



/* ============================ socail-icons ==================== */

.socail-icons{

    /* background-color: rgb(26, 103, 103); */

    text-align: left;

    padding-top: 1%;

    padding-bottom: 1%;

    padding-right: 2%;

    /* color: white; */

    font-size: 150%;

    column-gap: 5%;

}

/* ========================== socail-icons ENDS ================ */





/* ========================= coyright ===================== */



.coyright{

    padding-bottom: 1%;

    padding-top: 1%;

    /* background-color: darkslategray; */

    display: block;

    justify-content: space-evenly;

}



/* ========================== coyright ends ===================== */

}



/* Medium devices (landscape tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 992px){

	/*  FOOTER  */

.footer{

    /* margin: 2%; */

    /* background-color: rgb(53, 68, 68); */

    display: block;

    justify-content: space-around;

    padding: 5%;

}

/* FOOTER END */



/* ============================ socail-icons ==================== */

.socail-icons{

    /* background-color: rgb(26, 103, 103); */

    text-align: left;

    padding-top: 1%;

    padding-bottom: 1%;

    padding-right: 2%;

    /* color: white; */

    font-size: 150%;

    column-gap: 5%;

}

/* ========================== socail-icons ENDS ================ */



/* ========================= coyright ===================== */



.coyright{

    padding-bottom: 1%;

    padding-top: 1%;

    /* background-color: darkslategray; */

    display: block;

    justify-content: space-evenly;

}

/* ========================== coyright ends ===================== */

}



/* Large devices (laptops/desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1200px) {

	/*  FOOTER  */

.footer{

    /* margin: 2%; */

    /* background-color: rgb(53, 68, 68); */

    display: flex;

    justify-content: space-around;

    padding: 5%;

}



/* FOOTER END */





/* ========================= coyright ===================== */



.coyright{

    padding-bottom: 1%;

    padding-top: 1%;

    /* background-color: rgb(55, 128, 128); */

    display: flex;

    justify-content: center;

}



/* ========================== coyright ends ===================== */

}

/*---------------------------------------------------------------------------------------------------------*/



/* ---------------------------------------- CONTACT US PAGE START ---------------------------------------------- */

.banner_contact{

    background-image: url(../images/homepage/dr2.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

}

.banner_contact h1{

    padding: 10%;

    text-align: center;

    font-size: 40px;

    color: rgb(240, 242, 246);

    font-weight: 700;

}



.contactpage{

    display: flex;

    justify-content: space-evenly;

    align-items: center;

    border: #000 solid 2px;

background-color: #000;

}

.contactpage .contact-matt{

    border: #000 solid 2px;

    margin-top: 2%;

    margin-bottom: 2%;

    color: #fff;

    padding: 2%;

    /* border-radius: 15%; */

}

.contactpage .contact-matt a{

    text-decoration: none;

}

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px){

    .contactpage{

        display: block;

        text-align: left;

        

        border: #000 solid 2px;

    background-color: #000;

    }

    .contactpage .contact-matt{

        border: #000 solid 2px;

        margin-top: 2%;

        margin-bottom: 2%;

        color: #fff;

        padding: 2%;

        /* border-radius: 15%; */

    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media(min-width: 600px) and (max-width: 768px){

    .contactpage{

        display: block;

        text-align: left;

        

        border: #000 solid 2px;

    background-color: #000;

    }

    .contactpage .contact-matt{

        border: #000 solid 2px;

        margin-top: 2%;

        margin-bottom: 2%;

        color: #fff;

        padding: 2%;

        /* border-radius: 15%; */

    }

}



/* Medium devices (landscape tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 992px){

    .contactpage{

        display: flex;

        justify-content: space-evenly;

align-items: center;

        /* text-align: left; */

        

        border: #000 solid 2px;

    background-color: #000;

    }

    .contactpage .contact-matt{

        border: #000 solid 2px;

        margin-top: 2%;

        margin-bottom: 2%;

        color: #fff;

        padding: 2%;

        /* border-radius: 15%; */

    }

}



/* Large devices (laptops/desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1200px) {

    .contactpage{

        display: flex;

        justify-content: space-evenly;

align-items: center;

        /* text-align: left; */

        

        border: #000 solid 2px;

    background-color: #000;

    }

    .contactpage .contact-matt{

        border: #000 solid 2px;

        margin-top: 2%;

        margin-bottom: 2%;

        color: #fff;

        padding: 2%;

        /* border-radius: 15%; */

    }

}

/* ---------------------------------------------------------------------- */



/* ------------------------------------------- CONTACT FORM ----------------------------------------- */

.container_contact{

    width: 100%;

    height: fit-content;

    background-color: #c8d1d8;

    display: flex;

    align-items: center;

    justify-content: center;

}

form{

    background-color: #fff;

    display: flex;

    flex-direction: column;

    padding: 4vw 6vw;

    width: 90%;

    border-radius: 10px;

}

form h3{

    color: #555;

    font-weight: 900;

    margin-bottom: 20px;

}



form input,form textarea{

border: 0;

margin: 10px 0;

padding: 20px;

outline: none;

background-color: #f5f5f5;

font-size: 16px;

}

form button{

    padding: 15px;

    background-color: #6d7f9f;

    color: #fff;

    font-size: 18px;

    border: 0;

    outline: none;

    cursor: pointer;

    width: 150px;

    margin: 20px auto 0;

    border-radius: 30px;

}

/* -------------------------------- */

.contact_Map{

  height: fit-content;

}

/* ------------------------------------------------------------------------------------------------------------------------- */



/* -------------------------------------------- SERVICES PAGE START ---------------------------------------------------------- */

.backPhoto{

    background-image: url(../images/servicespage/dr3.jpg);

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: scroll;

background-color: #000;

    display: flex;

    justify-content: center;

    align-items: center;



    padding: 18%;

    border: #000 solid 2px;

   border-radius: 20px;

}



.backPhoto h1{

    font-size: 30px;

    color: #Fff;

}

@media only screen and (max-width: 600px){

    .backPhoto{

padding: 16%;

 }

    

    .backPhoto h1{

        font-size: 20px;

        color: #Fff;

    }

}

/* ----------------------------------------------------------------------------------- */

.services_lines{

    background-color: #c4f1f1;

    /* border: 2px solid black; */



    display: flex;

    justify-content: space-between;

    align-items: center;

   

}

.services_lines .lin_serv{

    padding: 2%;

    /* margin: 2%; */

    /* border: 2px solid black; */

    text-align: left;

}

/* media query */

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px){

    .services_lines{

        background-color: #c4f1f1;

        /* border: 2px solid black; */

    

        display: block;

        /* justify-content: space-between;

        align-items: center; */

        text-align: center;

        width: fit-content;

       

    }

    .services_lines .lin_serv{

        padding: 2%;

        /* margin: 2%; */

        /* border: 2px solid black; */

        text-align: left;

    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media(min-width: 600px) and (max-width: 768px){

    .services_lines{

        background-color: #c4f1f1;

        /* border: 2px solid black; */

    text-align: center;

    width: fit-content;

        display: block;

        /* justify-content: space-between;

        align-items: center; */

       

    }

    .services_lines .lin_serv{

        padding: 2%;

        /* margin: 2%; */

        /* border: 2px solid black; */

        text-align: left;

    }

}



/* Medium devices (landscape tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 992px){

    .services_lines{

        background-color: #c4f1f1;

        /* border: 2px solid black; */

    

        display: flex;

        justify-content: space-between;

        align-items: center;

       

    }

    .services_lines .lin_serv{

        padding: 2%;

        /* margin: 2%; */

        /* border: 2px solid black; */

        text-align: left;

    }

}



/* Large devices (laptops/desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1200px) {

    .services_lines{

        background-color: #c4f1f1;

        /* border: 2px solid black; */

    

        display: flex;

        justify-content: space-between;

        align-items: center;

       

    }

    .services_lines .lin_serv{

        padding: 2%;

        /* margin: 2%; */

        /* border: 2px solid black; */

        text-align: left;

    }

}

.DET{

    text-align: center;

    margin-top: 2%;

    margin-bottom: 2%;

    /* display: inline-block; */

}

.DET h2{

    display: inline;

border-bottom: #97b0df 5px solid;

border-radius: 8%;

}



/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px){

    .DET h2{

        display: inline;

    border-bottom: #97b0df 5px solid;

    border-radius: 8%;

    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media(min-width: 600px) and (max-width: 768px){

    .DET h2{

        display: inline;

    border-bottom: #97b0df 5px solid;

    border-radius: 8%;

    }

}



/* Medium devices (landscape tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 992px){

    .DET h2{

        display: inline;

    border-bottom: #97b0df 5px solid;

    border-radius: 8%;

    }

}



/* Large devices (laptops/desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1200px) {

    .DET h2{

        display: inline;

    border-bottom: #97b0df 5px solid;

    border-radius: 8%;

    }

}