@import url('https://fonts.googleapis.com/css2?family=Mali&display=swap');

/* Applying the font to the body and ensuring it covers all basic elements */


body {
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    margin-bottom: 0px;
     background-color: #5fbccb;
      font-family: 'Mali', cursive;

        
}
body, h1, h2, h3, h4, h5, h6, p, li, a { /* Add other tags as necessary */
    font-family: 'Mali', cursive;
}

.aligncenter{
		 text-align: center;
	 }

.pad0{
		 padding: 0px !important;
	 }
@media (min-width: 1400px) and (max-width: 4000px) {
    
    .pad10{
		 padding: 10px;
	 }
	 .certi{
	     margin-top: 30px; 
	     display: flex; 
	     gap: 23px;
	 }
	 .certi1{
	    padding: 10px; 
	    margin: -20px;
	 }
	 
	 .cont-video img{
	     height:320px;
	 }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .pad10{
		 padding: 10px;
	 }
	 .certi{
	     display: flex; 
	 }
	 
	 .certi1{
	    padding: 10px; 
	    margin: -20px;
	    
	 }
	 
	 .cont-video img{
	     height:320px;
	 }
	 
}


@media (min-width: 768px) and (max-width: 1199px) {
    .pad10{
		 padding: 10px;
	 }
    .cont-video img{
        height:255px;
        margin-top: 0px;
    }
	 .certi{
	     display: flex; 
	 }
	 
	 .certi1{
	    padding: 10px; 
	    margin: 0px;
	 }
	 
	 .cont-video{
        margin-top: 20px !important;
    }
}

@media (max-width: 768px) {
    
}

@media (max-width: 768px) {
    body {
        font-family: 'Mali', cursive; /* Specific font for mobile devices */
    }
    
    p{
        
        font-family: 'Mali', cursive; 
        
    }
    
    h1{
        font-family: 'Mali', cursive; 
    }
    
    h2{
        font-family: 'Mali', cursive; 
    }
}
@media (max-width: 768px) {
  }


h1 {
    font-family: 'Mali', cursive;
}

h2 {
    font-family: 'Mali', cursive;
}

h3 {
    font-family: 'Mali', cursive;
}

h4 {
    font-family: 'Mali', cursive;
}

h5 {
    font-family: 'Mali', cursive;
}

h6 {
    font-family: 'Mali', cursive;
}

p {
    font-family: 'Mali', cursive;
}

a {
    font-family: 'Mali', cursive;
    text-decoration: none !important;
}


div {
    font-family: 'Mali', cursive;
}

ul,
li {
    margin: 0;
    padding: 0;
}
/*-------------------------header-----------------------------/*/
.header {
    margin-top: 0px;
}


.anniversary-strip {
    width: 100%;
    height:auto;
}

@media (max-width: 768px) {
    .anniversary-strip{
      display: none;
    }
    .cycle {
    position: absolute;
    right: 15px !important;
    top: 540px !important;
}
.cycle img {
    width: 100px !important;
    height: 100px !important;
}
.cat {
    position: absolute;
    width: 130px !important;
    top: 50px !important;
    left: 60px !important;
}
.review-animation {
    position: absolute;
    bottom: -70px !important;
    right: 40px !important;
    animation: myMoveAnimation 4s linear infinite !important;
}
.review-animation img {
    width: 200px !important;
}

}

.anniversary-strip p {
    font-size: 28px;
    color: #000;
    font-weight: 600;
}

.marquee {
    white-space: nowrap; 
    animation: marquee 50s linear infinite; 
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%); 
    }
}

/*------------------header/-------------------------------------------*/.left-section 

.left-section a {
    color: #00CFB8;
}

.left-section a:hover {
    color: #ea3524;
}

.left-section h4 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #7B3F00;
}

.left-section p {
    font-size: 20px;
    color: #7B3F00;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1px;
}

.left-section p a {
    color: #7B3F00;
    font-size: 22px;
}


.mid-section {
    text-align: center;
}

.mid-section img {
    width: 80%;
    height: auto;
}




.left-section {
    margin-left: 50px;
    display: inline-flex;
    flex-direction: column;
    margin-top: 15px;
    text-align: left;

}


/*right-section*/
.right-section {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 22px;
    text-align: center;
    margin-left: 70px;
}

.right-section a {
    margin: 5px 0;
    text-decoration: none;
    font-weight: 700;
}

a {
    color: #43b09e;
    text-decoration: underline;
}

.right-section a {
    margin: 5px 0;
    text-decoration: none;
}

.red {
    color: red;
}

.green {
    color: #00FF05;
}

.blue {
    color: #0000FF;
}

.right-section h4 {
    font-weight: 600;
    font-size: 22px;
}

.right-section a {
    font-weight: ;
    font-size: 22px;
    color: #7B3F00;
    margin: 5px 0;
    text-decoration: none;
}

.right-section a:hover {
    color: #C80000;
}

a.header-btn {
    color: #fff;
    text-decoration: none;
    background-color: #ea3524;
    font-size: 20px;
    border: 0;
    border-radius: 6px;
    padding: 10px 20px;
    box-shadow: 3px 3px 20px 0px #33333324;
    transition: all 0.3s ease;
}

.header-btn:hover {
    background: #fff;
    color: #333;
}




/*menu-css*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

.toggle,
[id^=drop] {
    display: none;
}

/* Giving a background-color to the nav container. */
/*nav {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    background-color: #00cfb8;*/
/*    text-align: center;*/
/*    justify-content: center;*/
/*    display: flex;*/
/*    margin-top: 0px;*/
/*}*/

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

/*nav:after {*/
/*    content: "";*/
/*    display: table;*/
/*    clear: both;*/
/*}*/

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
/*nav ul {*/
/*    padding: 0;*/
/*    margin: 0;*/
/*    list-style: none;*/
/*    position: relative;*/
/*    z-index: 999;*/
/*}*/

/* Positioning the navigation items inline */
/*nav ul li {*/
/*    margin: 0px;*/
/*    display: inline-block;*/
/*    float: left;*/
/*    margin-top: -20px;*/
/*}*/

/* Styling the links */
/*nav a {*/
/*    display: block;*/
/*    padding: 14px 20px;*/
/*    color: #FFF;*/
/*    font-size: 18px;*/
/*    text-decoration: none;*/
/*    line-height: 1.4rem;*/
/*}*/

/* Background color change on Hover */
/*nav a:hover {*/
   
/*    color: #fff;*/
/*}*/

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
/*nav ul ul {*/
/*    display: none;*/
/*    position: absolute;*/
/*    top: 53px;*/
/*    left: 60px;*/
/*    background: #00CFB8;*/
/*    box-shadow: 3px 3px 20px 0px #33333324;*/
/*    border-radius: 10px;*/
/*}*/

/* Display Dropdowns on Hover */
/*nav ul li:hover>ul {*/
/*    display: inherit;*/
/*}*/

/* Fisrt Tier Dropdown */
/*nav ul ul li {*/
/*    width: 250px;*/
/*    float: none;*/
/*    display: list-item;*/
/*    left: -5px;*/
/*    position: relative;*/
/*    text-align: left;*/
/*    font-weight: 600;*/
/*    line-height: 15px;*/
/*}*/

/*nav ul ul li :hover {*/
/*    margin-left: 15px;*/
/*    transition: 0.5s;*/
/*}*/

/* Change ' +' in order to change the Dropdown symbol */
/*nav li>a:after {*/
/*    content: ' +';*/
/*}*/

/*nav li>a:only-child:after {*/
/*    content: '';*/
/*}*/

/* Media Queries
--------------------------------------------- */

