body{
            background-color: linear-gradient(180deg,hsla(210,17%,95%,0.464),hwb(120 2% 5%));
        }
/* ==================Navigation bar ============================ */
        /* Custom CSS for AgroTrends Navbar */
        
        .brand img{
            width: 120px;
            height: 70px;
            border-radius: 50%;
            
        }
        .brand:hover{
            background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTh0TrcifL8ssnPrYkWqzpo47OeCoiMl6hwNw&usqp=CAU');
            
        }
        .collapse{
            
            color: white;
        }
        .navbar-expand-lg{
            background-color:rgb(22, 54, 30);
        }
        
        .navbar-dark .navbar-nav .nav-link {
            color: #fff; /* Text color */
        }
        .navbar-dark .navbar-nav .nav-link:hover {
            color: #f8f9fa; /* Text color on hover */
        }
        .navbar-dark .navbar-nav .dropdown-menu {
            background-color: #716f71; /* Dropdown background color */
        }
        .navbar-dark .navbar-nav .dropdown-item {
            color: #fff; /* Dropdown item text color */
        }
        .navbar-dark .navbar-nav .dropdown-item:hover {
            background-color: #a5eeb6; /* Dropdown item background color on hover */
        }

        /*
        .nav-item{
            box-shadow: #a5eeb6 0px 0px 10px -2px; / Box shadow for nav items/
        }*/
        .nav-item:hover{
            background-color: #4CAF50;
        }
        
