/* css variables */ 
@import url(./variables.css);

/* import global styling */ 
@import url(./global.css);

/*my photo */

/* start navigation */ 


/*test*/

/* Add a black background color to the top navigation */
.topnav {
  background-color: #201094;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 45px 16px;
  text-decoration: none;
  font-size: 25px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #ebc634;
  color: white;
}

/*test active*/
a.active{
    margin:35px;
    padding: 15px 26px;
}



/*test end*/

/*
.header_area .main-menu .navbar .navbar-brand{
    padding: 0 2rem 0 5rem;
   
}

.header_area .main-menu .navbar{
    padding: 1rem 2rem ;
}

.header_area .main-menu .nav-item .nav-link{
    font: normal 500 15px/2px var(--roboto);
    text-transform: uppercase;
    padding: 1.7rem;
    color: var(--title-color);
}

.header_area .main-menu .navbar-nav .active a{
    background-color:#ffffff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header_area .main-menu .navbar-nav a:hover{
    background: var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header_area .main-menu .navbar img{
    width: 100px;
}

/* end navigation */ 


/* Topic */ 
.site-main .topic h1 {
    background-color: aliceblue;

    font-size: 42px;
    line-height: 52px;
    font-weight: 700;
    margin: 1.5rem 1rem;
    font-family: var(--roboto);
}

/* end Topic */ 


/* Clock */ 


.clockbox,
#clock {
    width: 75px;
}

/* Clock styles */
.circle {
    fill: none;
    stroke: #000;
    stroke-width: 9;
    stroke-miterlimit: 10;
}

.mid-circle {
    fill: #000;
}
.hour-marks {
    fill: none;
    stroke: #000;
    stroke-width: 9;
    stroke-miterlimit: 10;
}

.hour-arm {
    fill: none;
    stroke: #000;
    stroke-width: 17;
    stroke-miterlimit: 10;
}

.minute-arm {
    fill: none;
    stroke: #000;
    stroke-width: 11;
    stroke-miterlimit: 10;
}

.second-arm {
    fill: none;
    stroke: #000;
    stroke-width: 4;
    stroke-miterlimit: 10;
}

/* Transparent box ensuring arms center properly. */
.sizing-box {
    fill: none;
}

/* Make all arms rotate around the same center point. */
/* Optional: Use transition for animation. */
#hour,
#minute,
#second {
    transform-origin: 300px 300px;
    transition: transform .5s ease-in-out;
}


/* End Clock styles */

/* Dropdown Button */
.dropbtn {
  background-color: red;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #ffffff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ffffff;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #ffffff;}

/* Banner Area */ 
/* 
.site-main .site-banner {
    background: url(../img/banner/home-banner.png) no-repeat 0% 50%;
} */

.site-main .site-banner .site-title h3{
    padding-top: 10%;
    font-weight: 500;
}

.site-main .site-banner .site-title h3::after{
    content: " ";
    height: 2px;
    width: 18vw;
    background: black;
    display: inline-block;
    margin-left: 5%;
    transform: translateY(-10px);
}

.site-main .site-banner .site-title h1{
    font-size: 5rem;
}

.site-main .site-banner .site-title h4{
    font-size: 1.5rem;
}

.site-main .site-banner .banner-image > img{
    padding: 7rem 0;
    width: 90rem;
}
.first-button{
    padding: 0.8rem 0.85rem;
}

/* End Banner Area */ 


/* Services Area */ 

.site-main .services-area{
    padding: 2rem 0;
}

.site-main .services-area .services-title{
    padding: 0 14rem;
}

.site-main .services-area .services-title h1{
    font-size: 35px;
}
.site-main .services-area a{
    text-decoration: none ;
    
}

/* .site-main > .services-area .services .last-item {
    margin: 0 auto !important;
} */
.site-main > .services-area .services{
    background: rgba(248, 252, 253, 0.973);
    padding: 2rem 0.5rem;
    width: 20rem;
    margin: 1.5rem auto ;
    transition: box-shadow .7s ease;
    cursor: pointer;
}

.site-main > .services-area .services:hover{
box-shadow: var(--box-shadow);
}

.site-main .services-area .container .services-img img{
    width: 150px;
}

/* End Services Area */



/* Start About Area */ 

.site-main .about-area{
    padding: 8rem 5rem;
}

.site-main .about-area .about-title h2 > span{
    display: block;
    font: normal bold 49px/ 60px var(--roboto);
    letter-spacing: 21px;

}

.site-main .about-area .about-title .paragraph > p{
    padding: .4rem 0;
    margin-right: 8rem;
}

.site-main .about-area .about-image{
    margin-left: 25%;
}
/* End About Area */ 




/* about me Area */ 

.site-main .about-area .about-title p {
    padding: 1rem 7rem;
}

.site-main .about-area .client {
    background: #ffffff10;
    box-shadow: var(--box-shadow);
    margin: 3rem 0;
}

.site-main .about-area .client .client-img{
    padding: 2rem;
}

.site-main .about-area .client .about-client{
    padding-top: 2px;
}

.site-main .about-area .client .about-client h4{
    font: normal 500 21px/20px var(--roboto);
}

.site-main .about-area .client .about-client p{
    font-size: 14px;
}

.site-main .about-area .owl-carousel .owl-item {
    display: flex;
    justify-content: center;
    padding: 0 1.5rem;
}

.site-main .about-area .owl-carousel .owl-dots .active span {
    background: var(--primary-color);
    width: 12px;
    height: 12px;
    color: var(--primary-color2);
}


/* End  about me Area */ 


/* subscribe me Area */ 

.site-main .subscribe-us-area .subscribe {
    background: url(../img/subscribe-bg.png) no-repeat;
    padding: 5rem 0;
    margin: 3rem auto;
}

.site-main .main-form label, input, textarea {
    display: block;
    }
    
    .site-main .main-form input, textarea{
     width: 100%;
    }

    .site-main .subscribe-us-area .subscribe h4{
        font: normal 500 30px/30px var(--roboto);
        color: whitesmoke;
        margin: 1rem;
    }
    .site-main .subscribe-us-area .subscribe label{
        font: normal 500 20px/20px var(--roboto);
        color: whitesmoke;
    }

.site-main .subscribe-us-area .subscribe form input, textarea{
width: 400px;
padding: 0 1rem;
border: 1px solid whitesmoke;
background: transparent;
color: white;
font: normal 300 9/13px var(--roboto);
margin-bottom: 2.5%;
}

.site-main .subscribe-us-area .subscribe form input:hover, textarea:hover{
    background: white;
    color: black;
    }
.site-main .subscribe-us-area .subscribe form button{
    background: transparent;
    border: 1px solid white;
    background-color:   white;
    color: blue;
    margin-left: 0px !important;
    margin-top: 1rem;
    padding: 0.5rem 2rem;
}


.site-main .subscribe-us-area .subscribe form button:hover{
    background: black;
    color: white;
}
/* End subscribe me Area */ 



/* footer Area */ 

footer.footer-area {
    padding: 5rem 0;
    background: url(../img/footer-bg.png) no-repeat;
}

footer.footer-area .social h5{
    font: normal 500 23px/30px var(--roboto);
}

footer.footer-area .social a > i{
    font-size: 32px;
    padding: 2rem;
    color: var(--primary-color);
}

footer.footer-area .social a:hover > i{
color: var(--primary-color2);
}

.footer-area .contact-id {
    margin-bottom: 40px;
    font-family: var(--roboto);
}

/* End footer Area */

/*added blog formatting */

.fbblog{

    margin: 120px;

}

.bloghead {

    color: blue;
    font-size: 40px;
    text-decoration: underline;

}