/*@media all and (max-width : 768px) {*/

/*    nav {*/
/*        margin: 0;*/
/*    }*/

    /* Hide the navigation menu by default */
    /* Also hide the  */
/*    .toggle+a,*/
/*    .menu {*/
/*        display: none;*/
/*    }*/

    /* Stylinf the toggle lable */
/*    .toggle {*/
/*        display: block;*/
/*        background-color: #254441;*/
/*        padding: 14px 20px;*/
/*        color: #FFF;*/
/*        font-size: 17px;*/
/*        text-decoration: none;*/
/*        border: none;*/
/*    }*/

/*    .toggle:hover {*/
/*        background-color: #000000;*/
/*    }*/

    /* Display Dropdown when clicked on Parent Lable */
/*    [id^=drop]:checked+ul {*/
/*        display: block;*/
/*    }*/

    /* Change menu item's width to 100% */
/*    nav ul li {*/
/*        display: block;*/
/*        width: 100%;*/

/*    }*/

/*    nav ul ul .toggle,*/
/*    nav ul ul a {*/
/*        padding: 0 40px;*/
/*    }*/

/*    nav ul ul ul a {*/
/*        padding: 0 80px;*/
/*        color: #fff;*/
/*    }*/

/*    nav a:hover,*/
/*    nav ul ul ul a {*/
/*        background-color: #000000;*/
/*        color: #00CFB8;*/
/*    }*/

/*    nav ul li ul li .toggle,*/
/*    nav ul ul a,*/
/*    nav ul ul ul a {*/
/*        padding: 14px 20px;*/
/*        color: #FFF;*/
/*        font-size: 17px;*/
/*    }*/


/*    nav ul li ul li .toggle,*/
/*    nav ul ul a {*/
/*        background-color: #212121;*/
/*    }*/

    /* Hide Dropdowns by Default */
/*    nav ul ul {*/
/*        float: none;*/
/*        position: static;*/
/*        color: #ffffff;*/
        /* has to be the same number as the "line-height" of "nav a" */
/*    }*/

    /* Hide menus on hover */
/*    nav ul ul li:hover>ul,*/
/*    nav ul li:hover>ul {*/
/*        display: none;*/
/*    }*/

    /* Fisrt Tier Dropdown */
/*    nav ul ul li {*/
/*        display: block;*/
/*        width: 100%;*/
/*    }*/

/*    nav ul ul ul li {*/
/*        position: static;*/
        /* has to be the same number as the "width" of "nav ul ul li" */

/*    }*/

/*}*/

/*@media all and (max-width : 330px) {*/
/*    nav ul li {*/
/*        display: block;*/
/*        width: 94%;*/
/*    }*/
/*}*/




.item {
    margin-top: 35px;
}

.main-items {
    background-color: #5fbccb;
     background-repeat: no-repeat;
    background-size: cover;
    /*background-attachment: fixed;*/
    overflow: hidden;
}

.item-heading {
    text-align: center;
    position: relative;
   
}

.item-heading h1 {
    font-size: 36px;
    color: #fff;
    font-family: 'Mali', cursive;
    font-weight: 700;
    letter-spacing: 2px;
}

.item-heading h3 {
    color: #FFFA6B;
    font-size: 26px;
    position: relative;
    font-weight: 600;
    padding-bottom: 30px;
    margin-top:20px;
    letter-spacing: 1px;
    margin-top: 20px;
}

.item-heading h3:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 12%;
    background: #ea3524;
}

.content {
    overflow: hidden;
    border-radius: 20px;
}

.item .item-content {
    padding: 11px;
    color: #ffffff;
    position: relative;
    height: 240px;
    background-color: #1c1c1c73;
}


.item .item-section{
 width:100%;
overflow: hidden;}

.item .item-section img{
    width: 100% !important;
}

.item-content h5 {
    font-weight: 500;
    margin: 0;
    text-align: center;
    color: #fff;
}

.item-contentt p {
    font-size: 16px;
    line-height: 1.75;
}

.item-content a {
    display: block;
    font-size: 16px;
    text-align: right;
    bottom: 5px;
    text-decoration: none;
    margin: 7px;
    right: 22px;
    font-weight: 500;
    color: #FFFA6B;
}

.item-content a:hover {
    color: #43B0AA;
}

.cont-heading {
    text-align: center;
    /*margin-top: 80px;*/
}

.cont-heading h2 {
    color: #fdfdfd;
    font-size: 28px;
    position: relative;
    font-weight: 600;
}

.cont-heading h2:after {
    content: '';
    position: absolute;
    bottom: -2pc;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 12%;
    background: #ea3524;
}

.cont-heading p {
    text-align: left;
    font-size: 20px;
    line-height: 1.75;
    font-weight: 700;
    color:#7B3F00;
}

.cont-heading p a {
    color: #EA3524;
}

.cont-heading img {
    width: 100%;
    height: 100%;
}

.cont-title {
    margin-top: 30px;
}

.cont-title h3 {
    font-size: 1.60em;
    line-height: 1.1;
    font-weight: 600;
    color: #000;
}

.cont-title h3 a {
    color: red;

}

.cont-video {
    text-align: center;
    position: relative;
    margin-top: 40px;
}

.cont-video img {
    width: 100%;
}

.cont-video-two {
    position: relative;
    margin-top: 70px;
    overflow: hidden;
    border-radius: 10px;
}

.cont-cert {
    text-align: center;
    position: relative;
    margin-top: 30px;
    margin-bottom: 40px;
}

.cont-cert img {
    width: 100%;
}

.approach-section {
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /*overflow: hidden;*/
   
}

.approach-title {
    text-align: center;
    margin: 0 0 4pc 0;
    margin-top: 80px;
}

.approach-title h2 {
    color: #f11212;
    color: #7B3F00;
    font-size: 28px;
    position: relative;
    font-weight: 700;
    
}

.approach-title h2:after {
    content: '';
    position: absolute;
    bottom: -2pc;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 12%;
    background: #7b3f00;
}

.approach-title-p p {
    font-size: 22px;
    line-height: 1.75;
    font-weight: 700;
    color: #7B3F00;
    margin-bottom: 80px;
}

.review-section {
    background-color: #3EDAC9;
    padding-bottom: 10px;
    margin-top: -280px;
     background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}

.review-title {
    text-align: center;
    margin-top: 145PX;
}

.review-title h2 {
    color: #FFFA6B;
    font-size: 28px;
    position: relative;
    font-weight: 600;
}

.review-title h2:after {
    content: '';
    position: absolute;
    bottom: -20pX;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 12%;
    background: #ea3524;
}

.review-item {
    margin-top: 70px;
    box-shadow: 1px 1px 20px #3332;
    margin: 2em 0;
    border-radius: 20px;
    border: none;
    background: #fff;
    text-align: center;
    padding-bottom: 50px;
}

.google-review {
    margin-top: 50px;
    box-shadow: 1px 1px 20px #3332;
    margin: 2em 10px;
    border-radius: 20px;
    border: none;
    background: #fff;
    position: relative;
    text-align: center;
}

.google-review img {
    width: 30px;
    position: absolute;
    display: inline-block;
    z-index: 50;
    box-shadow: none !important;
    margin: auto;
    left: 10px;
    top: 10px;
}

.google-review i {
    color: #FFC107;
}

.google-p-1 {
    line-height: 0px;
    font-size: 18px;
    padding: 20px 0px 0 0px;

}

.paragrap-google {
    padding: 50px 0px 80px 0px !important;
}

.google-p-2 {
    color: #6F6969;
    font-size: 18px;
    padding: 50px 0px 50px 0px;
    margin-left: 30px;
    margin-right: 30px;
}