/* ===================== Slider ========================*/
        /* Slider container */
        .carousel-item img {
            height: 400px; /* 50% of viewport width */
            width: 100%;
            object-fit: cover; /* This ensures the image covers the entire area */
        }
        
        .centered{
            position:absolute;
            top: 15%;
            left: 45%;
            transform: translate( -50%, -50%);
            color: rgb(31, 230, 21);
        }
        .text{
            text-align: center;
            padding-top: 20px;
        }

        .t { font: 400 1em/1.5 "Neuton"; background: #090d00; color: rgba(255,255,255,.25); text-align: center; margin: 0 }


/* ============== AgroTrends Logo =============== */
        p4 {
            text-transform: uppercase;
            letter-spacing: .5em;
            display: inline-block;
            border: 4px double rgba(255,255,255,.25);
            border-width: 4px 0;
            padding: 1.5em 0em;
            position: absolute;
            top: 18%;
            left: 50%;
            width: 40em;
            margin: 0 0 0 -20em;
  
            span {

                font: 700 4em/1 "Oswald", sans-serif;
                letter-spacing: 0;
                padding: .25em 0 .325em;
                display: block;
                margin: 0 auto;
                text-shadow: 0 0 80px rgba(255,255,255,.5);

/* Clip Background Image */

	  background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
	  -webkit-background-clip: text;
	  background-clip: text;

/* Animate Background Image */

	  -webkit-text-fill-color: transparent;
	  -webkit-animation: aitf 80s linear infinite;

/* Activate hardware acceleration for smoother animations */

	  -webkit-transform: translate3d(0,0,0);
	  -webkit-backface-visibility: hidden;

  }
}

/* Animate Background Image */

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

/* ===============About Journals ===================  */
        .title{
            color: #1ce423;
        }
        .about{
            padding: 20px 0 20px 0;
        }
        
        

 /* =====================Aims & Scope =================== */
        .img-box{
            justify-content: center;
            align-items: center;
        }
        
/* ==================Manuscript Preparation ======================*/
        .cd {
            
            margin: 0 auto;
            padding: 20px;
            
            padding-left: 200px;
            padding-right: 200px;
        }
        
        .br {
            text-align: center;
        }
        
        p {
            padding-left: 20px;
            padding-right: 20px;
        }
        
        .button-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
        
        .button {
            flex: 1 0 auto;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            text-decoration: none;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: box-shadow 0.3s;
        }
        
        .button:hover {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        
        

      
 /*================== Editorial dashboard ======================== */
 .ed {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}

.containered {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.hed {
  text-align: center;
  margin-bottom: 30px;
}

.team-members {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.team-member {
  width: calc(50% - 20px); /* Two members per row */
  margin-bottom: 20px;
}

.carded {
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.carded img {
  width: 100px;
  height:100px;
  border-radius: 50%;
  
}

.detailsed {
  padding: 20px;
}

.detailsed h2 {
  margin-top: 0;
}

.detailsed p {
  margin: 5px 0;
}


/*============================================  leadership ===============================================*/

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 400px;
  height: 450px;
  
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  padding: 20px;
  margin: 20px;
}

.leader{
  padding: 60px 0 0 0;
}
/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  width: 350px;
  height: 350px;
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  text-align: center;
  
  
}
.flip-card-front, .flip-card-back ul{
list-style-type: none;
padding-left: 0; /* Remove default padding */
}
.row{
  justify-content: center;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  color: green;
    text-shadow: 1px 1px 2px greenyellow;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background: linear-gradient(180deg,hsla(210,17%,95%,0.464),hwb(120 2% 5%));
  color: rgb(0, 0, 0);
  transform: rotateY(180deg);
  padding-top: 15px 0 0 0;
}

.align-items-center{
    padding: 10px 0 0 0 ;
    margin: 10px 0px 10px 0px;
   
}

.aboutus-heading{
    text-align: center;
    padding: 01%;
    font-size: 2rem;
    background-color: rgb(139, 224, 163);
}

.flip-card-front-name{
    text-align: center;
}


/* =======================Logo Slider ================================ */
        .slider1-container {
            overflow: hidden;
            width: 100%;
        }
        
        .slider {
            white-space: nowrap;
            animation: scroll 10s linear infinite;
            padding-bottom: 30px;
        }
        
        .slider img {
            display: inline-block;
            transition: transform 0.3s ease; /* Added transition property */
        }
        
        /* Added hover effect */
        .slider img:hover {
            transform: scale(1.1); /* You can adjust the scale factor as needed */
        }
        
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }

        .sp{
            background-color: #60e865;
            text-align: center;
            padding: 15px;
        }

        

/*================================= Footer==============================   */
        
.col_white_amrc { color:black;}
footer { width:100%; background-color:rgb(114, 201, 83); min-height:250px; padding:10px 0px 25px 0px ;}
.pt2 { padding-top:40px ; margin-bottom:20px ;}
footer p { font-size:13px;  padding-bottom:0px; margin-bottom:8px; color: black;}
.mb10 { padding-bottom:15px ; color:black;}
.footer_ul_amrc { margin:0px ; list-style-type:none ; font-size:14px; padding:0px 0px 10px 0px ; }
.footer_ul_amrc li {padding:0px 0px 5px 0px;}
.footer_ul_amrc li a{color:black;}
.footer_ul_amrc li a:hover{ color:#fff; text-decoration:none;}
.fleft { float:left;}
.padding-right { padding-right:10px; }

.footer_ul2_amrc {margin:0px; list-style-type:none; padding:0px;}
.footer_ul2_amrc li p { display:table; }
.footer_ul2_amrc li a:hover { text-decoration:none;}
.footer_ul2_amrc li i { margin-top:5px;}

.bottom_border { border-bottom:1px solid #323f45; padding-bottom:20px;}
.foote_bottom_ul_amrc {
	list-style-type:none;
	padding:0px;
	display:table;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}
.foote_bottom_ul_amrc li { display:inline;}
.foote_bottom_ul_amrc li a { color:black; margin:0 12px;}

.social_footer_ul { display:table; margin:15px auto 0 auto; list-style-type:none;  }
.social_footer_ul li { padding-left:20px; padding-top:10px; float:left;}
.social_footer_ul li a { color:white; border:1px solid white; padding:8px;border-radius:50%;}
.social_footer_ul li i {  width:20px; height:20px; text-align:center;}
   

/*======================Dropdown pages=============================*/

/*================= Policy Details =============================*/

/* Custom Styles */
.sg{
    background-image: url('/images/back.jpeg');
    text-align: center;
    padding: 40px;
    color: white;
  }
  
  /* Header */
  .text-center1{
    color: green;
    text-shadow: 1px 1px 2px greenyellow;
  
  }
  .text-center1:hover{
    color: rgb(109, 132, 109);
    
  
  
  }
    
    /* Main Content */
    .hero {
      background-color: #f8f9fa;
      padding: 50px 0;
      
    }
    
    .features {
      padding: 50px 0;
    }
    
    .feature {
      margin-bottom: 30px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }
    
    .feature h3 {
      color: #007bff;
    }




    /*=================== Duties of Author===================*/

    .page-header{
        text-align: center;
        color: green;
        text-shadow: 1px 1px 2px greenyellow;
    }
    /* Timeline */
    .timeline {
        list-style: none;
        padding: 20px;
        position: relative;
        &:before {
            top: 40px;
            bottom: 0;
            position: absolute;
            content: " ";
            width: 3px;
            background-color: #82db8e;
            left: 50%;
            margin-left: -1.5px;
        }
        .timeline-item {
            margin-bottom: 20px;
            position: relative;
            &:before,
            &:after {
                content: "";
                display: table;
            }
            &:after {
                clear: both;
            }
            .timeline-badge {
                color: #9ddbb1;
                width: 54px;
                height: 54px;
                line-height: 52px;
                font-size: 22px;
                text-align: center;
                position: absolute;
                top: 18px;
                left: 50%;
                margin-left: -25px;
                background-color:"@gray-dark";
                border: 3px solid "@body-bg";
                z-index: 100;
                border-top-right-radius: 50%;
                border-top-left-radius: 50%;
                border-bottom-right-radius: 50%;
                border-bottom-left-radius: 50%;
                i, .fa, .glyphicon {
                    top: 2px;
                    left: 0px;
                }
                &.primary {
                    background-color: "@brand-primary";
                }
                &.info {
                    background-color: "@brand-info";
                }
                &.success {
                    background-color: "@brand-success";
                }
                &.warning {
                    background-color: "@brand-warning";
                }
                &.danger {
                    background-color: "@brand-danger";
                }
            }
            .timeline-panel {
                position: relative;
                width: 46%;
                float: left;
                right: 16px;
                border: 1px solid "@gray-light";
                background: "@body-bg";
                border-radius: 2px;
                padding: 20px;
                -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
                box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
                &:before {
                    position: absolute;
                    top: 26px;
                    right: -16px;
                    display: inline-block;
                    border-top: 16px solid transparent;
                    border-left: 16px solid "@gray-light";
                    border-right: 0 solid "@gray-light";
                    border-bottom: 16px solid transparent;
                    content: " ";
                }
                .timeline-title {
                    margin-top: 0;
                    color: inherit;
                    color: green;
                    text-shadow: 1px 1px 2px greenyellow;
                }
                
                
                .timeline-body > p,
                .timeline-body > ul {
                    margin-bottom: 0;
                }
                .timeline-body > p + p {
                    margin-top: 5px;
                }
            }
        }
        .timeline-item:last-child {
            &:nth-child(even) {
                float: right;
            }
        }
        .timeline-item:nth-child(even) {
            .timeline-panel {
                float: right;
                left: 16px;
                &:before {
                    border-left-width: 0;
                    border-right-width: 14px;
                    left: -14px;
                    right: auto;
                }
            }
        }
    }
    .timeline-horizontal:extend(.timeline) {
        list-style: none;
        position: relative;
        padding: 20px 0px 20px 0px;
        display: inline-block;
        &:before {
            height: 3px;
            top: auto;
            bottom: 26px;
            left: 56px;
            right: 0;
            width: 100%;
            margin-bottom: 20px;
        }
        .timeline-item {
            display: table-cell;
            height: 280px;
            width: 20%;
            min-width: 320px;
            float: none !important;
            padding-left: 0px;
            padding-right: 20px;
            margin: 0 auto;
            vertical-align: bottom;
            .timeline-panel {
                top: auto;
                bottom: 64px;
                display: inline-block;
                float: none !important;
                left: 0 !important;
                right: 0 !important;
                width: 100%;
                margin-bottom: 20px;
                &:before {
                    top: auto;
                    bottom: -16px;
                    left: 28px !important;
                    right: auto;
                    border-right: 16px solid transparent !important;
                    border-top: 16px solid "@gray-light" !important;
                    border-bottom: 0 solid "@gray-light" !important;
                    border-left: 16px solid transparent !important;
                }
            }
            &:before,
            &:after {
                display: none;
            }
            .timeline-badge {
                top: auto;
                bottom: 0px;
                left: 43px;
            }
            
        }
    }

    /*======================Duties of Reviewers=======================*/

    .duti {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }
      .d{
        text-align: center;
        color: green;
      text-shadow: 1px 1px 2px greenyellow;
      padding: 20px 0 20px 0;
      }
    
      .containerd {
        display: flex;
        flex-wrap: wrap;
        
      }
      .containerd h2{
      color: green;
      text-shadow: 1px 1px 2px greenyellow;
      }
      .paragraphp {
        flex: 1;
        padding: 70px; 
      }
    
      .image {
        flex: 1;
        text-align: center;
        padding: 20px;
    
        
      }
    
      img {
        max-width: 100%;
        height: auto;
      }
    
      @media (max-width: 768px) {
        .paragraph,
        .image {
          flex: 100%;
        }
    }



    /*========================Ethical Guideline===========================*/

    
  /* Custom CSS */
  .sub {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  .container23 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
  }
  h1, h2, h3 {
    color: #333;
  }
  p {
    color: #666;
  }
  /* Header Styles */
  .header23 {
    background-color: #f8faf9;
    padding: 20px 0;
    text-align: center;
  }
  /* Services Section Styles */
  .services {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .service12 {
    width: 300px;
    margin: 10px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: rgb(160, 239, 107);
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  .service12:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
  }
  .service12 h3 {
    color: #333;
  }
  .service12 p {
    display: none; /* Initially hide the content */
  }
  .show-content {
    display: block !important; /* Show the content on click */
  }


/*================== Conference Procedding======================*/

.sw {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #d7e0e9;
  }
  .container1 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    
  }
  .p{
    text-align: center;

  }
  h1, h2, h3 {
    color: #333;
  }
  p {
    color: #666;
  }
  /* Header Styles */
  header {
    /*background-color: #f8faf9;*/
    
    
    text-align: center;
  }
  /* Services Section Styles */
  .services {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
   
    
   
  }
  .service123 {
    width: 300px;
    /*background-color: #fff;*/
    margin: 10px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    transition: transform 0.3s ease;
    
  }
  .service123:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
  }
  
  .service123 h3 {
    color: #333;
  }


/*====================== Buy Journal Online================*/


.sub{
    background-image: url('https://images.pexels.com/photos/8022599/pexels-photo-8022599.jpeg');
    background-size: cover;
    -webkit-animation: slidein 100s;
    animation: slidein 100s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@-webkit-keyframes slidein {
    from { background-position: top; background-size: 3000px; }
    to { background-position: -100px 0px; background-size: 2750px; }
}

@keyframes slidein {
    from { background-position: top; background-size: 3000px; }
    to { background-position: -100px 0px; background-size: 2750px; }
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(75, 75, 250, 0.3);
    border-radius: 3px;
}

.center h1 {
    text-align: center;
    color: white;
    font-family: 'Source Code Pro', monospace;
    text-transform: uppercase;
}


.sub {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container123{
max-width: 1200px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1, h2, h3 {
color: #333;
}
p {
color: #666;
}
/* Header Styles */
.header1 {
/*background-color: #f8faf9;*/

padding: 20px 0;
text-align: center;
}
/* Services Section Styles */
.services {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
justify-content: center;


}
.service {
width: 300px;
/*background-color: #fff;*/
margin: 10px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: wheat;
transition: transform 0.3s ease;
}
.service:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transform: scale(1.1);
}

.service h3 {
color: #333;
}
/* Contact Section Styles */
.contact {
text-align: center;
margin-top: 40px;
padding-bottom: 20px;
}


.z{
color: rgb(248, 161, 54);
}

.contact button {
padding: 10px 20px;
background-color: green;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.contact button:hover {
background-color: green;
}



/*==================== Artical Processing Charges(APC)==================*/

.a{
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    
  }
  .containera {
    margin-top: 50px;
  }
  .card {
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin:20px 40px 40px 40px;
  }
  .card-headera {
    background-color: #00b327;
    color: #ffffff;
    border-radius: 10px 10px 0 0;
    padding: 10px 0 10px 0;
  }
  .card-body {
    background-color: #ffffff;
    border-radius: 0 0 10px 10px;
  }
  .btn-primary {
    background-color:#00b327;
    border-color: #18b806;
  }
  .btn-primary:hover {
    background-color: #00b330;
    border-color: #0056b3;
  }


  /*====================== Journal Subscription=========================*/

  /* Custom CSS */
.abcd{
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
  }
  .container12 {
    margin-top: 50px;
    
    
  }
  .h{
    text-align: center;
    padding: 25px 0 30px 0;
  }

  .c{
    padding: 0 10px 0 10px;
  }
  .jumbotron {
    background-color: #ffffff;
    color: #ffffff;
    padding: 60px;
    border-radius: 20px;
    padding-left: 40px;
    padding-bottom: 40px;
  }
  .jumbotron h1, .jumbotron p {
    text-align: center;
  }
  .card {
    transition: all 0.3s ease;
    border: none;
  }
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
  }
  .card-title {
    font-weight: bold;
    font-size: 1.2rem;
    
  }
  .card-text {
    font-size: 1rem;
  }
  .btn-primary {
    background-color:#00b327;
     
    border-color: #00ff59;
    transition: all 0.3s ease;
  }
  .btn-primary:hover {
    background-color: #00ff51;
    border-color: #67fa06;
  }
  .btn{
    background-color: 1px 1px 2px greenyellow;
  }
  .jumbot{
    text-align: center;
    padding:40px 0 40px 0;
    color: green;
    text-shadow: 1px 1px 2px greenyellow;
  }
.row{
  padding: 0 30px 0 30px;
}


/*======================== Contact ==========================*/

.s {
 
    padding-bottom: 40px;
    padding-top: 40px;
    
    
  }
  .contact-section {
    background-color: #ffffff;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    
    
  }
  .contact-section:hover{
    transform: scale(1.1);
  }
  
  h2 {
    color: #343a40;
  }
  .contact-info1 {
    margin-top: 30px;
  }
  .contact-info1 p {
    margin-bottom: 10px;
    font-size: 18px;
  }
  .contact-info1 a {
    color: #007bff;
    text-decoration: none;
  }
  .contact-info1 a:hover {
    text-decoration: underline;
  }

.b{
    padding-top: 30px;
}


/*======================== Registration =====================*/


/* Custom styles for AgroTrends */
.reg {
    font-family: 'Arial', sans-serif;
    background-color: #f3f7f7; /* Light blue-gray background */
  
    color: #333; /* Dark gray text color */
}

h1, h2, h3 {
    color: #006400; /* Dark green headings */
}

.form-group {
    margin-bottom: 20px;
}

input[type="text"],
input[type="email"],
select {
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #ccc; /* Light gray border */
}

button {
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: bold;
    background-color: #006400; /* Dark green button */
    color: #fff; /* White text color */
    border: none;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #004d00; /* Dark green on hover */
}

hr {
    border-color: #ccc;
    margin-top: 40px;
}

small {
    color: #666;
    font-size: 14px;
}

.registration-form {
    width: 40%; /* Adjust form width */
    float: left; /* Float the form to the left */
    margin-right: 20px; /* Add margin to separate from the image */
    padding: 20px;
    border-radius: 15px;
    background-color: #fff; /* White background */
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); /* Box shadow */
}

.registration-image {
    float: right; /* Float the image to the right */
    width: 50%; /* Adjust image width */
    border-radius: 15px; /* Add rounded corners to the image */
    overflow: hidden; /* Hide overflow content */
    position: relative; /* Position relative for child elements */
}

.registration-image img {
    width: 100%; /* Ensure image fills container */
    transition: transform 0.5s ease; /* Add animation transition */
}

.registration-image:hover img {
    transform: scale(1.1); /* Scale up image on hover */
}

.registration-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    transition: background 0.5s ease; /* Add animation transition */
    opacity: 0; /* Initially invisible */
}

.registration-image:hover::before {
    opacity: 1; /* Show overlay on hover */
}

.registration-image:hover::after {
    content: 'Click to Enlarge';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    transition: opacity 0.3s ease; /* Add animation transition */
    opacity: 1; /* Show text on hover */
}

.registration-image::after {
    content: '';
    opacity: 0; /* Initially invisible */
}
.clearfix{
    padding-top: 30px;

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

footer {
    margin-top: 20px;
    text-align: center;
}
.clearfix{
    padding-left: 30px;
}


/*=========================== Requirement Manuscript ========================*/

.req{
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    
   
  }
  
  .re{
    /*background-image:url('back.jpg');*/
    color: green;
    text-shadow: 1px 1px 2px greenyellow;
    padding: 20px;
    text-align: center;
  }
  
  .na {
    display: flex;
    justify-content: space-around;
    background-color: green;
    padding: 10px 0;
  }
  
  .na a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  
  
  
  .head {
    padding: 20px;
    background-color: #fff;
    margin: 20px;
    border-radius: 5px;
    padding-right:100px;
    padding-left:100px;
  
    
  }
  #title,#abstract,#text,#reference{
    line-height:1.6;
    
  }
  .Ms{
    text-decoration:underline;
    text-decoration-color:green;
    color: green;
    text-shadow: 1px 1px 2px greenyellow;
    
  
  }
  .Ms:hover{
    text-decoration-line:underline;
    text-decoration-color:green;
    text-decoration-style:solid;
    
  }
  
  .he{
    padding-left:200px;
    padding-right:200px;
  }



/*=========================== Style Of Citation ========================*/
html, body, p, a, h1, h2, pre, code, section, header, div {
    margin: 0;
    padding: 0;
    border: 0;
  }
  /* Basic */
  body {
    font: normal 400 18px/22px "Abel", "Arial", sans-serif;
    background-color: #ebebeb;
    color: #000000;
  }
  p {
    margin-bottom: 20px;
  }
  h1 {
    font: bold 700 32px/38px "Sintony", "Arial", sans-serif;
    margin-bottom: 14px;
  }
  pre, code {
    font: normal 400 18px/22px "Oxygen Mono", "Courrier", monospace;
  }
  
  /* Classes */
  .box {
    width: 90%;
    text-align: center;
    margin: 20px auto;
    margin-bottom: 30px;
    padding: 50px 15px;
    background-color: #ced7ef;
    color: rgb(0, 0, 0);
    vertical-align: middle;
  }
  .basic-drop-shadow {
    box-shadow: 0 0 10px;
  }
  .inner-shadow {
    box-shadow: inset 0 0 10px;
  }
  .offset-bottom-right-shadow {
    box-shadow: 5px 5px 10px;
  }
  .offset-top-left-shadow {
    box-shadow: -5px -5px 10px;
  }
  .inset-property-box-shadow {
    box-shadow: inset 0 0 5px 5px olive;
  }
  .no-inset-property-box-shadow {
    box-shadow: 0 0 5px 5px olive;
  }
  .horizontal-offset-box-shadow {
     box-shadow: 20px 10px;
  }
  
  
  .button:hover {
    background-color: #9dd2f3;
    transition: background 0.2s;
  }
  .button:focus, .a:focus {
    outline: none;
  }
  header, .demos {
    display:block;
    width: 100%;
    max-width: 8000px;
    margin: 40px auto; 
    text-align: center;
  }
  header {
    margin: 0px auto;
  }
  .h{
	padding-top: 15px;
  }
  .intro, pre, code {
    color: #acacac;
  }
  pre {
    margin-bottom: 60px;
    white-space: pre-wrap;
  }
  pre strong {
    font-style: normal;
    font-weight: 400;
    color: #06baba;
  }

  /*===================Information===================*/
  
  @import url('https://fonts.googleapis.com/css?family=Exo:400,700');

/*
	A. Mini Reset 
*/

.info {
	/* background-image: url('https://images.pexels.com/photos/8022599/pexels-photo-8022599.jpeg');*/
	 background-size: cover;
	 -webkit-animation: slidein 100s;
	 animation: slidein 100s;
	 -webkit-animation-fill-mode: forwards;
	 animation-fill-mode: forwards;
	 -webkit-animation-iteration-count: infinite;
	 animation-iteration-count: infinite;
	 -webkit-animation-direction: alternate;
	 animation-direction: alternate;
 }
 
 @-webkit-keyframes slidein {
	 from { background-position: top; background-size: 3000px; }
	 to { background-position: -100px 0px; background-size: 2750px; }
 }
 
 @keyframes slidein {
	 from { background-position: top; background-size: 3000px; }
	 to { background-position: -100px 0px; background-size: 2750px; }
 }
 
 .center {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 position: absolute;
	 margin: auto;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 left: 0;
	 background: rgba(75, 75, 250, 0.3);
	 border-radius: 3px;
 }
 
 .center h1 {
	 text-align: center;
	 color: white;
	 font-family: 'Source Code Pro', monospace;
	 text-transform: uppercase;
 }

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

* {
  margin: 0;
  padding: 0;
}

::before,
::after {
	content: "";
}

html,
body {
	height: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
}

html {
	font-size: 100%;
}

body {
	background:none;
	color: #34495e;
	font-family: 'Lato', 'Arial', sans-serif;
	font-weight: 400;
	line-height: 1.2;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: #2c3e50;
	text-decoration: none;
}

.btn {
	display: inline-block;
	text-transform: uppercase;
	border: 2px solid #2c3e50;
	margin-top: 100px; 
	font-size: 0.7em;
	font-weight: 700;
	padding: 0.1em 0.4em;
	text-align: center;
	-webkit-transition: color 0.3s, border-color 0.3s;
	-moz-transition: color 0.3s, border-color 0.3s;
	transition: color 0.3s, border-color 0.3s;
}

.btn:hover {
	border-color: #16a085;
	color: #16a085;
}

/* basic grid, only for this demo */

.align {
	clear: both;
	margin: 90px auto 20px;
	width: 100%;
	max-width: 1170px;
	text-align: center;
}

.align > li {
	width: 500px;
	min-height: 300px;
	display: inline-block;
	margin: 30px 20px 30px 30px;
	padding: 0 0 0 60px;
	vertical-align: top;
}

/* ///////////////////////////////////////////////////

HARDCOVER
Table of Contents

1. container
2. background & color
3. opening cover, back cover and pages
4. position, transform y transition
5. events
6. Bonus
	- Cover design
	- Ribbon
	- Figcaption
7. mini-reset

/////////////////////////////////////////////////////*/

/*
	1. container
*/

.book {
	position: relative;
	width: 160px; 
	height: 220px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/*
	2. background & color
*/

/* HARDCOVER FRONT */
.hardcover_front li:first-child {
	background-color: #eee;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* reverse */
.hardcover_front li:last-child {
	background: #fffbec;
}

/* HARDCOVER BACK */
.hardcover_back li:first-child {
	background: #fffbec;
}

/* reverse */
.hardcover_back li:last-child {
	background: #fffbec;
}

.book_spine li:first-child {
	background: #eee;
}
.book_spine li:last-child {
	background: #333;
}

/* thickness of cover */

.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
	background: #999;
}

/* page */

.page > li {
	background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
	border-radius: 0px 5px 5px 0px;
}

/*
	3. opening cover, back cover and pages
*/

.hardcover_front {
	-webkit-transform: rotateY(-34deg) translateZ(8px);
	-moz-transform: rotateY(-34deg) translateZ(8px);
	transform: rotateY(-34deg) translateZ(8px);
	z-index: 100;
}

.hardcover_back {
	-webkit-transform: rotateY(-15deg) translateZ(-8px);
	-moz-transform: rotateY(-15deg) translateZ(-8px);
	transform: rotateY(-15deg) translateZ(-8px);
}

.page li:nth-child(1) {
	-webkit-transform: rotateY(-28deg);
	-moz-transform: rotateY(-28deg);
	transform: rotateY(-28deg);
}

.page li:nth-child(2) {
	-webkit-transform: rotateY(-30deg);
	-moz-transform: rotateY(-30deg);
	transform: rotateY(-30deg);
}

.page li:nth-child(3) {
	-webkit-transform: rotateY(-32deg);
	-moz-transform: rotateY(-32deg);
	transform: rotateY(-32deg);
}

.page li:nth-child(4) {
	-webkit-transform: rotateY(-34deg);
	-moz-transform: rotateY(-34deg);
	transform: rotateY(-34deg);
}

.page li:nth-child(5) {
	-webkit-transform: rotateY(-36deg);
	-moz-transform: rotateY(-36deg);
	transform: rotateY(-36deg);
}

/*
	4. position, transform & transition
*/

.hardcover_front,
.hardcover_back,
.book_spine,
.hardcover_front li,
.hardcover_back li,
.book_spine li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.hardcover_front,
.hardcover_back {
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
}

.hardcover_front {
	-webkit-transition: all 0.8s ease, z-index 0.6s;
	-moz-transition: all 0.8s ease, z-index 0.6s;
	transition: all 0.8s ease, z-index 0.6s;
}

/* HARDCOVER front */
.hardcover_front li:first-child {
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.hardcover_front li:last-child {
	-webkit-transform: rotateY(180deg) translateZ(2px);
	-moz-transform: rotateY(180deg) translateZ(2px);
	transform: rotateY(180deg) translateZ(2px);
}

/* HARDCOVER back */
.hardcover_back li:first-child {
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.hardcover_back li:last-child {
	-webkit-transform: translateZ(-2px);
	-moz-transform: translateZ(-2px);
	transform: translateZ(-2px);
}

/* thickness of cover */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
	position: absolute;
	top: 0;
	left: 0;
}

/* HARDCOVER front */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before {
	width: 4px;
	height: 100%;
}

.hardcover_front li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.hardcover_front li:first-child:before {
	-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before {
	width: 4px;
	height: 160px;
}

.hardcover_front li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
}
.hardcover_front li:last-child:before {
	box-shadow: 0px 0px 30px 5px #333;
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
}

/* thickness of cover */

.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before {
	width: 4px;
	height: 100%;
}

.hardcover_back li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}
.hardcover_back li:first-child:before {
	-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before {
	width: 4px;
	height: 160px;
}

.hardcover_back li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
}

.hardcover_back li:last-child:before {
	box-shadow: 10px -1px 80px 20px #666;
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
}

/* BOOK SPINE */
.book_spine {
	-webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
	-moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
	transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
	width: 16px;
	z-index: 0;
}

.book_spine li:first-child {
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.book_spine li:last-child {
	-webkit-transform: translateZ(-2px);
	-moz-transform: translateZ(-2px);
	transform: translateZ(-2px);
}

/* thickness of book spine */
.book_spine li:first-child:after,
.book_spine li:first-child:before {
	width: 4px;
	height: 100%;
}

.book_spine li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.book_spine li:first-child:before {
	-webkit-transform: rotateY(-90deg) translateZ(-12px);
	-moz-transform: rotateY(-90deg) translateZ(-12px);
	transform: rotateY(-90deg) translateZ(-12px);
}

.book_spine li:last-child:after,
.book_spine li:last-child:before {
	width: 4px;
	height: 16px;
}

.book_spine li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
}

.book_spine li:last-child:before {
	box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
}

.page,
.page > li {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.page {
	width: 100%;
	height: 98%;
	top: 1%;
	left: 3%;
	z-index: 10;
}

.page > li {
	width: 100%;
	height: 100%;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	transform-origin: left center;
	-webkit-transition-property: transform;
	-moz-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	transition-timing-function: ease;
}

.page > li:nth-child(1) {
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	transition-duration: 0.6s;
}

.page > li:nth-child(2) {
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	transition-duration: 0.6s;
}

.page > li:nth-child(3) {
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.page > li:nth-child(4) {
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.page > li:nth-child(5) {
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	transition-duration: 0.6s;
}

/*
	5. events
*/

.book:hover > .hardcover_front {
	-webkit-transform: rotateY(-145deg) translateZ(0);
	-moz-transform: rotateY(-145deg) translateZ(0);
	transform: rotateY(-145deg) translateZ(0);
	z-index: 0;
}

.book:hover > .page li:nth-child(1) {
	-webkit-transform: rotateY(-30deg);
	-moz-transform: rotateY(-30deg);
	transform: rotateY(-30deg);
	-webkit-transition-duration: 1.5s;
	-moz-transition-duration: 1.5s;
	transition-duration: 1.5s;
}

.book:hover > .page li:nth-child(2) {
	-webkit-transform: rotateY(-35deg);
	-moz-transform: rotateY(-35deg);
	transform: rotateY(-35deg);
	-webkit-transition-duration: 1.8s;
	-moz-transition-duration: 1.8s;
	transition-duration: 1.8s;
}

.book:hover > .page li:nth-child(3) {
	-webkit-transform: rotateY(-118deg);
	-moz-transform: rotateY(-118deg);
	transform: rotateY(-118deg);
	-webkit-transition-duration: 1.6s;
	-moz-transition-duration: 1.6s;
	transition-duration: 1.6s;
}

.book:hover > .page li:nth-child(4) {
	-webkit-transform: rotateY(-130deg);
	-moz-transform: rotateY(-130deg);
	transform: rotateY(-130deg);
	-webkit-transition-duration: 1.4s;
	-moz-transition-duration: 1.4s;
	transition-duration: 1.4s;
}

.book:hover > .page li:nth-child(5) {
	-webkit-transform: rotateY(-140deg);
	-moz-transform: rotateY(-140deg);
	transform: rotateY(-140deg);
	-webkit-transition-duration: 1.2s;
	-moz-transition-duration: 1.2s;
	transition-duration: 1.2s;
}

/*
	6. Bonus
*/

/* cover CSS */

.coverDesign {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.coverDesign::after {
	background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
	background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
	background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.coverDesign h1 {
	color: #fff;
	font-size: 2.2em;
	letter-spacing: 0.05em;
	text-align: center;
	margin: 54% 0 0 0;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.coverDesign p {
	color: #f8f8f8;
	font-size: 1em;
	text-align: center;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.yellow {
	background-color: #f1c40f;
	background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
	background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
	background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
}

.blue {
	background-color: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);
	background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);
	background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%);
}

.grey {
	background-color: #f8e9d1;
	background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
	background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
	background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
}

/* Basic ribbon */

.ribbon {
	color: #fff;
	display: block;
	font-size: 0.7em;
	position: absolute;
	top: 11px;
	right: 1px;
	width: 40px;
	height: 20px;
	line-height: 20px;
	letter-spacing: 0.15em; 
	text-align: center;
	-webkit-transform: rotateZ(45deg) translateZ(1px);
	-moz-transform: rotateZ(45deg) translateZ(1px);
	transform: rotateZ(45deg) translateZ(1px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 10;
  &.new{
    background: #63c930;
    &:before,
    &:after{
      border-bottom: 20px solid #63c930;
    }
  }
  &.bestseller{
    background: #c0392b;
    &:before,
    &:after{
      border-bottom: 20px solid #c0392b;
    }
  }
  
    
}

.ribbon::before,
.ribbon::after{
	position: absolute;
	top: -20px;
	width: 0;
	height: 0;
	
	border-top: 20px solid transparent;
}

.ribbon::before{
	left: -20px;
	border-left: 20px solid transparent;
}

.ribbon::after{
	right: -20px;
	border-right: 20px solid transparent;
}

/* figcaption */

figcaption {
	padding-left: 40px;
	text-align: left;
	position: absolute;
	top: 0%;
	left: 160px;
	width: 310px;
}

figcaption h1 {
	margin: 0;
}

figcaption span {
	color: #16a085;
	padding: 0.6em 0 1em 0;
	display: block;
}

figcaption p {
	color: #000000;
	line-height: 1.3;
}

/* Media Queries */
@media screen and (max-width: 37.8125em) {
	.align > li {
		width: 100%;
		min-height: 440px;
		height: auto;
		padding: 0;
		margin: 0 0 30px 0;
	}

	.book {
		margin: 0 auto;
	}

	figcaption {
		text-align: center;
		width: 320px;
		top: 250px;
		padding-left: 0;
		left: -80px;
		font-size: 90%;
	}
}
/*@import url("https://fonts.googleapis.com/css?family=Montserrat:700");*/


.cube {
  position: absolute;
  top: 80vh;
  left: 45vw;
  width: 10px;
  height: 10px;
  border: solid 1px #003298;
  transform-origin: top left;
  transform: scale(0) rotate(0deg) translate(-50%, -50%);
  -webkit-animation: cube 12s ease-in forwards infinite;
          animation: cube 12s ease-in forwards infinite;
}
.cube:nth-child(2n) {
  border-color: #0051f4;
}
.cube:nth-child(2) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  left: 25vw;
  top: 40vh;
}
.cube:nth-child(3) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  left: 75vw;
  top: 50vh;
}
.cube:nth-child(4) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
  left: 90vw;
  top: 10vh;
}
.cube:nth-child(5) {
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
  left: 10vw;
  top: 85vh;
}
.cube:nth-child(6) {
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  left: 50vw;
  top: 10vh;
}

@-webkit-keyframes cube {
  from {
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}

@keyframes cube {
  from {
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}

/*==================== Benefits and Features ================*/
.bf {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
.bff {
   
    color: green;
    text-shadow: 1px 1px 2px greenyellow;
    padding: 20px;
    text-align: center;
}
.containerbf {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.bf1 {
    text-align: center;
    margin-bottom: 20px;
}
.bf2{
    color: green;
text-shadow: 1px 1px 2px greenyellow;
}
.featurebf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}
.featureb img {
    max-width: 200px;
    margin-right: 20px;
}
.feature-content {
    flex: 1;
}
@media (max-width: 768px) {
    .feature {
        flex-direction: column;
        text-align: center;
    }
    .feature img {
        margin: 0 auto 20px;
    }
}





/*========================== Privacy Policy========================*/
/*body{
  background: linear-gradient(180deg, hsla(210, 17%, 95%, 0.464),hwb(120 2% 5%));
}*/
/* Body Styles */
.pp {
    font-family: Arial, sans-serif;
    /*background-color: #f4f4f4;*/
    color: #333;
    margin: 0;
    padding: 0;
    /*background: linear-gradient(180deg, hsla(210, 17%, 95%, 0.464),hwb(120 2% 5%));*/
    background-color: #d7e0e9;
  }
  
  /* Container Styles */
  .pa{
    background-color: rgb(55, 127, 98);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: white;
    transition: box-shadow 0.3s ease; /* Add transition for smooth effect */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.705); 
    
  }
  
  .c{
    color:black;
    text-align: center;
    padding-bottom: 25px;
    padding-top: 25px;
  
    
  }
  /* Heading Styles */
  .d {
    color: rgb(0, 0, 0);
    text-align: center;
  }
  
  /* Paragraph Styles */
  .p {
    line-height: 1.6;
    color: white;
  }
  

  /*===========================Terms And Condition=============================*/
  

a {
	color:#5f0099;
}
a:hover {
	color:#5f0099;
}
h1, h2, h3 {
	font-weight: 700;
}
.tc {
	font-weight:600;
	color: green;
    text-shadow: 1px 1px 2px greenyellow;
}
h6 {
	font-weight:500;
}
.white {
	color:#ffffff !important;
}
.black {
	color:#000000;
}

.banner {
	background: #7a60ff;
	background: linear-gradient(to left, #7a60ff, #cd9ffa);
	padding:100px 0px;
	position:relative;
}
.banner::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(images/pattern.png);
}
.banner a.weblink {
	color:#ffffff;
	border-bottom:1px dotted #ffffff;
}
.banner a:hover {
	text-decoration:none;
}
.svg-wave {
	position: absolute;
	bottom: 0;
	width: 100%;
}
.banner-text {
	padding-right:80px;
	margin:50px 0px 0px;
}
.banner-text p {
	margin:40px 0px;
}
.banner-text ul {
	list-style: none;
}
.banner-text ul li {
	display: inline-block;
	margin: 0px 10px 10px 0px;
}
.banner-text ul li a {
	display: block;
}
.banner-text ul li a img {
	width: 150px;
	border-radius: 7px;
}
.prelative {
	position:relative
}
.section-padding {
	padding:50px 0px;
}
.sectioner-header {
	width:69%;
	margin:0 auto;
}
.line {
	height: 2px;
	width: 50px;
	background: #8e1efc;
	display: block;
	margin: 20px auto 20px;
}
.line::after {
	content:"";
	position: absolute;
	left: 50%;
	width: 150px;
	height: 2px;
	border-bottom: 2px dashed #8e1efc;
	margin-left: -75px;
}
.sectioner-header p {
	color:#818992;
	font-size: 17px;
}
.section-content {
	margin-top: 80px;
}
.icon-box {
	margin-bottom:50px;
}
.icon-box i {
	display: block;
	position: relative;
	width: 135px;
	height: 135px;
	border-radius: 100px;
	background: #7a60ff;
	background:  linear-gradient(to left, #7a60ff, #cd9ffa);
	color: #ffffff;
	font-size: 50px;
	line-height: 135px;
	margin: 0 auto;
}
.icon-box h5 {
	margin-top:30px;
}
.icon-box p {
	color: #000000;
	font-size: 14px;
	width: 80%;
	margin: 0 auto;
}
.about-btn {
	color: #8e1efc;
	padding: 10px 40px;
	border: 2px solid #8e1efc;
	border-radius: 7px;
	margin-top: 30px;
	display: inline-block;
	font-size: 18px;
}
.about-btn:hover {
	background:#8e1efc;
	color:#ffffff;
	text-decoration:none;
}
.video-section {
	background: url(images/video-bg.jpg) no-repeat fixed center;
	background-size: cover;
	overflow: hidden;
}
.video-overlay {
	background: linear-gradient(to left, rgba(122, 96, 255, 0.90), rgba(205, 159, 250, 0.90));
}
.video-section h3 {
	font-weight: 600;
	font-size: 38px;
}
.video-section i {
	display: block;
	position: relative;
	width: 70px;
	height: 70px;
	border-radius: 100px;
	background: #ffffff;
	color: #8e1efc;
	font-size: 30px;
	line-height: 70px;
	margin: 0 auto;
	cursor:pointer;
}
.video-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	align-content: center !important;
	-ms-flex-line-pack: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
}
.video-popup .video-src {
	position: relative;
	width: 700px;
	max-width: 80%;
}
.video-popup .iframe-src {
	width: 100%;
	height: 0;
	padding-top: 56.3%;
	position: relative;
	display: none;
}
.video-popup .iframe-src iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.single-feature {
	margin-bottom: 80px;
	margin-top: 40px;
}
.single-feature h5 {
	font-size: 16px;
}
.media-right-margin {
	margin-right:25px;
}
.single-feature p {
	font-size: 13px;
}

.icon-border span {
	display: block;
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 100px;
	color: rgb(142, 30, 252);
	font-size: 18px;
	line-height: 50px;
	border: 1px solid rgb(142, 30, 252);
}
.team {
	background: #fafafa;
	border-top: 1px solid #e4e4e4;
}
.team-detail {
	margin-top:40px;
}
.team-detail img {
	border-radius: 50%;
	width: 70%;
}
.team-detail h4 {
	color:rgb(142, 30, 252);
	margin-top: 20px;
	font-size: 17px;
	margin-bottom: 0px;
}
.testimonial {
	background: #7a60ff;
	background: linear-gradient(to left, #7a60ff, #cd9ffa);
	padding:100px 0px;
	position:relative;
}
.testimonial::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(images/pattern.png);
}
.bx-prev {
	left: -90px !important;
	background: url(images/arrow-left.png) no-repeat !important;
	background-size: auto auto !important;
	background-size: 100% 100% !important;
}
.bx-next {
	right: -90px !important;
	background: url(images/arrow-right.png) no-repeat !important;
	background-size: auto auto !important;
	background-size: 100% 100% !important;
}
.bx-wrapper {
	border: none !important;
	background: rgba(255, 255, 255, 0.81) !important;
	border-radius: 5px !important;
	box-shadow:none !important;
}
.slider-item {
	padding:20px;
}
.slider .test-img img {
	border: 12px solid #fff;
	border-radius: 50%;
	width: 100%;
	height: auto;
}
.test-img {
	float: left;
	width: 20%;
	margin-right:5%;
}
.test-text {
	float: left;
	width: 75%;
}
.slider .title {
	display: block;
	position: relative;
	margin: 0 0 20px;
	font-size: 1.125em;
	line-height: 1.25;
}
.slider .title span {
	display: block;
	font-size: 1.5em;
	font-weight: 700;
}
.faq {
	background: #fafafa;
	border-bottom: 1px solid #e4e4e4;
}
.faq-content {
	margin: 20px 0px;
}
.faq-content h4 {
	font-weight: 400;
	font-size: 20px;
}
.faq-content p {
	color: #000000;
	font-weight:300;
	margin-top:15px;
}
#contact_form .form-input {
	border: 1px solid #e4e4e4;
}
input {
	height: 42px;
	padding: 0 1rem;
	background: #fff;
	border-radius: 30px;
	margin-bottom: 1rem;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	border:0;
}
#contact_form textarea {
	resize: none;
	padding: 1rem;
	height: 150px;
	background: #fff;
	border: 0;
	border-radius: 30px;
	margin-bottom: 1rem;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.btn-grad {
 padding: .7rem 2rem;
	display: inline-block;
	color: #fff;
	border-radius: 2rem;
	border: 0;
	background: #7a60ff;
	background: linear-gradient(to left, #7a60ff, #cd9ffa);
	cursor:pointer;
}
.contact-info {
	padding: 2rem 2rem 1rem;
	border-radius: 8px;
	background: #7a60ff;
	background: linear-gradient(to left, #7a60ff, #cd9ffa);
}
.contact-item {
	margin:23px 0px;
}
.contact-item i {
	font-size: 20px;
}
.contact-item p {
	line-height: 20px;
	margin: 0;
}
.download {
	background: #7a60ff;
	background: linear-gradient(to left, #7a60ff, #cd9ffa);
	padding:100px 0px;
	position:relative;
}
.download::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(images/pattern.png);
}
.download ul {
	list-style: none;
}
.download ul li {
	display: inline-block;
	margin: 0px 10px 10px 0px;
}
.download ul li a {
	display: block;
}
.download ul li a img {
	width: 150px;
	border-radius: 7px;
}
.footer-copy {
	background: #ffffff;
	color: #242424;
	font-size: 13px;
	text-align: center;
	padding:15px 0px;
}
.footer-copy p {
	margin-bottom:0px;
}
@media all and (max-width:991px) {
.navbar .navbar-collapse {
	overflow: auto;
	background:  rgb(213, 198, 221);
	color: #fff !important;
	text-align: center;
	padding: 10px 0;
}
.nav-scroll .navbar-collapse {
	background: #fff !important;
}
#contact_form {
	margin-bottom:20px;
}
}
@media all and (max-width:768px) {
.nav-scroll .navbar-brand img, .navbar-brand img {
	transform: scale(0.75) !important;
	-webkit-transform: scale(0.75) !important;
}
.banner-text {
	padding-right: 0px;
	margin: 10px 0px 0px;
}
h2 {
	font-size: 25px;
}
h3 {
	font-size: 23px;
}
.section-padding {
	padding: 40px 0px;
}
.banner-text p {
	margin: 25px 0px;
}
.banner-text ul li a img {
	width: 140px;
	border-radius: 7px;
}
.sectioner-header {
	width: 90%;
}
.sectioner-header p {
	font-size: 14px;
}
.about-btn {
	padding: 5px 30px;
	margin-top: 0px;
	font-size: 16px;
}
.single-feature {
	margin-bottom: 20px;
	margin-top: 20px;
}
.team-detail {
	margin-top: 20px;
}
.team-detail img {
	width: 50%;
}
.bx-controls
{
	display:none;
}
.bx-wrapper {
	margin: 0px 20px !important;
}
.slider .test-img img {
	margin: 0 auto;
}
.test-img {
	float:none;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}
.test-text {
	float: none;
	width: 100%;
	text-align: center;
}
.section-content {
	margin-top: 40px;
}
.faq-content {
	margin: 10px 0px;
}
.row{
	color: #000000;
}
.faq-content h4 {
	font-size: 16px;
}
.faq-content p {
	font-size: 13px;
}
#contact_form {
	margin-bottom:20px;
}
.contact-item {
	font-size: 12px;
}
.download ul li a img {
	width: 120px;
}
.footer-copy p {
	font-size: 10px;
}
}