@charset "utf-8";
/* CSS Document */
body { margin: 0; padding: 0; font-family: 'Heebo', sans-serif; font-size: 16px; color: #474747;}

#wrapper {width: 100%; max-width: none;}
header {padding: 10px 0;}
#main-container {background-image: linear-gradient(#def4ff, #fff); background-repeat: no-repeat;}
.tagline {font-style: italic; margin-top: 50px;}

#tree {position: relative;}
.tree-container {position: absolute; left: 0; right: 0; bottom: 0; width: 668px; height: 694px; margin: 0 auto; background: url('../images/landing-tree.png') center top no-repeat; transform: scale(0.75); transform-origin: bottom;}

circle {position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background-color: #5eac25; text-align: center; color: #fff; transition: all 0.4s;}
.branch {background-color: #a6ce39;}
.branch a {font-weight: 400; color: #fff; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; border-radius: 50%; transition: all 0.4s; text-decoration: none; line-height: 100%;}
.branch a:hover {background-color: #0095DA; transform: scale(1.1);}
.kaprada {width: 104px; height: 105px; left: 147px; top: 18px;}
.sughad {width: 92px; height: 93px; left: 291px; top: 5px;}
.bodakdev {width: 125px; height: 124px; left: 395px; top: 27px;}
.shilaj {width: 99px; height: 99px; left: 30px; top: 180px;}
.maninagar {width: 114px; height: 114px; left: 133px; top: 139px;}
.bharuch {width: 99px; height: 99px; left: 324px; top: 135px;}
.satellite {width: 137px; height: 138px; left: auto; right: 56px; top: 162px;}
.bopal {width: 94px; height: 95px; left: 57px; top: 349px;}
.bhadaj {width: 90px; height: 91px; left: auto; right: 89px; top: 322px;}
.mehsana {width: 106px; height: 106px; left: auto; right: 13px; top: 390px;}
.sarkhej {width: 124px; height: 124px; right: 148px; left: auto; top: 26px;}

.one {width: 29px; height: 29px; left: 386px; top: 0px;}
.two {width: 34px; height: 35px; left: 249px; top: 27px;}
.three {width: 23px; height: 23px; left: 67px; top: 146px;}
.four {width: 51px; height: 52px; left: 87px; top: 107px;}
.five {width: 35px; height: 34px; left: 353px; top: 96px;}
.six {width: 58px; height: 58px; left: auto; right: 86px; top: 91px;}
.seven {width: 30px; height: 30px; left: auto; right: 182px; top: 154px;}
.eight {width: 45px; height: 45px; left: 35px; top: 293px;}
.nine {width: 26px; height: 26px; left: 145px; top: 253px;}
.ten {width: 43px; height: 44px; left: 259px; top: 223px;}
.eleven {width: 29px; height: 29px; left: 321px; top: 246px;}
.twelve {width: 48px; height: 48px; left: 412px; top: 237px;}
.thirteen {width: 45px; height: 45px; left: 623px; top: 230px;}
.forteen {width: 52px; height: 52px; left: 183px; top: 295px;}
.fifteen {width: 52px; height: 52px; left: 450px; top: 294px;}
.sixteen {width: 28px; height: 28px; left: 566px; top: 308px;}
.seventeen {width: 35px; height: 34px; left: 256px; top: 385px;}
.eighteen {width: 26px; height: 27px; left: 466px; top: 393px;}
.nineteen {width: 32px; height: 32px; left: 611px; top: 356px;}
.twenty {width: 23px; height: 24px; left: 75px; top: 448px;}
.twenty_one {width: 41px; height: 40px; left: 190px; top: 446px;}
.twenty_two {width: 27px; height: 26px; left: 484px; top: 450px;}

.lg {background-color: #a6ce39;}
.lightgreen_one {width: 31px; height: 30px; left: 106px; top: 67px;}
.lightgreen_two {width: 76px; height: 75px; left: 246px; top: 98px;}
.lightgreen_three {width: 30px; height: 30px; left: 584px; top: 136px;}
.lightgreen_four {width: 29px; height: 29px; left: 263px; top: 187px;}
.lightgreen_five {width: 37px; height: 37px; left: 429px; top: 189px;}
.lightgreen_six {width: 34px; height: 34px; left: 206px; top: 256px;}
.lightgreen_seven {width: 36px; height: 36px; left: 369px; top: 278px;}
.lightgreen_eight {width: 66px; height: 66px; left: 109px; top: 286px;}
.lightgreen_nine {width: 65px; height: 65px; left: 598px; top: 285px;}
.lightgreen_ten {width: 49px; height: 50px; left: 0; top: 343px;}
.lightgreen_eleven {width: 50px; height: 50px; left: 204px; top: 348px;}
.lightgreen_twelve {width: 52px; height: 52px; left: 404px; top: 334px;}
.lightgreen_thirteen {width: 57px; height: 56px; left: 122px; top: 442px;}
.lightgreen_forteen {width: 38px; height: 38px; left: 434px; top: 452px;}

footer {background-color: #431e12; padding: 20px 0;}
footer p {margin: 0; font-size: 90%; font-weight: 300; text-align: center; color: #fff;}

#mobile-menu-icon {top: 45px;}
map area:hover {background-color: #ffcc00;}

@media only screen and (min-width:320px) and (max-width:767px){
    #logo{margin: 0 auto 15px; max-width: 200px;}
    #logo img{margin: 0 auto;}
    .tagline {margin-top: 0; text-align: center !important;}
    .tree-container {left: 50%; transform: translateX(-50%) scale(0.45);}
    .branch a { font-size: 120%; color: #000; }
}

@media only screen and (min-width: 1440px) and (max-width: 1920px) {
    .tree-container {transform: scale(1);}
}