.payment{
    position: relative;
     background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}

.pay-title {
    text-align: center;
    margin-top: 80px;
}

.pay-title h2 {
    color: #FFFA6B;
    font-size: 28px;
    position: relative;
    font-weight: 600;
    margin-bottom: 60px;
}

.pay-title h2:after {
    content: '';
    position: absolute;
    bottom: -2pc;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 12%;
    background: #ea3524;
}

.pay-title p {
    font-size: 20px;
    color: #fff;
    text-align: justify;
    line-height: 1.75;
    font-weight: 400;
}



.pay-img img {
    width: 50%;
    margin: 20px auto;
    display: block;
    border-radius: 8px;
}



/*event-css*/
.event-head {
    background: #5fbccb;
}

.overview {
    background: #fff;
}

.birthday-wrap {
    width: 100%;
    height: auto;
    display: flex;
    overflow: hidden;
/*    background-color: #00CFB8;*/
    position: relative;
}

.kid-img {
    margin: 0px 0px 0 0;
}

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

/*.point {*/
/*    background-color: #fff;*/
/*}*/

.free {
    background: #fff;
    margin: 0px 0px;
    position: relative;
}

.free span {
    /*color: #00cfb8;*/
    color: #7B3F00;
    font-family: 'Mali', cursive;
    font-weight: 700;
}


.free ul li {
    list-style: none;
    font-size: 20px;
    font-family: 'Mali', cursive;
     color: #7B3F00;
}

.free5 ul li {
    list-style: none;
    font-size: 20px;
    font-family: 'Mali', cursive;
     color: #7B3F00;
}
.free1 ul li {
    list-style: none;
    font-size: 20px;
    font-family: 'Mali', cursive;
     color: #7B3F00;
}

.free2 ul li {
    list-style: none;
    font-size: 20px;
    font-family: 'Mali', cursive;
     color: #7B3F00;
}

.free3 ul li {
    list-style: none;
    font-size: 20px;
    font-family: 'Mali', cursive;
     color: #7B3F00;
}

.free4 ul li {
    list-style: none;
    font-size: 20px;
    font-family: 'Mali', cursive;
     color: #7B3F00;
}

.btn-tag {
    margin-top: 40px;
}

.btn-tag a {
    padding: 9px 20px;
    color: #fff;
    border: 1px solid #00cfb8;
    border-radius: 4px;
    background: #00cfb8;
    font-size: 16px;
    text-decoration: none;
    font-weight: 900;

}

.btn-tag a:hover {
    background: #fff;
    color: #00cfb8 !important;
    border: 1px solid #00cfb8;
    transition: opacity .4s, background .4s, color .4s;
}


.dental {
    padding-top: 20px;
}

.dental-wrap {
    background-color: #fff;
}

.free-1 {
    background: #fff;
    margin: 0px 0px;
}

.free-1 span {
    /*color: #00cfb8;*/
     color: #7B3F00;
     font-weight: 700;
    font-family: 'Mali', cursive;
}

.free-1 ul {
    margin: 0;
    padding: 50px 21px;
}

.free-1 ul li {
    list-style: none;
    font-size: 20px;
     color: #7B3F00;
     font-weight: 400;
    font-family: 'Mali', cursive;
}


/*footer*/
.location {
    /*padding-top: 50px;*/
   
    padding-bottom: 130px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;

}

.loc-title {
    text-align: center;
    margin-top: 0px;
    position: relative;
}

.loc-title h2 {
    /*color: #f11212;*/
     color: #7B3F00;
    margin-bottom: 60px;
    font-weight: 700;
}

.loc-title h2:after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 12%;
    background: #7b3f00;
    ;
}

.map-item {
    flex: 0 1 31%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 2px 2px 20px 17px #3333330f;
    overflow: hidden;
    /*background-color:#ffffff3d;;*/
    background-color: rgba(245,235,216,0.65);
    border-radius: 10px;
    text-align: center;
    padding-bottom: 40px;
}

.map-item h5 {
    font-size: 20px;
    color: #000;
    font-weight: 600;
    margin-top: 10px;
    text-align: center;
    letter-spacing: 1px;
}

.map-item p {
    font-size: 16px;
    padding: 0px 40px;
    /*color: #000;*/
        color: #7B3F00;
    letter-spacing: 1px;
    font-weight:600;
}

