*{
        box-sizing: border-box;
            
    }

        .head_of_bod{
            background-color: tomato;
            color: #9EB4CC;
            padding: 20px;
            text-align: center;
            position: relative;
            margin-top: 100px;
            
        }

        
        .bod_heading{      
        text-align: center;
        color:white;
        font-size: 4rem;
        

        
    }


        .main{
            
            padding: 2% 5%;
            background-color: whitesmoke;
            height: 100%;
            align-content: center;
            
            
        }
        .main .box-container .box h1{
                font-style: normal;
                font-family: "Times New Roman", Times, serif;
                font-weight: bold;
                font-size: 3rem;
                text-align: center;
                color:#111;
                padding:2rem 0;
                line-height: 1;

                }


        .main .box-container .box p{
                font-style: normal;
                font-family: "Times New Roman", Times, serif;
                font-weight: normal;
                font-size: 2.5rem;
                font-variant: normal;
                text-align: left;
                text-justify: inter-word;
                text-transform: none;
                color:#111;
                padding:2rem 0;
                line-height: 1;

                }

        
        /* ---- Layout Containers ---- */

            

        /* For desktop: */
        .column-1 {width: 8.33%;}
        .column-2 {width: 16.66%;}
        .column-3 {width: 25%;}
        .column-4 {width: 33.33%;}
        .column-5 {width: 41.66%;}
        .column-6 {width: 50%;}
        .column-7 {width: 58.33%;}
        .column-8 {width: 66.66%;}
        .column-9 {width: 75%;}
        .column-10 {width: 83.33%;}
        .column-11 {width: 91.66%;}
        .column-12 {width: 100%;}


        [class*="column-"] {
            float: left;
            padding: 100px;
        }

        .row::after{
            content: '';
            clear: both;
            display: table;
        }

        @media only screen and (max-width: 768px) {
            /* For mobile phones: */
            [class*="column-"] {
                width: 100%;
            }

            

        }


*{
        box-sizing: border-box;
            
    }

a {
    text-decoration: none;
}



/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Layout Containers ---- */

.container,
.content {
    width: 100%;
    
    padding: 1% 5%;
    background-color: whitesmoke;
    height: 200px;
    display: flex;
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;
    

}
.container {
    width: 100%;
    max-width: 100%;
    padding: 0 10em 9em;
    background: whitesmoke;
    height: 300px;  
    
}

.column {
  float: left;
  width: 33.3%;
  padding: 75px;

}

.cube-container {
    max-width: 300px;
    text-align: center;
    margin: 2rem auto 4.5em;
}
/* ---- Page Elements ---- */


.logo {
    width: 100%;
    margin-bottom: .4em;
    cursor: pointer;
}

/* ---- Photo Overlay ---- */

.photo-desc {
    font-size: .85em;
    color: white;
    padding: 1.1em 1em 0;
    background: #0c2029;
}
/* ---- Float clearfix ---- */

.clearfix::after {
    content: " ";
    display: table;
    clear: both;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {
    .cube-container {
        float: left;
        margin-left: 16.6%;
    }
}
@media (min-width: 1025px) {
    .cube-container:first-child {
        margin-left: 0;
    }
    .cube-container:last-child{
        float: right;
    }
    .content {
        max-width: 900px;
        margin: auto;
        padding-right: 50px;
    }
}

@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}

/* ================================= 
  Button Transitions
==================================== */



/* ================================= 
  Photo 3D Transforms & Transitions
==================================== */

.cube-container {
box-shadow: 0 18px 40px 5px rgba(0,0,0,.4);
  perspective: 800px;
  column-count: ;
}

.photo-cube {
transition: transform 2s ease-in-out; 
  width: 220px;
  height: 200px; 
  transform-style: preserve-3d;
}

.photo-cube:hover {
transform: rotateY(-270deg);
}

.front,
.back,
.left,
.right {
width: 100%;
height: 100%;
display: block;
position: absolute;

}

.front {
transform: translate3d(0,0,110px);
}

.back {
transform: translateZ(-110px) rotateY(270deg);
  transform-origin: center left;
}

.left {
transform: rotateY(-270deg) translate3d(110px, 0, 0);
  transform-origin: top right;
}

.right {
transform: translateZ(-110px) rotateY(180deg);
 }






.adv-panel .adv-container{

            width: 100%;
            height: 80px;
            
            border: 28px solid black;
            padding: -6px;
            text-align: center, center ;
}


 .adv-panel .adv-container .adv-box h1{
                font-style: normal;
                font-family: "Times New Roman", Times, serif;
                font-weight: bold;
                font-size: 3rem;
                font-color: black;
                text-align: center;
                color:whitesmoke;
                background-color: black;
                padding: -5rem 0;
                line-height: 1;
                border: none;

                }



.adv-panel .adv-container .adv-box span{
    color:black;
    background:var(--light-red);
    border-radius: 5rem;
    padding:1rem 3rem;
}