.map-item a {
    display: block;
    text-align: right;
    /*color: #000;*/
color: #7B3F00;
font-weight:600;
}
.loc{
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.map-item a:hover {
    /*color: #83B09E !important;*/
    color: #F9db59 !important;
}


.btm-section {
    background-color: #333333;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
}

.final-ftr1 {
    /*margin-top: 0px;*/
    position: relative;
}

.final-ftr {
   /* margin-top: 60px;*/
    position: relative;
}

.left-ftr p {
    color: #000;
    line-height: 35px;
    text-align: justify;
    font-size: 1.1em;
}

.mid-ftr h4 {
    color: #000;
    font-size: 26px;
    font-weight: 600;
}

.mid-ftr p {
    color: #000 !important;
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
}
.mid-ftr p a {
    color: #fff;
    font-size: 20px;
}

.right-ftr p {
    color: #000;
    font-size: 26px;
}

.right-ftr ul {
    display: contents;
    list-style: none;
}

.right-ftr li {
    list-style: none;
    text-align: left;
}
.right-ftr li a {
    list-style: none;
    text-decoration: none !important;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.socials {
    padding-bottom: 40px;
}

.socials ul {
    display: contents;
}

.socials ul li {
    list-style: none;
    display: inline-block;
    padding-right: 10px;
    margin-top: 25px;
}


.socials img {
    width: 40px;
}


.btm-line {
    background-color: #000;
    text-align: center;
    padding-bottom: 1px;
}


.btm-line p {
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 600;
    padding: 10px 0px 0px 0px;
}

.btm-line p a {
    color: #fff;
}

.btm-line p a :hover {
    color: #fff !important;
}

/*services-css*/
.service {
    padding-bottom: 80px;
}


.service-title {
    margin-top: 80px;
}

.service-title h2 {
    color: #00cfb8;
    text-align: center;
    font-size: 28px;
    position: relative;
    font-weight: 600;
}

.service-title h2:after {
    content: '';
    position: absolute;
    bottom: -2pc;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 12%;
    background: #ea3524;
}

.service-title p {
    font-size: 20px;
    margin-top: 70px;
}

.service-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    font-size: 18px;
}

.service-list li {
    flex: 1 1 50%;
    list-style: none;
    padding: 5px 30px;
    position: relative;
}

.service-list li img {
    position: absolute;
    left: -30px;
    width: 25px;
    top: 10px;
    height: 25px;
}

.service-list li a {
    color: #43b09e;
    text-decoration: none;
    font-weight: 600;
}


.service-p {
    margin-top: 20px;
    font-size: 20px;
}


/*review*/
.top-bar {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    padding: 90px 0;
}

.content-about h2 {
    margin-top: -120px;
    color: #3C3C3C;
    font-size: 46px;
    z-index: 1;
    position: absolute;
    font-weight: bold;
}

.content-about {
    background: #fff89ca8;
    position: relative;
}

.logo-about {
    height: 150px;
    margin-top: -170px;
}

.offer {
    margin-top: 100px;
}

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


.cont-info {
    margin-top: 70px !important;
}

.info-form {
    background-color: #5fbccb;
    padding-bottom: 50px;
}

.contact-info {
    margin-top: 30px !important;
    position: relative;}

.contact-info p {
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 2;
    color: #000; 
}

.contact-info ul{
    position: absolute;
    top: 60px;
    left: 40px;
}
.contact-info a {
   font-size: 27px;
    color: #EA4153;
    font-weight: 700;
}

.contact-info a:hover {
    color: #EA4153;
}

@media (max-width: 765px) {
    .contact-info {
    margin-top: 30px !important;
    position: relative;}

.contact-info p {
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 2;
    color: #000;
    /*font-size: 14px;*/
    top: 40px;
    left: 40px;
    /*position: absolute;*/
}

.contact-info ul{
    position: absolute;
    top: 70px;
    left: 10px;
}
   .contact-info a {
    font-size: 18px;
    color: #EA4153;
 }   
}


.feedback {
    background-color: #FFFABD;

}

.right-wrap {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}

.right-wrap h4 {
    font-size: 22px;
    font-weight: normal;
    color: #00cfb8;
    font-family: 'Mali', cursive;
}

.right-wrap ul {
    margin: 0 0 15px 27px;
    padding: 0;
}

.right-wrap ul li {
    list-style: none;
    font-size: 20px;
    font-weight: normal;
    color: #00cfb8;
    padding: 5px 0px 5px 0px;
    font-family: 'Mali', cursive;
}

.right-wrap a {
    text-decoration: none;
    color: #00cfb8;
}

.right-wrap a:hover {
    color: #00cfb8;
}



.schedule {
    background: #00cfb8;
    border-radius: 10px;
    text-align: center;
}

.schedule h1 {
    font-size: 2em;
    padding: 20px 0 20px 0px;
    color: #fff;
}

.schedule-wrap {
    margin: 0;
    padding: 0 12px 0px 12px;
    display: flex;
    text-align: center;
    justify-content: center;
}

.schedule-wrap h4 {
    text-transform: uppercase;
    background: #a6d64f;
    color: #fff;
    font-weight: bold;
    font-size: 17px;
    padding: 12px 100px;
    border-radius: 10px;
    justify-content: center;
    display: flex;
    line-height: 28px;
}


.call-wrap {
    margin: 0;
}

.call-wrap ul {
    margin: 0;
    padding: 0;
}

.call-wrap ul li {
    font-size: 2em;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    list-style: none;
}

.call-wrap ul li a {
    font-size: 1em;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
}

.call-wrap ul li a:hover {
    color: #fff;
}

.sidebar {
    float: right;
    width: 30%;
    padding: 0 30px;
    background: #ffffff;
    border-radius: 10px;
}

.review-item h2 {
    padding-bottom: 20px;
}


/*form*/

form {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    margin-top: 50px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 5px;
    /*height: 30px;*/
    margin-bottom: 10px;
    border: 2px solid #6655C1;
    border-radius: 5px;
}

textarea {
    resize: vertical;
}

input[type="submit"] {
    background-color: #A6D650;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    box-shadow: 3px 3px 20px 0px #33333324 !important;
    transition: 0.3s;
}

input[type="submit"]:hover {
    background-color: #fff;
    color: #000;
}

.group {
    margin-bottom: 20px;
    font-size: 25px;
    font-weight: 700;
    font-family: 'Mali', cursive;
}


.second-section {
    width: 100%;
    background-image: url('webminesllc/images/sea-back-2.png');
}

/*.second-section img {*/
/*    width: 100%;*/
/*}*/

.second-section h1 {
    margin: 0px 0px 30px 0px;
    font-size: 22px;
    font-family: 'Mali', cursive;
    font-weight: 600;
    text-align: center;
    color: black;
}

.second-section h3 {
    margin: 20px 0 11px 0;
    font-family: 'Mali', cursive;
    font-weight: 700;
    color: #ffffff;
    line-height: 40px;
}

.second-point {
    margin: 20px 0 -26px 0;
    font-family: 'Mali', cursive;
    font-weight: 700;
    color: red;
    line-height: 40px;
}

.second-section p {
    /*margin: 20px 0 11px 0;*/
    font-family: 'Mali', cursive;
    font-size: 20px;
    line-height: 40px;
    color: white;
}

.second-section ul li {
    font-family: 'Mali', cursive;
    list-style: none;
    /* font-size: 20px; */
    /* line-height: 36px; */
}

.second-section ul li span {
    margin: 20px 0 11px 0;
    font-family: 'Mali', cursive;
    font-size: 20px;
    line-height: 36px;
    font-weight: 700;
}


.under-wrap {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Mali', cursive;
}

.under {
    font-size: 20px;
    line-height: 1.75;
    font-weight: 400;
    color: #000;
    font-family: 'Mali', cursive;
}

.under a {
    margin: 0;
}

.under a:hover {
    text-decoration: none;
}

.under-1 {
    font-size: 20px;
    line-height: 1.75;
    font-weight: 400;
    margin: 20px 0;
    font-family: 'Mali', cursive;
}

.doctors {
    background: #fff;
}

.doctors h1 {
    font-size: 2em;
    margin-bottom: 30px;
    font-weight: 700;
    font-family: 'Mali', cursive;
}

.dental {
    width: 100%;
    background: #5fbccb;
    padding-bottom: 25px;
    position: relative;
}

/*.dental img {*/
/*    width: 100%;*/
/*}*/

.dental-wrap {
    background-color: #fff;
}

.dental-wrap h4 {
    text-align: center;
    font-size: 24px;
    color: #00cfb8;
    font-family: 'Mali', cursive;
}

.dental-wrap p {
    text-align: center;
    font-size: 16px;
    color: #00cfb8;
    font-family: 'Mali', cursive;
}

.dental-wrap-1 {
    background-color: #fff;
}

.dental-wrap-1 p {
    padding: 10px 20px;
    font-size: 20px;
    line-height: 1.75;
    font-weight: 400;
    font-family: 'Mali', cursive;
}


.target {
    margin: 42px 0 0 0;
}


.navbar1 {
    display: none;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    /* padding: 15px; */
    background-color: #7B3F00;
    color: white;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 35px;
    height: 4px !important;
    background-color: white;
    margin: 3px 0;
}

.nav-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hamburger a {
    color: white;
    font-size: 14px;
}

.content {
    padding: 0px;
}

.mobile-nav {
    display: none;
}



/* Media Query for responsive design */
@media (max-width: 767px) {
    .header {
    margin-top: 0px;
}
    .navbar1 {
        display: flex;
        width: 100%;
    }
    .hamburger {
        display: flex;
        width: 25%;
        text-align: center;
        justify-content: center;
        align-items: center;
        background: #7B3F00;
        padding: 8px;
    }

    .hamburger a:hover {
        color: white;
    }

    .left-section {
        margin-left: 0px;
        text-align: center;
    }

    .left-section p {
        letter-spacing: 0px;
    }

    .right-section {
        margin-left: 0px;
    }

    .hamburger i {
        font-size: 26px;
        margin-bottom: 2px;
    }

    .nav-items {
        display: inline-block;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #7B3F00;
        width: 100%;
    }

    .nav-items.active {
        display: flex;
    }

    .nav-items a {
        margin: 10px;
    }

    .mobile-nav {
        display: block;
        position: absolute;
        top: 75px;
        left: 0;
        background-color: #7B3F00;
        width: 100%;
        padding: 20px;
        display: none;
    }

    .mobile-nav a {
        display: block;
        color: white;
        text-decoration: none;
        margin: 10px 0;
        font-weight: 900;
        text-transform: uppercase;
    }

    .mobile-nav.active {
        display: block;
    }

    .content-about h2 {
        font-size: 35px;
        text-align: center;
    }

    .form-fill form {
        background-color: #fff;
        margin-top: 0px;
    }

    .schedule h1 {
        font-size: 1.5em;
    }

    .schedule-wrap h4 {
        font-size: 16px;
    }

    .call-wrap ul li {
        font-size: 1.5em;
    }
    .starfish-container2 {
    position: absolute;
    width: 15%;
    bottom: -5px;
    left: -20px;
    transform: translate(-50%, -50%);
    animation: rotateStarfish 2s ease-in-out infinite alternate;
}
.starfish-container {
    position: absolute;
    width: 15%;
    top: -20px;
    right: -10px;
    transform: translate(-50%, -50%);
    animation: rotateStarfish 3s ease-in-out infinite alternate;
}

}


.form-fill form {
    background-color: #fff;
}

.form-fill label {
    display: inline-block;
    font-weight: 600;
}

.form-fill textarea {
    resize: vertical;
    margin-bottom: 31px;
    height: 150px;
}

  .custom-slider-container {
            width: 100%;
             position: relative;
            margin: 0 auto;
            overflow: hidden;
        }

        /* Styles for the slider content */
        .custom-slider-content {
            display: flex;
            transition: transform 0.5s ease;
        }

        /* Style for each individual slide */
        .custom-slide {
            min-width: 100%;
        }

        /* Make the images responsive */
        .custom-slide img {
            width: 100%;
            height: auto;
        }

        /* Navigation buttons */
        .custom-slider-nav {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }

        .custom-slider-nav button {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            margin: 0 5px;
            outline: none;
        }

/* Your custom CSS styles go here */
.slider {
    width: 100%;
    margin: 0 auto;
    height: fit-content;
}

.slider img {
    width: 100%;
    height: 325px;
}



/*CS-------------------------------*/
.container__feed {
    justify-content: center;
    align-items: center;
    padding: 20px;
    padding-bottom: 0px !important;
    background-color: #FFFA6B;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}

.feedbacks {
    display: flex;
    padding-top: 40px !important;
    gap: 20px;
    padding-bottom: 280px;
}

.feed_box {
    position: relative;
    width: 100%;
    border-radius: 15px;
    padding: 15px 20px;
    box-shadow: 0 0 10px #00000028;
    z-index: 999;
    background-color: #fff;
    overflow: hidden;
}

/* MEDIA */
@media (max-width: 800px) {
    .feedbacks {
        display: flex;
        flex-direction: column;
    }

    .feed_box {
        position: relative;
        width: 100%;
        max-width: 100%;
    }
}






/*read-more*/

details {
    position: relative;
}

details summary {
    display: block;
    cursor: pointer;
    color: #EA3524;
}

details summary:focus {
    outline: none;
}

details[open] {
    display: block;
    padding-bottom: 25px;
    padding-top: 10px;
    animation: open .2s linear;
}

details[open] summary {
    position: absolute;
    bottom: 0;
    left: 0;
}

details #open {
    padding-left: 5px;
    text-align: middle;
}

#close{
    font-weight: 700;
}
details #open:after {
    display: inline-block;
    position: relative;
    top: -3px;
    padding-left: 8px;
    content: "\00bb";
    transform: rotate(90deg);
}

details[open] #open {
    display: none;
}

details #close {
    display: none;
}

details[open] #close {
    display: block;
}

::-webkit-details-marker {
    display: none;
}

span#open {
    top: -30px !important;
    position: absolute;
    left: 0px;
    font-weight: 700;
}

/*  @media (max-width: 375px) {*/

/*            span#open {*/
/*    top: -44px !important;*/
/*    position: absolute;*/
/*    left: 30px;*/
/*}*/

/*        }*/
/*          @media (max-width: 455px) {*/

/*            span#open {*/
/*    top: -44px !important;*/
/*    position: absolute;*/
/*    left: 30px;*/
/*}*/

/*        }*/
/*          @media (max-width: 768px) {*/

/*            span#open {*/
/*    top: -44px !important;*/
/*    position: absolute;*/
/*    left: 250px;*/
/*}*/

/*        }*/


@keyframes open {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Style for the button */
#scrollToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 16px;
    border: none;
    outline: none;
    background-color: #333;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
}

/* Show the button when user starts scrolling */
#scrollToTop.show {
    display: block;
}


/*----------------*/
.service-section {
    background-color: #5fbccb;
    position: relative;
}

.service-section p {
    text-align: center;
    /*color: #000;*/
     color: #7B3F00;
     font-weight: 600;
}

.nick-div{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.nick-con{
    /*border:2px solid red;*/
    /*background-color: #00ffff63;*/
    background-color: rgba(245,235,216,0.65);
}

.nick-con p{
    color: #7B3F00;
    font-size: 22px;
    font-weight: 700;
}

.service-group {
    display: flex;
    flex-wrap: wrap;
     justify-content: flex-start; /* Align items to the left */
    gap: 20px; /* Add consistent spacing between items */
    padding-top: 20px;
    padding-bottom: 130px;
}

.service {
    width: calc(25% - 20px);
    position: relative;
    /* 25% for each service in a row */
    background-color: #FFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
    text-align: center;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
      
     
    text-decoration: none;
}

.service:hover {
    transform: scale(1.05);
}

.service i {
    font-size: 48px;
    color: #5374ff;
    position: relative;
}
.service i:hover {
    font-size: 48px;
    color: #FFF;
    position: relative;
}

.service a {
    font-size: 18px;
    margin: 10px 0;
    position: relative;
    font-weight: 600;
    text-decoration: none;
    color: #00CFB8;
}
.service a:hover {
    color: #fff;
}

 .service span {
            display: block;
        }

        .service span:hover {
            display: block;
            /*color: #fff;*/
              color: #7B3F00;
        }


.service a:hover {
    color: #00CFB8;
}

@media (max-width: 768px) {
    .service {
        width: 100%;
        /* Full width for smaller screens */
    }
}

@media (min-width: 769px) and (max-width: 990px) {
    .final-ftr img {
        width: 150px;
        /*margin-left: 30px;*/
        text-align:center;
    }
}

@media (min-width: 991px) and (max-width: 1399px) {
    .final-ftr img {
        width: 150px;
        /*margin-left: 85px;*/
    }
}


@media (min-width: 991px) and (max-width: 1199px) {
    
    .free ul {
        margin: 0px;
    padding: 68px 21px;
    }
    
    .free5 ul {
        margin: 0px;
    padding: 5px 21px;
    }
      .free4 ul {
           margin: 0px;
    padding: 68px 21px;
    }
    .free1 ul {
    margin: 0px;
    padding: 52px 21px;
    }
        .free2 ul {
    margin: 0px;
    padding: 23px 21px;
    }
     .free3 ul {
    margin: 0px;
    padding: 7px 21px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    
    .free ul {
         margin: 0px;
    padding: 93px 21px;
    }
    
    .free5 ul {
         margin: 0px;
    padding: 5px 21px;
    }
    
    .free4 ul {
        margin: 0px;
    padding: 106px 21px;
    }
    .free1 ul {
    margin: 0px;
    padding: 92px 21px;
    }
     .free-1 ul {
    margin: 0px;
    padding: 76px 21px;
    }
        .free2 ul {
    margin: 0px;
    padding: 62px 21px;
    }
     .free3 ul {
    margin: 0px;
    padding: 48px 21px;
    }
}

@media (min-width: 1400px) and (max-width: 4000px) {
    
    .free ul {
        margin: 0px;
    padding: 132px 21px;
    }
    
     .free5 ul {
         margin: 0px;
    padding: 27px 21px;
    }
    .free4 ul {
        margin: 0px;
    padding: 131px 21px; 
    }
    .free1 ul {
    margin: 0px;
    padding: 116px 21px;
    }
     .free-1 ul {
    margin: 0px;
    padding: 118px 21px;
    }
        .free2 ul {
    margin: 0px;
    padding: 102px 21px;
    }
     .free3 ul {
    margin: 0px;
    padding: 87px 21px;
    }
}

@media (min-width: 1400px) and (max-width: 4000px) {
    .final-ftr img {
        width: 150px;
        /*margin-left: 125px;*/
    }
}
   .service::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            /*background: linear-gradient(45deg, #FFC107, #FF5722, #E91E63, #9C27B0, #2196F3, #00BCD4, #4CAF50, #8BC34A, #FFC107);*/
              background: linear-gradient(45deg, rgba(245,235,216,0.65));
            background-size: 200% 200%;
            border-radius: 10px;
            animation: gradientBorder 5s linear infinite;
            color: #7B3F00;
        }

        @keyframes gradientBorder {
            0% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 100% 50%;
            }
        }

.final-ftr img {
    width: 150px;
    
}
.final-ftr1 img {
    width: 150px;

}

.service-section .container h2 {
    text-align: center;
    padding-top: 50px;
    /*color: #000000;*/
    color: #7B3F00;
    font-weight:700;
}
/* CSS for Meet Our Team Page */

.team-member {
    display: flex;
    margin-bottom: 40px;
    flex-direction: row-reverse;
    /* Reverse the order of image and content */
    flex-wrap: wrap;
    align-items: center;
    /*background-color: #899de79e;*/
    background-color: rgba(245,235,216,0.65);
    border-radius: 15px; /* Adjust the curve to be more attractive */
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  Soft shadow for depth */
     box-shadow: 0 4px 8px rgba(245,235,216,0.65) ; /* Soft shadow for depth */
    border: 7px solid #7B3F00; /* Proper border to highlight the element */
    padding: 20px; /* Add some padding for better spacing */
}


.team-member-image {
    flex: 1;
    text-align: center;
}

.team-member-image img {
    max-width: 100%;
    /*width: 400px;*/
    /*width: 296px;*/
    /*width: 461px;*/
    height: 400px;
}

.team-member-content {
    flex: 1;
    padding: 20px;
    /*background-color: #00000061;*/
}

.team-member-content1 {
    flex: 1;
    padding: 20px;
    background-color: #d2bd9e14;
}

.team-member-content h2 {
    font-size: 34px;
    margin-bottom: 10px;
    /*color: #fff;*/
    color: #7B3F00;
    font-weight: 600;
}

.team-member-content p {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 1;
    color: #E2CA76;
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
    .team-member {
        flex-direction: column;
    }

    .team-member-image,
    .team-member-content {
        flex: none;
        width: 100%;
    }

    .team-member-content h2 {
        font-size: 24px;
        margin-bottom: 10px;
        color: #7b3f00;
        font-weight: 600;
    }

    .team-member-content p {
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 1.5;
        color: #000;
        letter-spacing: 1;
    }
}



/*dr-slider*/

.slider {
    display: flex;
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 0px;
}

.slider a{
    color:#FFFA6A;
}


.slide {
    text-align: center;
    transition: transform 0.5s ease;
    padding: 20px;
    box-sizing: border-box;
}

.doctor-img img {
    width: 350px;
    height: 350px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 15px rgb(234 255 95 / 99%);
}

.doctor-img img:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
    border-radius: 50%;
    box-shadow: 0 0 15px rgb(16 141 89 / 30%)
}

.slide h5, a , p {
    color: #ffffff;
    /*margin-top: 20px;*/
}


/* Responsive styles */
@media (max-width: 768px) {
    .slider {
        flex-direction: column;
    }

    .slide {
        flex: none;
        width: 100%;
        margin: 0 auto;
    }

    .doctor-img img {
        width: 350px;
        height: 350px;
    }

}

/* Rest of your CSS styles */


.button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
}

/* Style for individual buttons */
.button {
    padding: 10px 20px;
    background-color: #bd3922;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;

}





.button-container p {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #fff;
}

.button-container p a {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    border-radius: 20px;
}

.button-container p a:hover {
    color: #fff;
}

/* CSS for screens smaller than 768px */
@media (max-width: 768px) {
    .button-container p a {
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border-radius: 20px;
    }
}

/* CSS for screens between 768px and 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .button-container p a {
        text-align: center;
        font-size: 24px;
        font-weight: 600;
        border-radius: 20px;
    }
}







.widget-body {
    /*background-color: #ffffff3d;*/
    background-color: rgba(245,235,216,0.65);
     text-align: center;
     border-radius: 15px;
     box-shadow: 2px 2px 20px 17px #3333330f;
}
.widget-body ul,li{
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.callout-content{
    padding-top: 30px;
}
.callout-content p{
    font-size: 18px;
    color: #f11212;
    font-weight: 600;
   
}

.callout-actions a {
    color: #000;
    background-color: #fff;
    font-size: 13px;
    /*padding: 32px 50px;*/
    padding: 7px 7px;
    font-weight: 600;
    font-family: 'Mali', cursive;
    border-radius: 15px;
}
.callout-actions a:hover{
    color: #000;
    background-color: #fff;
}

.callout-phone{
    padding-top: 50px;
     padding-bottom: 50px;
}
.callout-phone h3{
    font-size: 18px;
    color: #000;
    font-weight: 600;
}

.callout-phone a{
    font-size: 18px;
    color: #000;
    font-weight: 600;
}

.callout-phone a:hover{
    color: #fff;
}

.scrolling-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scrolling-container img {
    width: 350px;
  animation: scrollRightToLeft 25s linear infinite;
}
.scrolling-container1 img {
    width: 200px;
    animation: scrollRightToLeft1 25s linear infinite;
}

@keyframes scrollRightToLeft {
  0% {
    transform: translateX(400%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes scrollRightToLeft1 {
  0% {
    transform: translateX(600%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.content-section {
    position: relative;
    z-index: 1;
    margin-top: 0px;
     background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}

@media (max-width: 768px) {
    @keyframes scrollRightToLeft {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.pandaa {
    width: 100px !important;
    height: 100px !important;
    top: -50px !important;
    right: 0 !important;
}
.pandaa-image {
    transform: translate(0%, -50%) !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}
.child-vist-1{
    position: absolute;
    left: 0;
    top: 0;
}

.child-visit-2 {
    position: absolute;
    right: 0;
    top: 0;
}



/*banner-animation*/
.image-container img {
    width: 80%;
    position: absolute;
    top: 80px;
    left: 10%;
    transition: transform 3s ease-in-out;
}
@keyframes autoZoom {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2); /* Adjust the scale value for zoom level */
    }
}

/* Apply the automatic zoom animation to the image */
.zoom-animation {
    animation: autoZoom 5s infinite alternate; /* Adjust the duration as needed */
}



/*animation*/

.contain {
  position: relative;
  width: 150px; 
  height:150px; 
 
}

.absolute-image {
  position: absolute;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  max-width: 100%; 
  max-height: 100%; 
}

.pandaa {
  position: absolute;
  width: 150px; 
  height:150px;
  top: -70px; 
  right: 150px;
}

.pandaa-image {
  transform: translate(-50%, -50%); 
  max-width: 100%; 
  max-height: 100%; 
}
.train-container {
  width: 100%;
  height: 150px; 
  position: relative;
  overflow: hidden;
}
.train-container img{
    width: 250px;
    height: 100px;
}

.moving-train {
  position: absolute;
  animation: moveRightToLeft 20s linear infinite;
  max-width: 100%; 
  height: auto; 
  bottom: 0; 
}

@keyframes moveRightToLeft {
  0% {
    right: -100%; /* Start off-screen to the right */
  }
  100% {
    right: 100%; /* Move off-screen to the left */
  }
}


.pinata-section{
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}


.bg-oppo{
    background-color: #FFFA6B;
}
.employment-heading{
    text-align: center;
}

.oppo-title h2{
    color:#13D2BD ;
}

.oppo-content p{
    color: #000;
    font-size: 18px;
}

.oppo-content ul{
    padding: 0;
    margin: 0;
}
.oppo-content ul li{
    list-style: none;
    line-height: 2;
    font-size: 18px;
    font-family: Mali, cursive; 
}

.oppo-content ul li a{
    color: red ;
    font-size:20px;
}

.brd-top{
   
    position: relative;
}
.brd-top img{
    width: 100%;
    height: auto;
}

.brd-btm{
    z-index: 999 !important;
}
.brd-btm img{
    width: 100%;
    height: auto;
    margin-top:-30px
}







*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

.slider .slick-arrow {
  position: absolute;
  top: 50%;
  margin: -20px 0px 0px 0px;
  z-index: 10;
  font-size: 0;
  width: 30px;
  height: 30px;
  background: #000;
}
.slider .slick-arrow.slick-prev {
  left: 0;
}
.slider .slick-arrow.slick-next {
  right: 0;
}

/*----------staff-css-------------*/
.staff{
    text-align: center;
}
.staff img{
width: 100%;
height: auto;
padding-bottom: 20px;
}

.yelp-wrap{width: 100%;
height: 560px; display:flex;}














/*new header changes*/


.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
}

.menu li {
    position: relative; /* For dropdown positioning */
}

.menu li a {
    display: block;
    padding: 15px 34px;
    font-weight: bold;
    color: black;
    text-decoration: none;
}

/* Column Background Colors */
.nav-column {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.red-column {
    background-color: red;
}

.green-column {
    background-color: green;
}

.blue-column {
    background-color: blue;
}

/* Dropdown Styles */
.menu li .toggle, .menu li .inner-menu {
    display: none; /* Hide by default */
}

.menu li input[type="checkbox"]:checked + .inner-menu {
    display: block; /* Show the dropdown when checkbox is checked */
}

.inner-menu {
    position: absolute;
    left: 0;
    top: 100%;
    background-color: white; /* Dropdown background color */
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    border: 1px solid #ddd; /* Optional: border for dropdown */
    z-index: 1000;
}

.inner-menu li {
    padding: 10px;
    background-color: #f9f9f9;
}

.inner-menu li a {
    padding: 10px 20px;
    color: black;
    font-weight: bold;
    text-decoration: none;
}

.inner-menu li a:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Hover Effect for Dropdown */
.menu li:hover .inner-menu {
    display: block; /* Show dropdown on hover */
}

/* Responsive Considerations */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
    }
    .nav-column {
        width: 100%;
    }
}





































.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
}

/*.menu > .nav-column {*/
    /*display: flex;*/
/*    justify-content: space-around;*/
/*    align-items: center;*/
/*    flex: 1;*/
/*    display: block;*/
/*}*/

.menu li {
    position: relative; /* For dropdown positioning */
}

.menu li a {
    display: block;
    padding: 15px 34px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
}

/* Column Background Colors */
.nav-column {
    background-color: #003060;
}

.red-column {
    background-color: red;
}

.green-column {
    background-color: #4af947;
}

.blue-column {
    background-color: blue;
}

/* Dropdown Styles */
.menu li .toggle, .menu li .inner-menu {
    display: none; /* Hide by default */
}

.menu li input[type="checkbox"]:checked + .inner-menu {
    display: block; /* Show the dropdown when checkbox is checked */
}

.inner-menu {
    position: absolute;
    left: 0;
    top: 100%;
    background-color: white; /* Dropdown background color */
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    border: 1px solid #ddd; /* Optional: border for dropdown */
    z-index: 1000;
}

.inner-menu li {
    padding: 10px;
    background-color: red;
}

.inner-menu li a {
    padding: 10px 20px;
    color: black;
    font-weight: bold;
    text-decoration: none;
}

.inner-menu li a:hover {
    /*background-color: rgba(0, 0, 0, 0.1);*/
}

/* Hover Effect for Dropdown */
.menu li:hover .inner-menu {
    display: block; /* Show dropdown on hover */
}

/* Responsive Considerations */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
    }
    .nav-column {
        flex-direction: column;
        width: 100%;
    }
}



@media only screen and (max-width: 800px) {
    .menu {
        display: none !important;
    }
}



.slider {
    display: flex; /* Ensures the items are in a row */
    gap: 10px; /* Adjust the spacing between images */
    overflow-x: auto; /* Allows horizontal scrolling */
    scroll-behavior: smooth; /* Smooth scrolling for better UX */
    padding: 20px 0; /* Adds padding around the slider */
}

.slide-item {
    flex: 0 0 auto; /* Ensures items don't shrink and maintain their width */
    margin-right: 10px; /* Space between each slide item */
    border: 1px solid #ff1414; /* Optional: Adds a light border for distinction */
    padding: 5px; /* Optional: Adds padding inside each slide item */
    background: #3e43f7; /* Optional: Background color for a clean look */
    border-radius: 5px; /* Optional: Rounded corners */
}


.transportation-info {
    margin-top: 10px; /* Adds space above the text */
    color: #7B3F00; /* Text color */
    font-size: 22px; /* Adjust the font size */
    font-weight: 700;
    
}

.transportation-info i {
    margin-right: 5px; /* Adds space between the icon and text */
    color: black; /* Icon color, adjust as needed */
  
}

.transportation-info:hover{
    color: #7B3F00;
}



.shark-animation {
    position: relative; /* Allows positioning of the shark within the section */
    width: 100%; /* Full width to allow movement across the screen */
    height: 150px; /* Adjust height as needed */
    overflow: hidden; /* Hides the shark when it swims out of view */
}

.swimming-shark {
    position: absolute; /* Allows absolute positioning for smooth animation */
    width: 50px; /* Width of the shark */
    height: 100px; /* Height of the shark */
    top: 10px; /* Position from the top of the section */
    left: -150px; /* Start position off-screen to the left */
    animation: swim 10s linear infinite; /* Animation properties */
}

@keyframes swim {
    0% {
        left: -150px; /* Start off-screen to the left */
    }
    100% {
        left: 100%; /* End off-screen to the right */
    }
}



.menu a {
   
    padding: 10px 15px; /* Adds padding inside the links */
   
   
}


.main-wrapper {
    background-image: url('../images/animation/sea7.png'); /* Replace with your desired image path */
    background-size: cover; /* Adjust to fit as needed */
    background-repeat: no-repeat;
    background-attachment: fixed; /* Keeps the background fixed while scrolling */
    
}



@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.bus-icon {
    animation: bounce 2s infinite; /* Adjust the duration and iteration as needed */
    display: inline-block; /* Ensures the element behaves correctly in the animation */
    margin-right: 10px; /* Adds space between the icon and text */
    color: red;
}


/*.right-border-image {*/
    border-right: 3px solid #000; /* Adjust the width, style, and color of the border as needed */
/*}*/






.contain {
  position: relative;
  width: 100%; /* Adjust based on your layout */
  overflow: hidden; /* Ensures the image doesn't display outside this container */
}

.absolute-image {
  position: absolute;
  width: 200px; /* Adjust based on your image size */
  height: 300px; /* Adjust based on your image size */
  animation: moveShark 20s linear infinite; /* Adjust duration as needed for speed */
}

@keyframes moveShark {
  from {
    left: 100%; /* Start from just off-screen to the right */
  }
  to {
    left: -100%; /* Move to just off-screen to the left */
  }
}


.contain-whale {
  position: relative;
  width: 100%; /* Adjust based on your layout */
  height: 100px; /* Adjust based on your layout, ensure it's enough to contain the whale */
  overflow: hidden; /* Prevents the image from displaying outside the container */
}

.absolute-image-whale {
  position: absolute;
  width: 170px; /* Adjust based on your image size */
  height: 130px;
  animation: moveWhale 30s linear infinite; /* Animation runs continuously, adjust time as needed */
}

@keyframes moveWhale {
  from {
   left: 100%;  /* Start from just off-screen to the left */
  }
  to {
     left: -100%;  /* Move to just off-screen to the right */
  }
}




.contain-dolphin {
  position: relative;
  width: 100%;  /* Adjust based on your layout */
  height: 150px; /* Adjust based on your layout to ensure it's enough to contain the dolphin */
  overflow: hidden; /* Prevents the image from displaying outside the container */
}

.absolute-image-dolphin {
  position: absolute;
  width: 180px; /* Adjust based on your image size */
  height: 200px;
  animation: moveDolphin 25s linear infinite; /* Animation runs continuously, adjust time as needed */
}

@keyframes moveDolphin {
  from {
    left: 100%; /* Starts and ends at the left, creating a loop back to the start */
  }
  to {
    left: -100%; /* Moves to the right, subtracting the image width to keep it fully visible */
  }
}


 /*@media (max-width: 768px) {*/
 /*    .about-one-image{*/
 /*        width: 447px;*/
 /*    }*/
 /*     .about-two-image{*/
 /*        width: 447px;*/
 /*    }*/
 /*    .about-three-image{*/
 /*        width: 447px;*/
 /*    }*/
 /*     .about-four-image{*/
 /*        width: 447px;*/
 /*    }*/
 /*}*/
 
 
 /* @media (max-width: 450px) {*/
 /*    .about-one-image{*/
 /*        width: 281px;*/
 /*    }*/
 /*     .about-two-image{*/
 /*        width: 281px;*/
 /*    }*/
 /*    .about-three-image{*/
 /*        width: 281px;*/
 /*    }*/
 /*     .about-four-image{*/
 /*        width: 281px;*/
 /*    }*/
 /*}*/
 
 
 
 
 
 .about-four-image{
         margin-bottom: 20px;
    width: 1060px;
 }
 
 
 
 .about-two-image{
     
     margin-bottom: 20px; 
     height: 372px;    
     margin-top: 91px;
     
 }
 
 
  @media (max-width: 450px) {
      .about-one-image{
           height: 248px;
    width: 342px;
      }
        .about-two-image{
            height: 229px;
        } 
        .about-four-image{
            width: 343px;
        }
        .about-three-image{
            height: 322px;
    width: 344px;
        }
  }
  

  
  
 @media (max-width: 768px) {
	 .pad0{
		 padding: 0px !important;
	 }
	 
	 .pad10{
		 padding: 10px;
	 }
	 
	 
	 
	 
    .about-one-image {
        height: 300px;
        width: 400px;
    }
    .about-two-image {
        height: 280px;
    }
    .about-four-image {
        width: 400px;
    }
    .about-three-image {
        height: 350px;
        width: 400px;
    }
}



.slick-dotted.slick-slider{
    margin-bottom: 0px;
}


.dental-zoom p{
        color: #000000;
    /*font-weight: 600;*/
}

.dental-zoom h3{
        color: #000000;
    /*font-weight: 600;*/
}
 
 
.contact-infor p{
    color: #fff;
} 

/*footer icon hover effect*/

  
/*======= Main CSS style starts =======*/

.socials-list {
  margin: auto;
  padding: 0;
  list-style: none;
  text-align: center;
}

.socials-list li {
  display: inline-block;
  margin-right: 1.5rem;
}

.socials-list li:last-of-type {
  margin-right: 0;
}

.social-icon {
  display: block;
  /*width: 64px;*/
  /*height: 64px;*/
  /*border: 4px solid #fa0546;*/
  border-radius: 50%;
  /*-webkit-transition: all 0.3s ease;*/
  /*-o-transition: all 0.3s ease;*/
  /*transition: all 0.3s ease;*/
}

.social-icon:active {
  border: 4px solid #fa0546;
}

.social-icon:focus {
  border: 4px solid #fa0546;
}

.social-icon:visited {
  border: 4px solid #fa0546;
}

.social-icon span {
  position: relative;
  right: 4px;
  bottom: 4px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 22px;
  background: #fa0546;
  color: #eaeaea;
  border-radius: 50%;
  border: 1px solid transparent;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  overflow: hidden;
  -webkit-box-shadow: 0 2px 16px rgba(250, 5, 70, 0.5);
          box-shadow: 0 2px 16px rgba(250, 5, 70, 0.5);
  text-shadow: 0px 0px 0px rgb(212, 0, 32), 1px 1px 0px rgb(212, 0, 32),
    2px 2px 0px rgb(212, 0, 32), 3px 3px 0px rgb(212, 0, 32),
    4px 4px 0px rgb(212, 0, 32), 5px 5px 0px rgb(212, 0, 32),
    6px 6px 0px rgb(212, 0, 32), 7px 7px 0px rgb(212, 0, 32),
    8px 8px 0px rgb(212, 0, 32), 9px 9px 0px rgb(212, 0, 32),
    10px 10px 0px rgb(212, 0, 32), 11px 11px 0px rgb(212, 0, 32),
    12px 12px 0px rgb(212, 0, 32), 13px 13px 0px rgb(212, 0, 32),
    14px 14px 0px rgb(212, 0, 32), 15px 15px 0px rgb(212, 0, 32),
    16px 16px 0px rgb(212, 0, 32), 17px 17px 0px rgb(212, 0, 32),
    18px 18px 0px rgb(212, 0, 32), 19px 19px 0px rgb(212, 0, 32),
    20px 20px 0px rgb(212, 0, 32), 21px 21px 0px rgb(212, 0, 32),
    22px 22px 0px rgb(212, 0, 32), 23px 23px 0px rgb(212, 0, 32),
    24px 24px 0px rgb(212, 0, 32), 25px 25px 0px rgb(212, 0, 32),
    26px 26px 0px rgb(212, 0, 32), 27px 27px 0px rgb(212, 0, 32);
}

.social-icon:hover span {
  -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
          transform: scale(0.7);
}

.social-icon:hover {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}




.wrapper {
    max-width: 1800px; /* Adjust this based on your layout needs */
    margin: 0 auto;    /* This centers the content horizontally */
    padding: 0 0px;   /* Optional padding for smaller screens */
}

.slick-dotted.slick-slider {
    /* margin-bottom: 30px; */
}



body{
    /*background-color: #5fbccb !important;*/
    background-color: #f5f5dc !important;
}


html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

footer {
    margin: 0;
    padding: 0;
    background-color: #000; /* If you want the black line */
}


footer + * {
    margin-bottom: 0;
    padding-bottom: 0;
}
/*======= Main CSS style ends =======*/






/*Doctor pages CSS...................*/



@media (max-width: 768px) {
    .dr-section{
        display: block !important;
        
    }
    .team-member-image img{
        width: 200px;
        height: 200px;
    }
    .team-member-content p{
        font-size: 13px ;
    }
    .team-member {
        padding: 8px;
    }
}


 @media (max-width: 768px) {
             .abc {
                 margin-bottom: 80px !important;
             }
          }


@media (max-width: 768px) {
    .ytube-section img{
        height: 200px;
        width: 100%;
    }
}



@media (max-width: 768px){
      .info-section {
          gap: 15px !important;
      }
}